环境搭建

生产环境的校验 =>　　productionTip: true

关闭校验：

小案例

    
    
"root">
        
hello {{name}}
    
    

　　Vue实例和容器是一一对应的

模板语法

　　插值语法：用于解析标签体内容

　　指令语法：用于解析标签（标签属性，标签体内容，绑定事件）

    
    
"root">
        
插值语法
        
hello {{name}}
        

        
指令语法
        "school.url.toUpperCase()">点击去{{school.name}}学校学习
    
    

 数据绑定

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

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

　　v-model一般应用在表单类元素上（input，select等）

　　v-model默认收集的是value值

    
    
"root">
        
        单向数据绑定："text" :value="name">


        
        双向数据绑定："text" v-model="name">
    
    

el与data的写法

　　el：

　　　　new Vue时配置el属性

　　　　先创建Vue实例，随后在通过vm.$mount('#root')指定el的值

　　data：

　　　　对象式

　　　　函数式

　　Vue管理的函数，不要用箭头函数，若写了箭头函数，this不再是Vue实例（window）

    
    
"root">
        
你好，{{ name }}
    
    

理解MVVM

　　M：模型（Model），data中的数据

　　V：视图（View），模板代码

　　VM：视图模型（ViewModel），Vue实例

　　data中所有属性，都出现在了vm身上

　　VM身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用

    
    
"root">
        
名字：{{ name }}
        
地址：{{ address }}