插值
文本
{{msg}}
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<body>
<div id="app">
{{msg}}
</div>
<script>
new Vue({
el: '#app',
data() {
return {
msg: 'hello,Vue!'
}
}
});
</script>
</body>
</html>
HTML
使用v-html指令用于输出HTML代码
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<body>
<div id="app">
<div>{{msg}}</div>
<div v-html="htmlstr">{{htmlstr}}</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
msg: 'hello,Vue!',
htmlstr: '<strong>hello,Vue!</storng>'
}
}
});
</script>
</body>
</html>
属性
HTML属性中的值应使用v-bind指令
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<body>
<div id="app">
<a v-bind:href="hrefstr">百度</a>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
hrefstr: 'http://www.baidu.com'
}
}
});
</script>
</body>
</html>
表达式
Vue提供了完全的JavaScript表达式支持
<!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">
<input :value="valuestr"/>
<p>表达式</p>
{{str.substring(0,4).toUpperCase()}}
张三:{{number+1}}
{{ok ? 'yes' : 'no'}}
<span :id="'goods_id_'+id">xx</span>
</div>
</body>
<script type="text/javascript">
// 绑定边界 ES6具体体现
new Vue({
el: '#app',
data() {
return {
valuestr:'2223',
str:'Java是最牛的语言',
number:59,
ok:false,
id:66
};
}
})
</script>
</html>
指令
定义
指带有“v-”前缀的特殊属性
核心指令
(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model
1)v-if|v-else|v-else-if:根据其后表达式的bool值进行判断是否渲染该元素, 他们只能是兄弟元素,v-else-if上一个兄弟元素必须是v-if,v-else上一个兄弟元素必须是v-if或者是v-else-if
示例代码
<!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-if/v-else</p>
<input v-model="score"/>
<span v-if="score > 90">优秀</span>
<span v-else-if="score > 80">良好</span>
<span v-else-if="score > 70">中等</span>
<span v-else-if="score > 60">及格</span>
<span v-else="">不及格</span>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
score: 90
}
}
});
</script>
</body>
</html>
2)v-show:与v-if类似,只是会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style=“display:none”
示例代码
<!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-if/v-else</p>
<input v-model="score"/>
<span v-if="score > 90">优秀</span>
<span v-else-if="score > 80">良好</span>
<span v-else-if="score > 70">中等</span> <span v-else-if="score > 60">及格</span>
<span v-else="">不及格</span>
<span v-if="score > 100">不存在</span>
<p>v-show</p>
<span v-show="score > 100">不存在</span>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
score: 90
}
}
});
</script>
</body>
</html>
3)v-for:类似JS的遍历,
遍历数组: v-for=“item in items”, items是数组,item为数组中的数组元素
遍历对象: v-for=“(value,key,index) in stu”, value属性值,key属性名,index下标
示例代码
<!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">
<div v-for="n in arr">
{{n}} <br>
</div>
<div v-for="n in likes">
{{n}} <br>
</div>
<div v-for="n in likes">
{{n.id}} == {{n.name}} <br>
</div>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
arr: ['篮球','足球','洗脚'],
likes: [
{id:1,name: '洗脚'},
{id:2,name:'洗头'},
{id:3,name:'推油'}
]
}
}
});
</script>
</body>
</html>
4) v-bind
5) v-on
示例代码
<!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-on</p>
<button type="button" v-on:click="do_spa">点我</button> <br>
<button type="button" @click="do_spa">点我</button> <br>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data() {
return {
arr: ['篮球','足球','洗脚'],
likes: [
{id:1,name: '洗脚'},
{id:2,name:'洗头'},
{id:3,name:'推油'}
]
}
},
methods: {
do_spa() {
alert('叫了一个spa服务')
}
}
});
</script>
</body>
</html>
6) v-model:用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值
7) v-for/v-model一起绑定[多选]复选框和单选框
参数
一些指令能够接收一个“参数”,在指令名称之后以冒号表示
<a v-bind:href="url">...</a>
在这里href是参数,告知v-bind指令将该元素的href属性与表达式url的值绑定
<a v-on:click="doSomething">...</a>
在这里click参数是监听的事件名。
动态参数
从2.6.0开始,可以用方括号括起来的JavaScript表达式作为一个指令的参数
<a v-bind:[attrname]="url"> ... </a>
同样地,你可以使用动态参数为一个动态的事件名绑定处理函数
<a v-on:[evname]="doSomething"> ... </a>
注1:动态参数表达式有一些语法约束,evName无效,evname有效,回避大写
过滤器
全局过滤器
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});
局部过滤器
new Vue({
filters:{'filterName':function(value){}}
});
vue允许你自定义过滤器,被用作一些常见的文本格式化,格式如下:
{{ name | capitalize }}
<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){};//添加一个新的类方法
案例:首字母大写/日期格式化
Vue.filter('format', function(v) {
return fmtDate(v, 'yyyy-mm-dd hh:MM:ss')
})
var vm = new Vue({
el: "#app",
data: {
name: 'xiaoli之JAVAXL',
currentTime: new Date()
},
filters: {
// 过滤器函数接受表达式的值作为第一个参数,这里的v指的是name
upCase: function(v) {
return v.substr(0, 1).toUpperCase() + v.substr(1);
},
lowCase: function(v) {
return v.substr(0, v.length - 2) + v.substr(v.length - 2).toLowerCase();
},
upCasePlus: function(v, start, end) {
return v.substring(0, start) + v.substring(start, end).toUpperCase() + v.substring(end);
}
}
});
// 这个写到vue实例后是不行的,双向数据绑定会出错,format函数会读取不到
// Vue.filter('format', function(v) {
// return fmtDate(v, 'yyyy-mm-dd HH:mm:ss')
// })
计算属性与监听属性
计算属性
计算属性可用于快速计算视图(View)中显示的属性。这些计算将被缓存,并且只在需要时更新
computed:{}
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<body>
<div id="app">
<p>计算属性</p>
<table>
<tr>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>
<input v-model="danjia"/>
</td>
<td>
<input v-model="n"/>
</td>
<td>
{{xiaoji}}
</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
danjia: 199,
n: 1
}
},
computed: {
xiaoji:function() {
return this.danjia * this.n;
}
}
});
</script>
</body>
</html>
监听属性
监听属性 watch,我们可以通过 watch 来响应数据的变化
watch:{}
示例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<body>
<div id="app">
<p>监听属性</p>
m:<input v-model="m"/> </br>
km:<input v-model="km"/> </br>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
m: 1000,
km: 1
}
},
watch: {
m:function(v) {
this.km = parseInt(v)/1000;
},
km:function(v) {
this.m = parseInt(v)*1000
}
}
});
</script>
</body>
</html>
计算属性和监听属性的区别
1)computed用来监控自己定义的变量,该变量不在data里面声明,直接在computed里面定义,然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理;
2)computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化,
举例:购物车里面的商品列表和总金额之间的关系,只要商品列表里面的商品数量发生变化,或减少或增多或删除商品,总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
3)watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象
4)监听属性缓存机制比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!
var vm = new Vue({
el: "#app",
data: {
num: 1,
price: 60,
results: [{
name: '语文',
score: 70
}, {
name: '数学',
score: 80
}, {
name: '英语',
score: 90
}],
km: 2,
m: 2000
},
// 计算属性可用于快速计算视图(View)中显示的属性。这些计算将被缓存,并且只在需要时更新
computed: {
sum: function() {
return this.num * this.price
},
total: function() {
// debugger;
let num = 0;
for (let index = 0; index < this.results.length; index++) {
num += parseInt(this.results[index].score);
}
return num;
}
},
watch: {
km: function(v2) {
this.m = parseInt(v2) * 1000;
},
m: function(v2) {
this.km = parseInt(v2) / 1000;
}
}
});