1.插值
代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
<style>
.a{
color: yellow;
}
</style>
</head>
<body>
<div id="app">
<p>文本</p>
{
{msg}}
<p>html页面转义</p>
<div v-html="htmlstr"></div>
<p>v-bind 属性绑定</p>
<input :value="valuestr" />
<p>vue中可以对变量进行二次处理</p>
{
{str.substring(0,4)}} <br />
{
{num + 4}}<br />
{
{ok ? '1':'0'}}<br />
<span :id="idstr+'1'">书籍信息</span>
<p>class绑定</p>
<span :class="classStr">文本内容</span>
<p>style绑定</p>
<span :style="styleStr">文本内容</span>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return{
msg:'hello vue',
htmlstr:'<span style="color:red;">文本内容</span>',
valuestr:'vue值',
str:'hello world',
num:6,
ok:false,
idstr:'book_',
classStr:'a',
styleStr:'color:blue;'
}
}
})
</script>
</html>
2.指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</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>
请输入结果:<input v-model="showflag" />
<span v-show="showflag">show展示与否</span>
<span v-if="showflag">if展示与否</span>
<p>v-for</p>
<select >
<option v-for="l in likes" :value="l.id">{
{l.name}}</option>
</select>
<br />
<div v-for="l in likes">
<input type="checkbox" :value="l.id"/>{
{l.name}}
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return{
score:0,
showflag:false,
likes:[
{id:1,name:'打游戏'},
{id:2,name:'篮球'},
{id:3,name:'桌球'},
{id:4,name:'乒乓球'}
]
}
}
})
</script>
</html>
3.过滤器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<!-- {
{msg|substring}} -->
{
{msg|strSplit|strSplit2}}
{
{msg|strSplit3(2,5)}}
</div>
</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(0,5);
})
Vue.filter('strSplit3',function(value,a,b){
console.log(value);
return value.substring(a,b);
})
new Vue({
el:'#app',
data(){
return{
msg:'hellovue'
}
}
})
</script>
</html>
4.计算属性与监听属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</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 />
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return{
x:0,
y:0,
km:0,
m:0
}
},computed:{
// 计算
addFlag:function(){
return parseInt(this.x)+parseInt(this.y)
}
},
watch:{
km:function(v){
this.m=parseInt(v)*1000
},
m:function(v){
this.km=parseInt(v)/1000;
}
}
})
</script>
</html>
5.购物车案例
<!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: 600px;height: 300px;">
<tr>
<td>物品</td>
<td>单价</td>
<td>
数量
</td>
<td>
小计
</td>
</tr>
<tr>
<td>帽子</td>
<td>{
{maoziDanjia}}</td>
<td>
<input v-model="maozi" />
</td>
<td>
{
{maoziTotal}}
</td>
</tr>
<tr>
<td>衣服</td>
<td>{
{yifuDanjia}}</td>
<td>
<input v-model="yifu" />
</td>
<td>
{
{yifuTotal}}
</td>
</tr>
<tr>
<td>裤子</td>
<td>{
{kuziDanjia}}</td>
<td>
<input v-model="kuzi" />
</td>
<td>
{
{kuziTotal}}
</td>
</tr>
<tr>
<td>总价</td>
<td colspan="3">{
{total}}</td>
</tr>
</table>
<p>监听属性</p>
千米：<input v-model="km" />
米：<input v-model="m" />
</div>
</body>
<script type="text/javascript">
// 全局过滤器
Vue.filter('all', function(value) {
return value.substring(1, 4);
});
// 绑定边界 ES6具体体现
new Vue({
el: '#app',
data() {
return {
maoziDanjia:10,
yifuDanjia:30,
kuziDanjia:20,
maozi:1,
yifu:1,
kuzi:1,
km:2,
m:2000
};
},
methods: {
handle() {
alert("触发事件");
}
},
computed:{
maoziTotal(){
return this.maoziDanjia*this.maozi;
},
yifuTotal(){
return this.yifuDanjia*this.yifu;
},
kuziTotal(){
return this.kuziDanjia*this.kuzi;
},
total(){
return this.maoziTotal+this.yifuTotal+this.kuziTotal;
}
},
watch:{
// v指的是m变量
m: function(v){
this.km = parseInt(v)/1000;
},
// v指的是km变量
km: function(v){
this.m = parseInt(v)*1000;
}
}
})
</script>
</html>