目录
一、插值
Ctrl+k 格式化
文本：{{msg}}
1，输出红色字体内容
html： 使用v-html指令用于输出html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/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>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
msg: 'Vue 小宝',
htmlstr: '<h3 style="color:red;">这是一个html片段<h3>'
}
}
})
</script>
</html>
<div v-html="htmlstr"></div>
htmlstr: '<h3 style="color:red;">这是一个html片段<h3>'
2，vue中的属性
属性：HTML属性中的值应使用v-bind指令
原始写法
<a href="http://www.baidu.com">baidu</a>
vue的写法，使用v-bind指令绑定href属性
<a v-bind:href="hrefstr">baidu</a>
hrefstr: 'http://www.baidu.com'
所有原生态的属性，要利用vue的变量，都需要在对应的属性前加v-bind
如 v-bind:href，v-bind:value,缩写为：href ，：value
3，表达式
表达式：Vue提供了完全的JavaScript表达式支持 如：
{{str.substr(0,6).toUpperCase()}}
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
<li v-bind:id="'list-' + id">我的Id是js动态生成的</li>
str: 'Java就是爪洼'
取前四位，输出为Java
{{str.substring(0,4)}}
转大写,输出JAVA
{{str.substring(0,4).toUpperCase()}}
{{ number + 1 }}
number:59
张三:{{number+1}}
运行输出60
二、指令
指的是带有“v-”前缀的特殊属性
核心指令：(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model
v-else-if上一个兄弟元素必须是v-if
v-else上一个兄弟元素必须是v-if或者是v-else-if
v-show false：将元素隐藏，但是控制台会显示（display：none）
v-if false：将元素隐藏，但是控制台不显示
v-for：类似JS的遍历
具体实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>v-if|v-else|v-else-if</p>
分数：<input v-model="score" />
<div v-if="score>80">油</div>
<div v-else-if="score>60">粮</div>
<div v-else="score<60">茶</div>
<p>v-show</p>
<div v-show="score>90">v-show油秀学员</div>
<div v-if="score>90">v-if油秀学员</div>
<div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
score: 78
}
}
})
</script>
</html>
v-show与v-if的区别?
当分数大于九十，两者都出现
当分数小于九十，v-show由js代码（display）隐藏，v-if html代码不存在
v-for的用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>v-if|v-else|v-else-if</p>
分数：<input v-model="score" />
<div v-if="score>80">油</div>
<div v-else-if="score>60">粮</div>
<div v-else="score<60">茶</div>
<p>v-show</p>
<div v-show="score>90">v-show油秀学员</div>
<div v-if="score>90">v-if油秀学员</div>
<p>v-for</p>
<select v-model="hobbySelected">
<option v-for="h in hobby" :value="h.id">{{h.name}}</option>
</select>
<input v-model="hobbySelected" />
<div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
score: 78,
hobby: [{
id: "1",
name: "吃饭"
},
{
id: "2",
name: "睡觉"
},
{
id: "3",
name: "看剧"
}
],
hobbySelected: 3
}
}
})
</script>
</html>
爱好将根据输入框输入的内容改变
checkbox复选框的写法
<div v-for="h in hobby">
<input :value="h.id" type="checkbox" />{{h.name}}
</div>
v-on的用法
<p>v-on</p>
<button v-on:click="handle">触发事件</button>
<button @click="handle">触发事件hhh</button>
methods: {
handle() {
alert("触发事件")
}
}
两个写法的按钮都可以触发事件
三、动态参数
从2.6.0开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数
可以使用动态参数为一个动态的事件名绑定处理函数
例如：<a v-on:[evname]="doSomething"> ... </a>
注意：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写
双击触发事件：dblclick
<p>动态参数</p>
<button v-on:[evname]="handle">动态参数</button>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
evname: 'dblclick'
}
},
methods: {
handle() {
alert("触发事件")
}
}
})
</script>
页面效果：点击两下时弹出弹窗
四、过滤器
1.全局过滤器
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});
2.局部过滤器
new Vue({
filters:{'filterName':function(value){}}
});
过滤器函数接受表达式的值作为第一个参数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
{{msg|all}},,,,
{{msg|single}},,,,
{{msg|all|single}}
</div>
</body>
<script type="text/javascript">
// 全局过滤器
Vue.filter('all', function(value) {
// value 表示要过滤的内容
return value.substring(0, 2);
});
new Vue({
el: '#app',
data() {
return {
msg: "小宝是猪一样的"
}
},
methods: {
handle() {
alert("触发事件")
}
},
filters:{
'single': function(val) {
return val.substring(0,1);
}
}
})
</script>
</html>
运行结果如下，全局过滤器和局部过滤器的使用互不影响
过滤器可以串联，如{{msg|all|single}}中全局局部同时使用时，局部过滤器过滤的是全局过滤器截取的内容
过滤器是JavaScript函数，因此可以接受参数
{{msg|param(2,4)}}
'param':function(val,start,end){
return val.substring(1,4);
}
五、计算属性
通过变量算出来的属性叫计算属性
计算属性是没有在变量中定义的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<p>计算属性</p>
<table border="1" style="width:'600px' height:300px ;">
<tr>
<td>帽子</td>
<td>30</td>
<td>
<input v-model="maozi" />
</td>
<td>{{maoziTotal}}</td>
</tr>
<tr>
<td>衣服</td>
<td>50</td>
<td> <input v-model="yifu" />
</td>
<td>{{yifuTotal}}</td>
</tr>
<tr>
<td>裤子</td>
<td>100</td>
<td> <input v-model="kuzi" />
</td>
<td>{{kuziTotal}}</td>
</tr>
<tr>
<td>总价</td>
<td colspan="3">{{total}}</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
// 全局过滤器
Vue.filter('all', function(value) {
// value 表示要过滤的内容
return value.substring(0, 2);
});
new Vue({
el: '#app',
data() {
return {
maozi: 1,
yifu: 1,
kuzi: 1
}
},
methods: {
handle() {
alert("触发事件")
}
},
computed: {
maoziTotal() {
return this.maozi * 30;
},
yifuTotal() {
return this.yifu * 50;
},
kuziTotal() {
return this.kuzi * 100;
},
total() {
return this.maoziTotal + this.yifuTotal + this.kuziTotal;
}
}
})
</script>
</html>
运行结果如下，最右边单个商品总价 和总价会随着输入框中数量的改变而改变
六、监听属性
监听属性 watch，我们可以通过 watch 来响应数据的变化
<p>监听属性</p>
千米：<input v-model="km" />
米：<input v-model="m" />
km: 2,
m: 2000
watch: {
m: function(v) {
this.km = parseInt(v) / 1000;
},
km: function(v) {
this.m = parseInt(v) * 1000;
}
}
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
