Vue学习笔记

Vue模板语法有两大类

　　1、插值语法：

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

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

　　2、指令语法：

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

　　　　写法：v-bind:href="xxx" 或简写为:href="xxx"，xxx同样要写js表达式，且可以读取到data中的所有属性

　　　　备注：Vue中有很多的指令，且形式都是：v-???，我们只是拿v-bind举个例子

Vue中有2种数据绑定方式

　　1、单向绑定（v-bind）：数据只能从data流向页面

　　2、双向绑定（v-model）：数据不仅可以从data流向页面，还可以从页面流向data

　　备注：1、双向绑定一般应用再表单类元素上（如：input，select等）

　　　　　2、v-model:value可简写为v-model，因为v-model默认收集的就是value值

 

el与data的两种写法

　　

//el的两种写法
            const v = new Vue({
                //el:'#root',  // 第一种写法
                data:{
                    name:'尚硅谷'
                }
            })
            setTimeout(() => {
                v.$mount('#root')  // 第二种挂载的写法
            },2000)

// data的两种写法
            new Vue({
                el:'#root',
                // 对象式写法
                data:{
                    name:'尚硅谷'
                }
                // 第二种函数式写法
                data:function(){
                    return {
                        name:'尚硅谷'
                    }
                }
            })