Vue的开始

Vue , Comments

VUe的引入

Vue的开始

1.引入

vue.js是开发板的js文件，带有错误提示；vuemi.js是线上版，不会有提示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vuescript,引入完成后HTML中会多了一个vue的构造器-->
    <script src="../js/vue.js"></script>
</head>
<body>
    
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>hello{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip=false;//阻止vue在启动时生成提示
        //创建Vue实例,参数为配置对象
        const x=new Vue({
            // 链接vue实例与HTML元素
            el:'#root',//element,el用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串。
            // el:documenet.getElementById('root'),这样子写也可以
            data:{
                name:'尚硅谷',
            }
        })

    </script>
</body>
</html>

总结

  1. 想要Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
  2. 在HTML中创建容器，并在配置对象中用el，传入
  3. 容器内的代码依旧符合HTML规范，只不过混入了一些==特殊的Vue语法==。
  4. 容器里的代码被称为vue模块
  5. Vue实例与容器只能是==一一对应==的关系
  6. 中的xxx要写==js表达式==,且xxx可以直接读取到data中的==所有属性==。
  7. 当Vue实例中的data发生变化是，页面中用到该数据的地方也会自动刷新。

区分什么是==js表达式==，什么是==js代码（或者说语句）==

  1. 表达式：一个表达式会产生一个==值==，可以放在任何需要值的地方。

    eg:

    - a(在已经定义好a变量后，再使用a，就会得到它对应的值)
- a+b，这明显是一个 ‘加法运算的表达式’
- function(1) ——这是一个调用函数并得到其返回值的形式
- x==y?a:b ——三元表达式

  2. js代码:

    1
    2
    - 控制顺序，例如 if(){}
    - for(){}、、

jhfutureWeb Developer & Designer

一个记录技术分享的网站。