一、插值
1.1 插值
1.1.1 文本
{{msg}}
1.1.2 html
使用v-html指令用于输出html代码
1.1.3 属性
HTML属性中的值应使用v-bind指令
1.1.4 表达式
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
1.1.5 class绑定
使用方式：v-bind:class="expression"
expression的类型：字符串、数组、对象
1.1.6 style绑定
v-bind:style="expression"
expression的类型：字符串、数组、对象
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<style>
.a{
color: aqua;
}
</style>
</head>
<body>
<div id="app">
<p>文本</p>
<h3>{{msg}}</h3><br />
<p>html串</p>
<h3 v-html="htmlchuan"></h3><br />
<p>vue中的属性</p>
<a v-bind:href="shux">点我</a>
<input :value="valuestr" /><br />
<p>表达式</p>
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
<br />
<p> class绑定</p>
<span :class="expression">look Me zai</span>
<p>style绑定</p>
<span :style="expressions">look Me zai</span>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
msg: 'vue666',
htmlchuan: 'vue-html',
shux: 'http://baidu.com',
valuestr: 'vue属性',
str:'看星河',
number:69,
ok:false,
id:66,
expression:'a',
expressions:'color:red;'
};
}
})
</script>
</html>
效果：
二、指令
指的是带有“v-”前缀的特殊属性
核心指令
(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model
v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素
他们只能是兄弟元素
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"
v-for：类似JS的遍历，
遍历数组: v-for="item in items", items是数组，item为数组中的数组元素
遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标
v-bind
v-on
v-model：用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
v-for/v-model一起绑定[多选]复选框和单选框
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<h2><p>v-if</p></h2>
<!-- 60分下不及格、 60-70分合格、70-80分良、80-90分优、90-100分为完美 -->
请输入分数：<input v-model="socre"/>
对应结果：
<span v-if="socre<60">不及格</span>
<span v-else-if="socre<70">合格</span>
<span v-else-if="socre<80">良好</span>
<span v-else-if="socre<90">优秀</span>
<span v-else-if="socre<=100">完美</span>
<span v-else="">输入不合法</span>
<br />
<h2><p>v-show</p></h2>
<div v-show="socre>90">v-show-上优秀学员名单</div>
<div v-if="socre<90">v-if-上优秀学员名单</div>
<br />
<h2><p>v-for</p></h2>
<select >
<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
</select>
<div v-for="h in hobby">
<input type="checkbox" :value="h.id"/>{{h.name}}
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return{
socre:0,
hobby:[
{id:"1",name:"打游戏"},
{id:"2",name:"篮球"},
{id:"3",name:"rap"}
],
}
}
})
</script>
</html>
三、过滤器
全局过滤器
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});
局部过滤器
new Vue({
filters:{'filterName':function(value){}}
});
vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
<!-- 在两个大括号中 -->
{{ name | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>
注1：过滤器函数接受表达式的值作为第一个参数
注2：过滤器可以串联
{{ message | filterA | filterB }}
注3：过滤器是JavaScript函数，因此可以接受参数：
{{ message | filterA('arg1', arg2) }}
注4：js定义一个类
function Stu(){};
Stu.prototype.add(a,b){};//添加一个新的实例方法
Stu.update(a,b){};//添加一个新的类方法
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<!-- {{msg|strSplit}} -->
<!-- 过滤器串联 -->
{{msg|strSplit|strSplit2}}
<!-- 过滤器传参 -->
{{msg|strSplit3(1,4)}}
</div>
</body>
<script type="text/javascript">
Vue.filter('strSplit',function(value){
console.log(value);
return value.substring(0,5);
})
Vue.filter('strSplit2',function(value){
console.log(value);
return value.substring(3,5);
})
Vue.filter('strSplit3',function(value,a,b){
console.log(value);
return value.substring(a,b);
})
new Vue({
el:'#app',
data(){
return{
msg:'hello vue'
}
}
})
</script>
</html>
四、计算属性监听属性
计算属性
计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新
computed:{}
监听属性
监听属性 watch，我们可以通过 watch 来响应数据的变化
watch:{}
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>计算属性</p>
<table border="1" style="width: 500px;height: 200px;">
<tr>
<td>帽子</td>
<td>20</td>
<td>
<input v-model="mz" />
</td>
<td>
{{mzxj}}
</td>
</tr>
<tr>
<td>衣服</td>
<td>250</td>
<td>
<input v-model="yf" />
</td>
<td>
{{yfxj}}
</td>
</tr>
<tr>
<td>裤子</td>
<td>150</td>
<td>
<input v-model="kz" />
</td>
<td>
{{kzxj}}
</td>
</tr>
<tr>
<td>总价</td>
<td colspan="3"></td>
<td>
{{zj}}
</td>
</tr>
</table>
<p>监听属性</p>
千米：<input v-model="km" />
米：<input v-model="m" />
<br />
</table>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
mz:1,
yf:1,
kz:1,
km:2,
m:2000
};
},
methods:{
handle(){
alert("触发事件");
}
},
computed:{
mzxj(){
return this.mz*30;
},
yfxj(){
return this.yf*250;
},
kzxj(){
return this.kz*150;
},
zj(){
return this.mzxj+this.yfxj+this.kzxj;
}
},
watch:{
m:function(v){
this.km = parseInt(v)/1000;
},
km:function(v){
this.m = parseInt(v)*1000;
}
}
})
</script>
</html>
