vue2中模板语法与数据绑定详细

一、模板语法

1.插值语法：

插值语法往往用于标签体内容，标签体（起始标签和结束标签夹着的内容就是标签体内容）

举例：

                <template>
                        <h1>你好。{{name}}</h1>
                </template>

                <script>
                        ...
                        data(){
                                return{
                                        name:'lqj'
                                }
                        }
                </script>

2.指令语法：

指令语法往往管理标签属性

举例：

                <template>
                        <h1>指令语法</h1>
                        <a v-bind:href="url">点我去火狐主页</a>
                </template>

                <script>
                        ...
                        data(){
                                return{
                                        url:'https://home.firefoxchina.cn/'
                                }
                        }
                </script>

说明：如果绑定属性时前面加上v-bind:就会使得vue把后面“”里面的东西看作一个js表达式来执行！

 例如：

                <template>
                        <a v-bind:x="lqj"></a>
                </template>

                <script>
                        data:{
                                return{
                                        name:'lqj',
                                        xingbie:'男'
                                }
                        }
                </script>

        上面的例子因为在x前面写了v-bind:所以vue把x绑定的lqj这个值看作一个js表达式（在这lqj被看作成了一个变量来执行）
        又因为data的return里面没有定义lqj的变量值，所以在执行的过程中vue会报错，不会运行出结果！

注意：只有"v-bind:"可以简写成":"

        总结：
        1.插值语法：
                功能：用于解析标签体内容。
                写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

        2.指令语法：vue中有很多指令语法（v-？？？）
                此处我们先用v-bind：（解析属性标签举例子）
                功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）。
                举例：v-bind:href="xxx"或简写成:href="xxx"，xxx同样要写成js表达式，
                     且可以直接读取到data中的所有属性。
                备注：vue中有很多的指令，且形式都是：v-???,此处我们知识拿v-bind举个例子

二、数据绑定

1.单项数据绑定：

                v-bind:
                举例：

                <template>
                        单项数据绑定：<input type="text" v-bind:value="name">
                </template>

                <script>
                        ...
                        data(){
                                return{
                                        name:'lqj'
                                }
                        }
                </script>

        以上的结果是在浏览器中如果在input框中输入东西是，vue开发者工具中的vc中的值
        是不会改变的，这就是单向绑定（只能由vue开发者工具向dom之中传递数据）

2.双向数据绑定：

                v-model：
                举例：

                <template>
                        双项数据绑定：<input type="text" v-model:value="name">
                </template>

                <script>
                        ...
                        data(){
                                return{
                                        name:'lqj'
                                }
                        }
                </script>

        ·以上的结果是在浏览器中如果在input框中输入东西时，我们会发现vue开发者工具中的vc里面的值
        ·会跟着input框中的数据改变而改变！

        ·如果此时我们同时写了两个绑定事件（v-bind：和v-model：）这时我们要是改变v-model：的input框中的数据
        ·v-bind：的input框中的数据也会随之改变，因为这是一个连锁反应：
        ·因为v-model：可以改变vue开发者工具里面的数据，而v-bind:中的数据时随着vue开发者工具里面的数据变化而变化的
        ·所以v-model：的数据改变会间接带动v-bind：的数据所改变！

        ·注意：v-model：这个双向绑定只能应用到表单类元素上（输入类元素）

        总结：vue2有两种数据绑定的方式：
        1.单项数据绑定（v-bind:）数据只能从data流向页面。
        2.双向数据绑定（v-model：）数据不仅可以从data流向页面，还可以从页面流向data。
                备注：
                1.双向绑定一般都是应用在表单雷元素上（如：input、select等）
                2.v-model:value可以简写成v-model，因为v-model默认收集的就是value值。

 今天虽然是生日，但是也要继续学习呀~