1 Vue模板语法
Vue模板语法分为两大类,插值语法和指令语法
1.1 插值语法
1)功能:用于解析标签体内容
2)写法:{{xxx}}
xxx是js表达式,且可以直接读取到vue实例里面的属性
3)示例
1.2 指令语法
1)功能:用于解析标签(包括:标签属性、标签体内容、时间绑定......)
2)比如v-bind: v-model: 等等指令
2 数据绑定
2.1 差值语法{{}}
<div id="root">
<h1>hello {{name * 2}}</h1>
</div>
<script type="text/javascript" >
new Vue({
el:'#root',
data:{
name:'123'
}
})
</script>
2.2 v-bind单向绑定
通过单向绑定数据
<div id="root"> <h1>hello {{name * 2}}</h1> <!-- href属性绑定date的url --> <a v-bind:href="url">百度一下</a> <br/>
<!-- value属性绑定phone属性 --> <input v-bind:value="phone"/><br/>
<!-- v-bind:可以简写成: --> <input :value="phone"/> </div> <script type="text/javascript" > new Vue({ el:'#root', data:{ name:'123', url:'www.baidu.com', phone:'15874859687' } }) </script>
2.3 v-model 双向绑定
<div id="root">
<!-- value属性绑定phone属性 -->
<input v-model:value="phone"/><br/>
<!-- 可以简写成: -->
<input v-model="phone"/>
</div>
<script type="text/javascript" >
new Vue({
el:'#root',
data:{
name:'123',
url:'www.baidu.com',
phone:'15874859687'
}
})
</script>
注意,双向绑定只能用于表单元素
2.4 单向绑定和双向绑定的区别
单向绑定,date的属性的值变化会影响容器,容器里面变化不会影响data的值
双向绑定,date的属性的值变化会影响容器,容器里面变化会影响data的值
示例
<div id="root">
<!-- 单向绑定 -->
单向绑定:<input :value="phone"/><br/>
<!-- 双向绑定 -->
双向绑定:<input v-model="phone"/>
</div>
<script type="text/javascript" >
new Vue({
el:'#root',
data:{
name:'123',
url:'www.baidu.com',
phone:'15874859687'
}
})
</script>
效果
现在,我们在单向绑定的输入框,输入新的手机号码,发现data里面的phone没有发生变化
现在,我们在双向绑定的输入框,输入新的手机号码,发现data里面的phone同步发生变化,同时因为data的phone属性变化,单向绑定输入框现实的值也变化了
2.5 小结
3 Vue实例中el的两种写法和date的两种写法
3.1 el的两种写法
3.1.1 第一种
直接在data里面写el属性的值
3.1.2 第二种
使用$mount
3.2 data的两种写法
3.2.1 第一种对象式
直接写个对象
3.2.2 第二种函数式
把data写成一个函数,这个函数必须返回一个对象
const v = new Vue({
data:function(){
return {
name:'123',
url:'www.baidu.com',
phone:'15874859687'
}
}
})
我们来看一下是谁调用的这个函数,打印下this,发现是Vue实例
这个函数还可以简写
const v = new Vue({
data(){
console.log('调用者:' , this)
return {
name:'123',
url:'www.baidu.com',
phone:'15874859687'
}
}
})
3.3 小结