指令 大括号 双向绑定
<div id="app">
<input type="text" v-model="message"><!--指令-->
<p>Hello {{message}}</p><!--大括号表达式-->
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
data:{
message:'Hello Vue!'
}
})
模板语法
<div id="app">
<h2>1. 双大括号表达式</h2>
<p>{{msg}}</p>
<p>{{msg.toUpperCase()}}</p>
<!--输出的是超链接 <我是Vue>-->
<p v-html="txt"></p>
<!--输出的是文本<<a href="">我是Vue</a>>-->
<p v-text="txt"></p>
<h2>2. 指令一: 强制数据绑定</h2>
<!-- :后面的就是一个表达式了-->
<img :src="imgUrl" alt="">
<img v-bind:src="imgUrl" alt="">
<h2>3. 指令二: 绑定事件监听</h2>
<!-- @绑定事件监听 一般单独放-->
<button v-on:click="test">test1</button>
<button @click="test2('abc')">test2</button>
<!--可以传参-->
<button @click="test2(txt)">test2</button>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
msg:'i will back',
txt:'<<a href="">我是Vue</a>>',
imgUrl:'https://cn.vuejs.org/images/logo.png'
},
methods:{
test(){
alert('hhhhhhhhhh')
},
test2(content){
alert(content)
}
}
})
</script>
计算属性和监视
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName"><br>
名: <input type="text" placeholder="Last Name" v-model="lastName"><br>
<!--fullName1是根据fistName和lastName计算产生-->
姓名1(单向): <input type="text" placeholder="Full Name1" v-model="fullName1"><br>
姓名2(单向): <input type="text" placeholder="Full Name2" v-model="fullName2"><br>
姓名3(双向): <input type="text" placeholder="Full Name3" v-model="fullName3"><br>
<p>{{fullName1}}</p>
<p>{{fullName1}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
const vm = new Vue({
el:'#demo',
data:{
firstName:'A',
lastName:'B',
fullName2:'A B'
},
computed:{
fullName1(){
console.log('fullName1')
console.log(this)
console.log(this.firstName)
return this.firstName + ' ' + this.lastName
},
fullName3:{
get(){
return this.firstName + ' ' + this.lastName
},
set(value){
const names = value.split(' ')
this.firstName = names[0]
this.lastName = names[1]
}
}
},
watch:{
firstName(newVal,oldVal){
this.fullName2 = newVal + ' ' + this.lastName
}
}
})
vm.$watch('lastName' , function (newVal,oldVal) {
this.fullName2 = this.firstName + ' ' + newVal
})
</script>