05vue的模板语法

vue的模板语法

- 插值语法：{{表达式}}

- 指令语法：
	单向绑定：v-bind: 
	双向绑定：v-model:

<script src="./js/vue.js"></script>

v-bind和{{表达式}}

Vue模板语法有2大类:
	1.插值语法:
        功能: 用于解析标签体内容。
        写法: {{xxx}}, xxx是js表达式, 且可以直接读取到data中的所有属性。
	2.指令语法:
        功能: 用于解析标签 (包括:标签属性、标签体内容、绑定事件.....).
        举例: v-bind:href="xxx” 或简写为 :href="xxx"，xxx同样要写js表达式, 且可以直接读取到data中的所有属性。
   
    备注: Vue中有很多的指令，且形式都是: v-????，此处我们只是拿v-bind举个例子。

<div id="box1">
    <h3>hello {{name}}</h3>
    <a href="http://www.example.com">我是一个对照</a>
    <a v-bind:href="url">我是使用vue的</a>
    <div class="box2">
        <a v-bind:href="box2.url">{{box2.name}}</a>
        <div class="box3">
            <a v-bind:href="box2.box3.url">{{box2.box3.name}}</a>
        </div>
    </div>
</div>

<script>
    Vue.config.productionTip=false;
    new Vue({
        el:'#box1',
        data: {
            name:'example',
            url:'http://www.example.com',
            box2:{
                url:'http://www.alex.com',
                name:'alex',
                box3:{
                    url:'http://www.erixc.com',
                    name:'erixc'
                },
            },
        }
    })
</script>

v-bind和v-model

Vue中有2种数据绑定的方式:
    1.单向绑定(v-bind):数据只能从data流向页面。
    2.双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。

    备注:
        1.双向绑定一般都应用在表单类元素上（如:input、select等)
        2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值。

<div id="root">
    <!-- 普通写法 -->
    <!-- 
    单向数据绑定：<input type="text" v-bind:value='name'/>
    双向数据绑定：<input type="text" v-model:value='name'/> 
    -->

    <!-- 简写 -->
    单向数据绑定：<input type="text" :value='name'/>
    双向数据绑定：<input type="text" v-model='name'/>

    <!-- v-model的局限：近使用于可以获取value值的标签 -->
</div>

<script>
    new Vue({
        el:'#root',
        data: {
            name:'alex'
        }
    })
</script>