目录
一，插值
分析：
1 文本
{{msg}}
2 html
使用v-html指令用于输出html代码
3 属性
HTML属性中的值应使用v-bind指令
4 表达式
Vue提供了完全的JavaScript表达式支持
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
5 class绑定
使用方式：v-bind:class="expression"
6 style绑定
v-bind:style="expression"
expression的类型：字符串、数组、对象
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.a{
color: lightgreen;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<!-- 定义边界 -->
<div id="app">
<p>文本</p>
<h3>{{msg}}</h3>
<p>html串</p>
<div v-html="htmlstr"></div>
<p>Vue中的属性</p>
<!-- v-bind：绑定属性值 注意：所有原生态的属性，要利用Vue的变量，都需要在对应的属性前加v-bind-->
<!-- 第一种写法 -->
<input v-bind:value="valuestr">
<!-- 第二种写法 -->
<input :value = "valuestr"/>
<p>表达式</p>
{{str.substring(0,4).toUpperCase()}}<br>
熊二：{{number+1}}<br>
{{ok?'yes' : 'on'}}
<span :idstr="book_+'1'">书籍信息</span>
<p>class绑定</p>
<span :Class="classStr">文本内容</span>
<p>style绑定</p>
<span :style="styleStr">文本内容</span>
</div>
</body>
<script type="text/javascript">
/* 绑定边界 es6的具体体现 */
new Vue({
el:'#app',
data(){
/* ctrl+k格式化 */
return {msg:'vue哈哈哈',
htmlstr:'<span style="color:red;">文本内容</span>',
valuestr:'vue的值',
str:'hello hhh',
number:66,
ok:false,
idstr:'book_',
classStr:'a',
styleStr:'color:blue;',
};
}
})
</script>
</html>
效果图
二，指令
解析：
指的是带有“v-”前缀的特殊属性
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-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">
<p>v-if</p>
请输入分数：<input v-model="score" />
对应结果：
<span v-if="score<60">不及格</span>
<span v-else-if="score<70">合格</span>
<span v-else-if="score<80">良</span>
<span v-else-if="score<90">优秀</span>
<span v-else-if="score<=100">优+</span>
<span v-else=" ">输入不合格</span>
<p>v-show</p>
<span v-show="showflag">v-show展示与否</span>
<span v-show="showflag">v-if展示与否</span>
<p>v-for</p>
<select>
<option v-model="like" v-for="l in like" :value="l.id">{{l.name}}</option>
</select>
<br>
<div v-for="l in like">
<input :value="l.id" type=checkbox/>{{l.name}}
</div>
<p>v-on</p>
<button v-on:click="handle">触发事件</button>
<button @click="handle">触发事件2</button>
</div>
</body>
<script type="text/javascript">
/* 绑定边界 es6的具体体现 */
new Vue({
el: '#app',
data() {
/* ctrl+k格式化 */
return {
score: 0,
showflag: false,
like: [{
id: "1",
name: "hhh"
}, {
id: "2",
name: "bbb"
}, {
id: "3",
name: "aaa"
}],
likeSelected: 3
};
},
mothods: {
handle() {
alert("触发事件");
}
}
})
</script>
</html>
效果图
三，过滤器
解析：
全局过滤器
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});
局部过滤器
new Vue({
filters:{'filterName':function(value){}}
});
vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：
<!-- 在两个大括号中 -->
{{ name | capitalize }}
提示：
注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|strdelete}} -->
{{msg|strdelete|strdelete2}}<br>
<!-- 过滤器传参 -->
{{msg|strdelete3(2,5)}}
</div>
</body>
<script type="text/javascript">
Vue.filter('strdelete',function(value){
debugger;
console.log(value);
return value.substring(0,2);
})
Vue.filter('strdelete2',function(value){
debugger;
console.log(value);
return value.substring(0,2);
})
Vue.filter('strdelete3',function(value,a,b){
debugger;
console.log(value);
return value.substring(a,b);
})
/* 绑定边界 es6的具体体现 */
new Vue({
el: '#app',
data() {
/* ctrl+k格式化 */
return {
msg:'aabbhh'
}
}
})
</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>
请输入第一个数：<input v-model="x" /><br>
请输入第二个数：<input v-model="y" /><br>
结果为：{{addFlag}}
<p>监听属性</p>
请输入千米：<input v-model="km" /><br>
请输入米：<input v-model="m" /><br>
<p>购物车</p>
<table>
<tr>
<td>物品</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>帽子</td>
<td>{{maozidanjia}}</td>
<td>
<input v-model="maozi" />
</td>
<td>
{{maozizongjia}}
</td>
<tr>
<td>衣服</td>
<td>{{yifudanjia}}</td>
<td>
<input v-model="yifu" />
</td>
<td>
{{yifuzongjia}}
</td>
</tr>
<tr>
<td>裤子</td>
<td>{{kuzidanjia}}</td>
<td>
<input v-model="kuzi" />
</td>
<td>
{{kuzizongjia}}
</td>
</tr>
<tr>
<td>总价</td>
<td colspan="3">{{zongjia}}</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
/* 绑定边界 es6的具体体现 */
new Vue({
el: '#app',
data() {
/* ctrl+k格式化 */
return {
x: 0,
y: 0,
km: 0,
m: 0,
maozidanjia:10,
yifudanjia:30,
kuzidanjia:90,
maozi:1,
yifu:1,
kuzi:1,
}
},
computed: {
//计算属性
addFlag: function() {
return parseInt(this.x) + parseInt(this.y);
},
maozizongjia(){
return this.maozidanjia*this.maozi;
},
yifuzongjia(){
return this.yifudanjia*this.yifu
},
kuzizongjia(){
return this.kuzidanjia*this.kuzi
},
zongjia(){
return this.maozizongjia + this.yifuzongjia + this.kuzizongjia;
}
},
watch: {
//对应被监听的属性，v指的是被监听属性的值
//当v对应的值发生变化，会执行function方法
//v指的是m变量
km: function(v) {
this.m = parseInt(v) * 1000;
},
//v值的是km的变量
m: function(v) {
this.km = parseInt(v) / 1000;
}
}
})
</script>
</html>
效果图
