学习day47

Vue 

现在开始学Vue了，问了同学，他说这个东西的内容很多。然后就跟着尚硅谷来学Vue了

用的是visual studio code，所以又下了一个visual。

首先时下载Vue，我再Vue3的官网是没有看到下载的，所以是跑到Vue2去下载的

将它自动跳出的警告去掉。分别先是在默认浏览器的扩展中安装了一个vue.js devtools插件

然后是在代码中将

写入

1.想让vue工作，就必须创建一个vue实例，且要传入一个配置文件

2.root容器里的代码依然符合html的规范，只不过混入了一些特俗的Vue语法

3.root容器里的代码被成为【Vue模板】

4.Vue实例和容器时一一对应的

5.真实开发中只有一个Vue实例，并且会配合着组件一起使用

6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性

7.一旦打他中的数据发生改变，那么页面中用到该数据的地方也会自动更新

Vue的模板语法

Vue模板语法又两大类：

          1.插值语法：

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

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

          2.指令语法：

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

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

                   且可以直接读取到data中的所有属性

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

    
    
    


    



    
    

        
插值语法
        
你好,{{name}}
        


        
指令语法
        点我去{{school.name}}学习
    

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

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

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

            备注：

              1.双向绑定一般都是应用在表单元素上面（如：input，select等）

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

    
    
    


    


    

        
        


        
        单向数据绑定：

        双向数据绑定: 


        
        
    
    

data和el的两种写法

          1.el的两种写法

             (1).new Vue式配置el的属性

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

          2.data有两种写法

             (1)对象式

             (2)函数式

          3.一个重要的原则

             由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

    
    
    


    


    

        
你好，{{name}}
    
    

MVVM模型：

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

          2.V：视图（View）：模板代码

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

        观察发现：

          1.data中所有的属性，最后都出现在了vm身上

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

    
    
    


    

    

       
学校名称：{{name}}
       
学校地址：{{adress}}
    

    

Object.defineproperty