模板语法

Vue模板语法包括两大类

插值语法
功能：用于解析标签体内容
写法：{{xxx}},xxx 是 js 表达式，可以直接读取到 data 中的所有区域
指令语法
功能：用于解析标签(包括：标签属性、标签体内容、绑定事件…) 举例：或简写为 ,xxx 同样要写 js 表达式,可以直接读取到 data 中的所有属性
href="{{address}} 使用当前方式无法读取到属性,使用指令语法标示标签属性由vue进行解析

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <!-- 插值語法 -->
        <h1>插值语法</h1>
        <h3>你好{{name}}</h3>

        <!-- 指令語法 -->
        <h1>指令语法</h1>
        <a v-bind:href="shcool.url">跳转百度</h3>
        <a :href="shcool.url">跳转百度</h3>
         <h3>你好 {{shcool.name}}</h3>
        </div>

    <script type = 'text/javascript'>
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'java',
                shcool:{
                    name:'天堂',
                    url:'http://www.baidu.com'
                }
            }
        })
    </script>
</body>
</html>

数据绑定

Vue中有2种数据绑定的方式

单向绑定v-bind:数据只能从 data 流向页面
双向绑定v-model:数据不仅能从 data 流向页面,还可以从页面流向 data

**备注 **

双向绑定一般都应用在表单类元素上，如<input><select><textarea>等
v-model:value可以简写为v-model，因为v-model默认收集的就是value值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../js/vue.js"></script>

</head>
<body>
    <!-- 普通写法gi -->
    <div id="root">
        单项数据绑定:<input type="text" v-bind:value="name" ></br>
        双向项数据绑定:<input type="text" v-model:value="name" >
   </div>
   <!-- 下列代码是错的,因为v-model只能引用在变淡类元素(输入类元素) -->
   <h2 v-model:x='name'>你好a</h2>
    <script type = 'text/javascript'>
        Vue.config.productionTip = false
        new Vue({
            el:'#root',
            data:{
                name:'java',
                }
            })
    </script>
</body>
</html>

二、模板语法 数据绑定

模板语法

数据绑定

二、模板语法数据绑定