vue基础part(1-3)
模板语法：
插值表达式
{{}}取vue实例中data的属性值
{{}}支持计算和函数
v-text 修改标签文本
v-html 会将文本解析成html
<p>{{msg}}</p>
<p>{{msg.toUpperCase()}}</p>
<p v-text="msg"></p>
<p v-html="msg"></p>
v-bind
v-bind 绑定标签的属性 img的src属性
<img v-bind:src="imgUrl">
<img :src="imgUrl">
v-on
绑定事件监听
<button v-on:click='test'>v-on</button>
<button @click='test'>v-on</button>
计算属性和监视
computed
姓<input type="text" placeholder="firsr Name" v-model="firstName"><br>
名<input type="text" placeholder="Last Name" v-model="lastName"><br>
姓名1(单向)：<input type="text" placeholder="Full Name1" v-model="fullName"><br>
fullName 作为computed中函数返回值
什么时候执行：
1.初始化时显示
2.相关data数据发生变化 比如firstName改变时
var vm = new Vue({
el:'#demo',
data:{
firstName:'A',
lastName:'B',
},
computed:{
fullName (){
return this.firstName+' '+this.lastName
}
}
})
watch
姓名2(单向)：<input type="text" placeholder="Full Name2" v-model="fullName2"><br>
var vm = new Vue({
el:'#demo',
data:{
firstName:'A',
lastName:'B',
fullName2:'A B'
},
computed:{
fullName1 (){
return this.firstName+' '+this.lastName
}
},
watch:{
firstName:function(value){
this.fullName2 = value + ' ' + this.lastName
},
}
})
vm.$watch('lastName',function(value){
this.fullName2 = this.firstName + ' ' + value
})
watch 监视 当firstName发生变化时，fullName2也随之改变
以上者两种方式都是单向的，fullName1与fullName2的输入框发生改变的时候，不能反向作用到firstName和lastName
computed 属性get与set
computed:{
fullName1 (){
return this.firstName+' '+this.lastName
},
fullName3:{
//回调函数
get(){
return this.firstName+' '+this.lastName
},
set(value){
this.firstName = value.split(' ')[0]
this.lastName = value.split(' ')[1]
}
}
},
当firstName与lastName改变时，触发回调函数，修改firstName与lastName。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="demo">
姓<input type="text" placeholder="firsr Name" v-model="firstName"><br>
名<input type="text" placeholder="Last Name" v-model="lastName"><br>
姓名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>{{}}</p>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:'#demo',
data:{
firstName:'A',
lastName:'B',
fullName2:'A B'
},
computed:{
fullName1 (){
return this.firstName+' '+this.lastName
},
fullName3:{
//回调函数
get(){
return this.firstName+' '+this.lastName
},
set(value){
this.firstName = value.split(' ')[0]
this.lastName = value.split(' ')[1]
}
}
},
watch:{
firstName:function(value){
this.fullName2 = value + ' ' + this.lastName
},
}
})
vm.$watch('lastName',function(value){
this.fullName2 = this.firstName + ' ' + value
})
</script>
</body>
</html>
fullName1 () 只执行一次 原理：缓存 fullName1 作为key值，在缓存中存放其value，减少函数执行次数。
class与style绑定
v-bind 动态操作class
<div id="demo">
<h2>1.class绑定</h2>
<p class="cClass" :class="a">xxx 字符串</p>
<p :class="{aClass:isA,bClass:isB}">xxx 对象</p>
<p :class="['bClass ','cClass']">xxx 数组</p>
<button @click="update">更新</button>
<h2>2.style绑定</h2>
<p :style="{color:activeColor,fontSize:fontSize + 'px'}">
:style="{color:activeColor,fontsize:fontSize + 'px'}"
</p>
</div>
:class 绑定的数可以是字符串，也可以是对象，
对象中的值为 类名与布尔值，类名的值为true时绑定到标签上，类名为false时则不绑定
为数组时则是多个类名拼接在一起
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.aClass{
color: red;
}
.bClass{
color: blue;
}
.cClass{
font-size: 20px;
}
</style>
</head>
<body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#demo",
data:{
a:'aClass',
isA:true,
isB:false,
activeColor:'red',
fontSize:20
},
methods:{
update(){
this.a = 'bClass'
this.isA = false
this.isB = true
this.activeColor = 'green'
this.fontSize = 30
}
}
})
</script>
</body>
</html>
style 对象语法
<p :style="styleinData">
styleinData对象语法
</p>
styleinData在data中写法类似css 属性值的书写与css略微不同 css：font-size vue中data ：fontSize
styleinData:{
color:'green',
fontSize:'35px'
}
