版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/weixin_39532362/article/details/78939227
vue常用汇总
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
<style type="text/css">
.red{
width:100px;
height:100px;
background:red;
}
.green{
background:green;
}
.blue{
background:blue;
}
</style>
</head>
<body>
<ol id="app1">
<!-- Mustache-->
<li>
<p><h2>[Mustache]:</h2></p>
<p>响应式：{{message}}</p>
<p v-once>非响应式：{{message}}</p>
</li>
<hr>
<!-- v-html -->
<li>
<p><h2>[v-html]:</h2></p>
<p v-html="h5Content"></p>
</li>
<hr>
<!-- v-model -->
<li>
<h2>[v-model]:</h2>
<form>
<!-- v-model单向dom -->
<div>
<p><b>v-model单向dom</b></p>
<p><input v-model="inputText"></p>
<input type="text" v-model="inputMess" placeholder="单行文本"><br><br>
<textarea v-model="textareaMess" placeholder="多行文本"></textarea>
</div>
<p>-----------</p>
<!-- checkbox单选 -->
<div>
<p><b>checkbox单选</b></p>
<input type="checkbox" name="cb" v-model="checkboxMess"><!-- 单选value是bool -->
<label for="cb">勾选</label><br>
<span>是否勾选:{{checkboxMess}}</span><br>
</div>
<p>-----------</p>
<!-- checkbox多选 -->
<div>
<p><b>checkbox多选</b></p>
<input type="checkbox" name="A" value='A' v-model="checkboxMess2">
<label for="A">A</label><br>
<input type="checkbox" name="B" value='B' v-model="checkboxMess2">
<label for="B">B</label><br>
<input type="checkbox" name="C" value='C' v-model="checkboxMess2">
<label for="C">C</label><br>
<span>选择了:{{checkboxMess2}}</span><br>
</div>
<p>-----------</p>
<!-- radio单选 -->
<div>
<p><b>radio单选</b></p>
<input type="radio" name="A" value="A" v-model="radioMess">
<label for="A">A</label><br>
<input type="radio" name="B" value="B" v-model="radioMess">
<label for="B">B</label><br>
<span>选择了:{{radioMess}}</span><br>
</div>
<p>-----------</p>
<!-- select单选 -->
<div>
<p><b>selectd单选</b></p>
<select v-model="selectMess">
<option value="">请选择</option>
<option value="A">A</option>
<option value="B">B</option>
</select><br>
<span>选择了:{{selectMess}}</span>
</div>
</form>
</li>
<hr>
<!-- v-if -->
<li>
<p><h2>[v-if]:</h2></p>
<ul>
<!-- v-if -->
<li>
<b>[v-if]:</b>
<span v-if="seen">显示</span>
</li>
<!-- v-else-if -->
<li >
<b>[v-else-if]:</b>
<span v-if="type==='A'">A</span>
<span v-else-if="type==='B'">B</span>
<span v-else="type==='C'">C</span>
</li>
<!-- v-show -->
<li>
<b>[v-show]:</b>
<span v-show=true>显示</span>
</li>
</ul>
</li>
<hr>
<!-- v-for -->
<li>
<p><h2>[v-for]:</h2></p>
<ul>
<li v-for="(site1,key,index) in sites1">
{{index}}.{{key}}.{{site1.name}}
</li>
</ul>
<br>
<ul>
<template v-for="(site2,key,index) in sites2">
<li>{{index}}.{{key}}.{{site2}}</li>
<li>------</li>
</template>
</ul>
<br>
<ul>
<li v-for="n in 5">
{{n}}
</li>
</ul>
</li>
<hr>
<!-- v-on: -->
<li>
<h2>[v-on:]:</h2>
<ul>
<!-- v-on -->
<li>
<p><b>[v-on:]:</b></p>
<button v-on:click="fun1">click me</button>
<button @click="fun1">click me</button>
</li>
<!-- v-on:click.prevent -->
<li>
<p><b>[v-on:click.prevent]:</b></p>
<button v-on:click.prevent="fun1">click me</button>
</li>
<!-- keyup.alt.67 -->
<li>
<p><b>[keyup.alt.67]:</b></p>
<button @keyup.alt.67="showBox">keyup</button>
</li>
<!-- 其他 -->
<li>
<p><b>其他</b></p>
<button v-on:click="counter+=1">直接js表达式</button>
<button @click="showBox">函数名字</button>
<button @click="showBox2('have:')">有参事件函数</button>
</li>
</ul>
</li>
<hr>
<!-- v-bind: -->
<li>
<h2>[v-bind:]:</h2>
<ul>
<!-- v-bind -->
<li>
<p><b>v-bind</b></p>
<b>[v-bind:id]:</b> <span v-bind:id="'list-'+1">thisId='list-1'</span><br>
<b>[:id]:</b> <span :id="idMess+1">thisId='myId1'</span><br>
<b>[v-bind:href]:</b> <a v-bind:href="url">baidu</a><br>
</li>
<!-- v-bind:style -->
<li>
<p><b>[v-bind:style]:</b></p>
<div v-bind:style="{color:setCorlor,fontSize:fontSize}">123</div>
</li>
<!-- v-bind:class -->
<li>
<p><b>[v-bind:class]:</b></p>
<div class=red v-bind:class="{green:isGreen,'blue':isBlue}"></div><br>
<div v-bind:class="classObject"></div><br>
<div v-bind:class="classArray"></div>
</li>
</ul>
</li>
<hr>
<!-- filters -->
<li>
<p><h2>[filters]:</h2></p>
<p>{{message|fun2|fun3}}</p>
</li>
<hr>
<!-- computed -->
<li>
<p><h2>[computed]:</h2></p>
<p>元数据：{{message}}</p>
<p>methods不缓存：{{reversedMess1()}}</p>
<p>computed缓存：{{operation}}</p>
</li>
<hr>
</ol>
<div id="app2">
</div>
<script type="text/javascript">
//app1
var vm1=new Vue({
created:function(){console.log("i am creator")},
el:'#app1',
data:{
message:'hello vue!',
h5Content:'<i>xieti</i>',
idMess:'myId',
inputText:'inputText',
class1OfSet:true,
idNUm:1,
name:'baidu',
url:'www.baidu.com',
seen:true,
type:'B',
sites1:[
{name:'zzz'},
{name:'bbb'},
{name:'ccc'}
],
sites2:{
name:'zzz',
age:20,
work:'doctor'
},
isGreen:true,
isBlue:true,
classRed:'red',
classGreen:'',
classBlue:'',
setCorlor:'green',
fontSize:30+'px',
counter:0,
inputMess:'单行的',
textareaMess:'多行的',
checkboxMess:false,
checkboxMess2:[],
radioMess:'',
selectMess:''
},
methods:{
fun1:function(){alert('i am fun1');},
reversedMess1:function(){return this.message.split('').reverse().join('');},//无缓存
showBox:function(event){alert(this.counter);if(event){alert(event.target.tagName);}},
showBox2:function(newValue){alert(newValue+this.counter);}
},
filters:{
fun2:function(value){if(!value)return '';value+=" +fun2";return value;},
fun3:function(value){if(!value)return '';value+=" +fun3";return value;}
},
computed:{
operation:{
get:function(){return this.message.split('').reverse().join('');},//有缓存
set:function(newValue){
var names=newValue.split(' ');
this.name=names[0];
this.url=names[names.length-1];
}
},
classObject:{
get:function(){
return {
red:true,
green:this.isGreen,
'blue':false
};
}
},
classArray:{
get:function(){
return [
this.classRed,
this.classGreen,
this.classBlue
];
}
}
}
});
//main1
vm1.operation="cainiao www.cainiao.com";
console.log('name:'+vm1.name);
console.log('url:'+vm1.url);
vm1.newAttribute=10;//不是响应式，只有当实例创建是data中存在的属性才是响应式
//app2
var data={a:1};
var vm2=new Vue({
el:'#app2',
data:data
});
//main2
console.log(vm2.a===data.a);//true
vm2.a=2;console.log(vm2.a===data.a);//true
data.a=3;console.log(vm2.a===data.a);//true
console.log(vm2.$el===document.getElementById('app2'));//true
console.log(vm2.$data===data);//true
</script>
</body>
</html>