一、模板语法

Vue模板语法两大类：

  • 插值语法：
    • 功能：用于解析标签体内容
    • 写法：,xxx是js表达式，且可以直接读取到data中的所有属性
  • 指令语法：
    • 功能：用于解析标签（包括：标签属性，标签体内容，绑定事件…）
    • 举例：v-bind:href=”xxx” 或简写为 :href=”xxx”,xxx同样要写js表达式，且可以直接读取到data中的所有操作
  • 备注：
    • Vue中有很多指令，且形式都是v-???，此处我们只是拿v-bind举个例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
    <div id="root">
    <h1><a v-bind:href="address">点我</a></h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#root",
            data: {
                name: 111,
                address: 'http://www.baidu.com'
            }
        })
    </script>
</body>

二、数据绑定

  • vue中有两种数据绑定的方式：
    • 单向数据绑定：数据只能从data流向页面
    • 双向数据绑定：数据不仅能从data流向页面，还可以从页面流向data
      • 双向数据绑定一般应用于表单类元素上
      • v-model:value 可以简写为v-model，因为v-model默认收集的就是value值
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    
    <div id="root">
        <!-- 普通写法 -->
        单向数据绑定：<input type="text/" v-bind:value="msg"><br>
        双向数据绑定：<input type="text" v-model:value="msg" /><br>
        <!-- 简单写法 -->
        单向数据绑定：<input type="text/" :value="msg"><br>
        双向数据绑定：<input type="text" v-model="msg" />

        <!-- 以下代码是错误的，因为v-model只能应用在表单类元素(输入类元素)上 -->
        <!-- <h2 v-model:x="msg">Hello</h2> -->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: "#root",
            data: {
                msg: 111
            }
        })
    </script>
</body>

初始页面：

修改双向绑定的input框内容为111222：

为什么单向的输入框内容也改变了？

  • 双向输入框改变，组件中的data随之改变，data改变，单向框也随之改变

三、el和data的两种写法

el有两种写法：

​ 1、new Vue时候配置el属性

​ 2、先创建vue实例，随后在通过vm.$mount(“root”)指定el的值

data有两种写法

​ 1、对象式

​ 2、函数式

​ 3、目前那种写法都可以，以后学习到组件时，必须使用函数式，否则会报错

一个重要原则：

​ 由vue管理的函数（如data）：一定不要使用箭头函数，一旦写了箭头函数，this就不再是vue实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<body>
    <div id="root">
        <h1>{{msg}}</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const v = new Vue({
            el: "#root", //第一种写法
            
            // data: {
            //     msg: 111
            // }
            
            //函数式写法
            data:function() {
                return{
                    msg:222
                }
            }
        })
        // v.$mount("#root") //第二种写法
    </script>
</body>

四、MVVM

M

  • 模型(Model) ：data中的数据

V

  • 视图(View) ：模板代码（不是静态页面） （两个语法：指令，大括号表达式）

VM

  • viewModel: 视图模型（Vue的实例）

data中所有的属性，最后都出现在了vm身上。
vm身上所有的属性 及 Vue原型上所有属性，在Vue模板中都可以直接使用。

MVVM

  • MVVM 本质上是 MVC （Model-View- Controller）的改进版。即模型-视图-视图模型。
  • 模型model指的是后端传递的数据，视图view指的是所看到的页面。
  • 视图模型viewModel是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：
  • 将模型转化成视图，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定
    将视图转化成模型，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听
  • 这两个方向都实现的，我们称之为数据的双向绑定