Vue2--基本知识.（1）

Vue模板语法有两大类：

1. 插值语法：
   功能：用于解析标签体内容。
   
   写法：{{xxx}},xxx是JS表达式，且可以直接读取到data中的所有属性。
   
2. 指令语法：
   功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…）
   
   举例：v-bind:herf=“xxx” 或者 简写为 :herf=“xxx”, xxx同样为js表达式，且可以直接读取到data中的所有属性。
   
   备注：Vue中有许多指令，且形式都是：v-???。

代码案例：

 <div id="dom">
        <p>hello {{name.toUpperCase()}}</p>
        <a v-bind:href="url">点击百度</a>

     <!-- v-bind可以简写为： 它是单向数据绑定，适用于所有元素。v-model 双向数据绑定，用于表单元素，简写为 v-model：-->
        
    </div>
    <script>
        Vue.config.productionTip=false; //关闭提示
        const x=new Vue({
            el:'#dom',
            data:{
                name:'ios',
                url:'https://www.4399.com/'
            }
        });
    </script>

Vue–数据绑定

（1）v-bind 单向数据绑定 即修改页面value值但代码数据不改变。（任一元素）数据仅能从data流向页面。

（2）v-model 双向数据绑定 即修改页面value值，代码数据修改。（注:此指令只能应用表单类元素,用于收集value值）数据不仅能从data流向页面，还可以从页面流向data。

el和data的两种写法

• vue对象绑定的两种方式

1. 第一种 el绑定

        const x=new Vue({
            el:'#dom',
            data:{
                name:'ios',
                url:'https://www.4399.com/'
            }
        });

2. 第二种 挂载

        const x=new Vue({
            data:{
                name:'ios',
                url:'https://www.4399.com/'
            }
        });
        console.log(x);
        x.$mount('#dom');

注：el和挂载写法可任意选择。

• data的两种写法

1. 第一种：对象式

        const x=new Vue({
            el:'#dom',
            data:{
                name:'ios',
                url:'https://www.4399.com/'
            }
        });

2. 第二种：函数式

        const x=new Vue({
            el:'#dom',
            data:function(){
                return{
                    name:'ios',
                url:'https://www.4399.com/'
                }
            }
        });

    //简写
        data(){
            return{
                    name:'ios',
                    url:'https://www.4399.com/'
                }

注：函数式必须有返回值且返回值为对象数值(不可使用箭头函数)，在使用vue组件中data必须写为函数式。

MVVM模型

1. M：模型（Model）：data中的数据
2. V：视图（View）：模板代码
3. VM：视图模型（ViewModel）：Vue实例
   
   注：vm身上所有的属性及Vue原型上所有的属性，在Vue模板中都可以直接使用。