Vue教学2

学了前面的教学，下面我们又来继续学习Vue的其他内容

一、模板语法

Vue模板语法有2大类：

        1.插值语法

                插值语法就是将Vue实例中的数据插入到容器里

                功能：用于解析标签体内容

                写法：{{xxx}}，xxx是js表达式，且可以读取到data中的所有属性

        2.指令语法

                功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）

                举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写成js表达式

                备注：Vue中有很多指令，且形式都是 v-???，此处只是拿v-bind举例

                

二、 数据绑定

Vue中有两种数据绑定的方式        

        1.单向绑定（v-bind）

                数据只能从data流向页面

        2.双向绑定（v-model）

                数据不仅能从data流向页面，还可以从页面流向data

                注意：

                        1.双向绑定一般都应用在表单类元素上（如：input、select）

                        2.v-model:value 可以简写成v-model,因为v-model默认收集的就是value值 

三、el与data的两种写法

        1.el的两种写法（两种都可以用，只是第二种更灵活）

                （1）第一种：new Vue时就配置el属性

                （2）第二种：先创建Vue实例，随后再通过v.$mount("#root")指定el的值

        2 .data的两种写法

                （1）第一种（对象式）

                 （2）第二种（函数式）：以后学到组件时，就必须要用函数式，否则报错