1,插值
1.1 简单的插值
<!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 }}
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
msg:'hello Vue'
}
})
</script>
</body>
</html>
1.2 进行文本转义
<!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-html="msg">html文本转义</p>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
msg:'<span style="color:red;">hello Vue...</span>',
}
})
</script>
</body>
</html>
1.3 v-bind指令
<!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 type="" name="" id="" value="msg" /><br>
<input type="" name="" id="" v-bind:value="msg" /><br>
<input type="" name="" id="" :value="msg" /><br>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
msg:'Hello Vue',
}
})
</script>
</body>
</html>
我们可以看到绑定v-bind之后显示的就是msg的value值 并且v-bind=“ :” 它们的效果是一样的。
1.4 vue中的js支持
<!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>Vue中对js的支持</p>
<p>{{ str }}</p>
<p>{{ str.substring(0,5) }}</p>
<p>{{ num+1 }}</p>
<p>{{ flag?"yes":"no" }}</p>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
str:'HelloVue',
num:10,
flag:false
}
})
</script>
</body>
</html>
如图这些函数和判断都可以使用
2,指令
2.1 v-if,v-else-if,v-else 的使用
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.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<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>-->
</div>
<script>
const app = new Vue({
el: '#app',
data() {
return{
score: 95
}
}
})
</script>
</body>
</html>
2.2 v-show控制元素的隐藏和显示
v-if是真的不存在
v-show是存在但是被css样式隐藏了
<!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 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">
const app = new Vue({
el: '#app',
data() {
return{
score: 95
}
}
})
</script>
</body>
</html>
2.3 v-for 循环遍历
<!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-for</p>
<div v-for="n in arr">
{{n}}<br>
</div>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data() {
return{
arr:['吃饭','睡觉','打豆豆'],
likes:[
{id:1,name:'洗头'},
{id:2,name:'洗澡'},
{id:3,name:'洗衣服'}
]
}
}
})
</script>
</body>
</html>
2.4 v-on 绑定事件
<!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-on</p>
<button type="button" v-on:click="do_spa">点我</button>
<button type="button" @click="do_spa">点我</button>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
methods:{
do_spa(){
alert('叫了一个spa服务')
}
}
})
</script>
</body>
</html>
添加一个魔法按钮
可以通过input内输入特定值click才可以触发这个魔法按钮
<!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-on</p>
<button type="button" v-on:click="do_spa">点我</button>
<button type="button" @click="do_spa">点我</button>
<br />
<input v-model="magic"><br />
<button type="button" v-on:[magic]="do_spa">魔法按钮</button>
</div>
<script type="text/javascript">
const app = new Vue({
el: '#app',
data(){
return{
magic:'click'
}
},
methods:{
do_spa(){
alert('叫了一个spa服务')
}
}
})
</script>
</body>
</html>
3,过滤器
<!--3.1全局过滤器-->
Vue.filter('filterName', function (value) {
// value 表示要过滤的内容
});
<!--3.2局部过滤器-->
new Vue({
filters:{'filterName':function(value){}}
});
<!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>
<script src="date.js"></script>
</head>
<body>
<div id="app">
<p>基本过滤器</p>
{{ str }}<br>
<p>调用过滤器A</p>
{{ str|filterA }}<br>
<p>过滤器串联</p>
{{ str|filterA|filterB }}<br>
<p>过滤器传参</p>
{{ str|filterC(0,8) }}<br>
{{ str|filterC(0,4) }}<br>
</div>
<script>
Vue.filter('format',function(v){
return fmtDate(v,'yyyy-MM-dd hh:mm:ss')
})
const vm = new Vue({
el:'#app',
filters:{
filterA(v){
return v.substring(0,5);
},
filterB(v){
return v.substring(1,2)
},
filterC(v,start,end){
return v.substring(start,end)
}
},
data:{
str:'HelloVueVue',
curtime: new Date()
}
})
</script>
</body>
</html>
4,计算属性和监听属性
4.1 监听属性是双向影响 改变一方的值另一方也会随之改变
4.2 计算属性 适合用于购物车计算
<!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>
m:<input v-model="m" />
km:<input v-model="km" />
<p>计算属性</p>
<table>
<tr>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td><input v-model="danjia"/></td>
<td><input v-model="num"/></td>
<td>{{ total }}</td>
</tr>
</table>
</div>
<script>
const vm = new Vue({
el:'#app',
data:{
m:1000,
km:1,
danjia:2,
num:10
},
watch:{
m:function(value){
this.km = parseInt(value)/1000;
},
km:function(value){
this.m=parseInt(value)*1000;
}
},
computed:{
total:function(){
return this.danjia*this.num;
}
}
})
</script>
</body>
</html>