1.初识 Vue

  • 想让 Vue 工作,就必须创建一个 Vue 实例,切要传入一个配置对象
  • root 容器里的代码依然符合 html 规范,只不过混入了一些特殊的 Vue 语法
  • root 容器里的代码被称为Vue 模板

注意点:

  1. 容器与 vue 实例之间一一对应
  2. 真实开发中只有一个 vue 实例,并且会配合着组件一起使用
  3. 双花括号里面的内容必须写成 js 表达式,且可以自动读取到 data 中的所有属性
  4. 一旦 data 中的数据发生改变,那么页面中用到该数据的地方也会自动更新

js 表达式 和 js 代码(语句)区别:

  1. 表达式:一个表达式会生成一个值,可以放在任何一个需要值的地方.
    (1).a
    (2).a+b
    (3).demo(1)
    (4).x === y ? ‘a’ : ‘b’
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
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <script type="text/javascript" src="../../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>hello {{name}}</h1>
    </div>
</body>
<script type="text/javascript">
    // 阻止 Vue在启动时产生生产提示。
    Vue.config.productionTip = false;

    //创建Vue实例
    const vm = new Vue({
        // el用于指定当前vue实例为那个容器服务，值通常为css选择器字符串，这里用的是id选择器
        el: '#root',
        // data中用于存储数据，数据供el所指定的容器去使用，值可以写成对象或者函数
        data: {
            name: 'world'
        }
    });
</script>
</html>

2. Vue 语法模板

模板语法

  1. 插值语法:
    功能：用于解析标签提内容
    写法：,xxx 是 js 表达式，且可以直接读取到 data 中的所有属性。
  2. 指令语法：
    功能：用于解析标签（包括：标签属性、标签体内容、绑定事件、、、）
    写法：v-bind:href=”xxx”,或简写为 :href=”xxx”，xxx 同样要写 js 表达式，且可以直接读取到 data 中的所有属性。
    备注：Vue 中有很多的指令，且形式都是：v-????。

3.数据绑定

vue 中有 2 种数据绑定的方式：

  1. 单向绑定(v-bind):数据只能从 data 流向页面
  2. 双向绑定(v-model):数据不仅能从 data 流向页面，还可以从页面流向 data
    备注：
  3. 双向绑定一般都应用在表单类元素上（如：input、select 等）
  4. v-model:value 可以简写为 v-model,因为 v-model 默认收集的就是 value 值。

4.el 与 data 的两种写法

data 与 el 的两种写法

  1. el 有两种写法：
  • new Vue 的时候配置 el 属性
  • 先创建 Vue 实例，随后再通过 vm.$mount(‘xxx’)指定 el 的值，其中 xxx 为 CSS 选择器
  1. data 有两种写法：
  • 对象式
  • 函数式
  • 如何选择：如果引入组件之后，data 必须使用函数式，否则会报错。
  1. 一个重要原则：由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this 就不再是 Vue 实例了，而是整个页面 window。

5.MVVM 模型

  • M - 模型(Model)：对应 data 中的数据
  • V - 视图(View)：模板
  • VM - 视图模型(ViewModel)：Vue 实例对象
  • data 中所有的属性，最后都出现在了vm身上。
  • vm身上所有的属性，及 Vue 原型上所有属性，在 Vue 模板中都可以直接使用。

6.数据代理

6.1 Object.defineProperty 方法

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
<script type="text/javascript">
    let number = 18;
    let person = {
        name:'zhangsan',
        set:'男'
    };

    //不可枚举
    Object.defineProperty(person,'age',{
        // value:18,
        //控制属性是否可以枚举，默认值是false
        // enumerable:true,
        // 控制属性是否被修改，默认值为false
        // writable:true,
        // 控制属性是否可以被删除，默认值是false
        // configurable:true,

        //当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
        get(){
            return number;
        },
        //当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
        set(value){
            console.log('age发生了修改，修改值为：',value);
            number = value;
        }
    });
    console.log(person);

    console.log(Object.keys(person));
</script>

6.2 数据代理定义

  • 通过一个对象代理对另一个对象中属性的操作(读/写)
1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
    let obj = {x:100};
    let obj2 = {y:200};

    Object.defineProperty(obj2,'x',{
        get(){
            return obj.x;
        },
        set(value){
            obj.x = value;
        }
    })
</script>

6.3 Vue 中的数据代理

  1. Vue 中的数据代理：通过vm对象来代理data对象中属性的操作(读/写)
  2. Vue 中数据代理的好处：更加方便的操作data中的数据
  3. 基本原理：
    • 通过 Object.defineProperty()把data对象中所有属性添加到vm上。
    • 为每一个添加到vm上的属性，都指定一个getter/setter。
    • 在getter/setter内部去操作(读/写)data中对应的属性。

7.事件处理