Vue基础学习（1）

一.初始Vue

     初始Vue：

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

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

            3.root容器里的代码被称为【vue模板】

            4.容器和VUE实例一一对应

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

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

            7.一旦data找那个的数据发生改变，页面中用到数据的地方也会自动更新

       注意区分：js表达式和js代码

                1.表达式（特殊的代码）：会产生一个值，可以放在任何一个需要值得地方

                    (1).a

                    (2).a+b

                    (3).demo(1)

                    (4).x==y? 'a':'b'

                2.js代码（语句）

                    (1).if(){}

                    (2).for(){}

二.模板语法

 vue模板语法有两大类：

        1.插值语法：

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

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

        2.指令语法：

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

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

            备注：vue中有很多指令，且形式都为：v-???

三.数据绑定

         Vue中有2种数据

        绑定的方式：

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

        2.双向绑定（v-model）：数据可从data流向页面，也可从页面流向data。

            备注：

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

                2.v-model：value可简写为v-model，因为v-model默认手机的是value值

        

        <!-- 普通写法 -->

        <!-- 单向数据绑定:<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"><br>

四.el与data的两种写法

            一个重要原则：有vue管理的函数一定不要写箭头函数，写了，this就不再是vue实例了

//el第一种写法          

new Vue({

             el:'#root',  

//data第一种写法:对象式

             data:{      

               name:"wfc"

             }

 }

 const v=new Vue({

            data:function(){ //data第二种写法:函数式，学到组件时必须用函数式

               return{

                   name:"wfc"

               }

           }

          //data第二种函数式简写

          data(){    

                return{

                    name:"wfc"

                }

            }

        })

       //el第二种写法

      v.$mount('#root')  

       

五.MVVM模型

    MVVM模型

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

        2.v:视图（view）：模板代码

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

    观察发现：

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

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