1.Vue模板语法
（1）插值表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{name}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
name:"Dell"
}
})
</script>
</body>
</html>
（2）v-text
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-text="name">
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
name:"Dell"
}
})
</script>
</body>
</html>
（3）v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-html="name">
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
name:"Dell"
}
})
</script>
</body>
</html>
（4）v-text与v-html与插值表达式区别
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div v-html="name">
</div>
<div>
{{name}}
</div>
<div v-text="name">
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
name:"<h1>Dell</h1>"
}
})
</script>
</body>
</html>
v-text与插值表达式一样。三个模板都可以写js表达式：
插值{{name+ ’ Lee ‘}}
v-text="name+’ Lee ‘"
v-html="name+’ Lee '"
2.计算属性
（1）计算属性：computed
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{fullName}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
firstName:"Dell",
lastName:"Lee"
},
computed:{
fullName:function(){
return this.firstName + " " +this.lastName
}
}
})
</script>
</body>
</html>
（2）computed内置缓存
computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值，负责不会重新取值。（而methods没有缓存）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{fullName+" " + age }}
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
firstName:"Dell",
lastName:"Lee",
age:"18",
},
computed:{
fullName:function(){
console.log("计算了一次");
return this.firstName + " " +this.lastName
}
}
})
</script>
</body>
</html>
改变age值：
改变lastName值：
3.方法methods
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{fullName() }}
{{age}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
firstName:"Dell",
lastName:"Lee",
age:"18",
},
methods:{
fullName:function(){
return this.firstName + " " + this.lastName
}
}
})
</script>
</body>
</html>
注意：方法调用要加（）
methods没有缓存机制
4.监听器watch
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{fullName}}
{{age}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
firstName:"Dell",
lastName:"Lee",
fullName:"Dell Lee",
age:"18",
},
watch:{
firstName:function(){
this.fullName=this.firstName+this.lastName;
},
lastName:function(){
this.fullName=this.firstName+this.lastName;
}
}
})
</script>
</body>
</html>
当age改变时，lastName与firstName不变，因为监听的是lastName与firstName。watch类似于computed具备缓存机制。
5.计算属性的setter和getter
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性的setter和getter</title>
<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{fullName}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
firstName:"Dell",
lastName:"Lee",
},
computed:{
fullName:{
get:function(){
return this.firstName + " " +this.lastName
},
set:function(value){
var arr = value.split(" ");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
})
</script>
</body>
</html>
get：通过其它值，算出新值。
set：通过设置一个值改变其相关联的值。
版权声明：本文为weixin_43273921原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。