window.onload=function(){
new Vue({
el:'#my',//2.0不允许挂载到html body元素上
data:{
msg:'Hello World',
name:'sonia',
html:'<span>123</span>'
},
methods: {
action: function () {
this.msg = "click";
}
}
})
}<style>
[v-loak]{
display:none;
}
</style>
<div id="my">
<!--另外一种方法加一个v-cloak-->
<div v-cloak>{{msg}}</div>
<!--解决{{}}闪烁的问题-->
<!--一个是文本，一个是html标签-->
<div v-text="msg"></div>
<div v-html="html">{{msg}}</div>
</div>
|
v-text v-html
类似于 inner html inner text
绑定对应的html 和 对应的text
html里可以包含标签
v-cloak；主要是用来解决浏览器闪烁的问题
还要配置对应的css,否则不生效
<style>
[v-cloak]{
display:none;
}
</style>
|
| 事件冒泡以及解决办法（点击事件发生在按钮上，按钮本身并无处理事件函数，则传播到父级去处理。） |
window.onload=function(){
new Vue({
el:"#my",
data:{
},
methods:{
show1(){
console.log("111");
},
show2(){
console.log("222");
},
show3:function(){
console.log("333");
}//依次输出 333 222 111
}
})
}<div id="my" @click="show1()">A1
<div @click="show2()">A2
<button @click="show3()">A3</button>
</div>
</div>
| jQuery的解决办法 |
show3:function(e){
console.log("333");
e.stopPropagation();
} |
<button @click="show3($event)">A3</button> |
| vue的解决办法 |
show3:function(){
console.log("333");
} |
<button @click.stop="show3()">A3</button>
| 取消默认的动作 |
<div>
<a href="http://www.baidu.com" @click="showPrevent()">1111</a>
<a href="http://www.baidu.com" @click="showPrevent()">2222</a>
</div>
| js方法 |
<a href="http://www.baidu.com" @click="showPrevent1($event)">1111</a> showPrevent1(e){
e.preventDefault();
} |
| vue的解决办法 |
<a href="http://www.baidu.com" @click.prevent="showPrevent()">2222</a> |
|
| 阻止事件冒泡和组织默认功能 |
<a href="http://www.baidu.com" @click.prevent.stop="showPrevent()">2222</a> <a href="http://www.baidu.com" @click.prevent.stop="showPrevent()">2222</a> |
|
| |
|
| 单次事件（无法阻止冒泡，只会执行一次，可以做签到功能） |
once(){
console.log("once");
}<div @click.once="once()">once</div> |
| 键盘事件（稍作了解） |
window.onload=function(){
new Vue({
el:"#my",
data:{
},
methods:{
key(){
console.log("aaa")
},
enter(){
console.log("enter")
},
getUp(){
console.log("getUp")
},
space(){
console.log("space")
},
keypress(){
console.log("keypress")
}
}
})
}<div id="my">
<!--按下任意键-->
<input @keydown="key()"/>11111
<!--按下回车键-->
<input @keydown.enter="enter()"/>enter
<!--按下向上键-->
<input @keydown.up="getUp()"/>getUp
<!--空格键按下之后上弹-->
<input @keyup.space="space()"/>space
<input @keypress="keypress()"/>keypress
</div> |
| 过滤器 |
保留两位小数 window.onload=function(){
new Vue({
el:"#my",
data:{
},
methods:{
},
filters:{
number:function(data,n){/*data代表传的值,n代表参数 内嵌过滤器*/
return data.toFixed(2);
}
}
})
}<div id="my">
<div>{{3.14159 | number()}}</div>
</div>
| 过滤器传参（处理数据的一个函数，大量的过滤器会使页面渲染的比较慢） |
number:function(data,n){/!*data代表传的值,n代表参数*!/
return data.toFixed(n);
}<div>{{3.14159 | number(2)}}</div><!--去小数点后两位--> |
| 大于10取当前的值，如果小于10 数值前+0 |
<div>{{11 | addZero()}}</div>外部过滤器，可全局使用
Vue.filter('addZero',function(data){
return data>10 ? data : "0"+data;
});内部过滤器，可以完全覆盖外部相同的过滤器，两个名称方法一样优先取内部过滤器 addZero:function(data){
return data>10 ? data : "0"+data;
} |
| 点击按钮，显示或隐藏 |
addZero:function(data){
return data>10 ? data : "0"+data;new Vue({
el:"#my",
data:{
msg:'hello',
flag:true
},
methods:{
click1:function(){
this.flag=!this.flag;/*取反*/
}
},
filters:{
show:function(data){//按钮变为显示或隐藏
if(data){
return "显示";
}else{
return "隐藏";
}
}
}
})
}}<button @click="click1()">{{flag | show()}}</button>
<ul v-if="!flag">
<li>122</li>
</ul>
| 将后台传过来的值再做优化 |
showName:function(data){
switch (data){
case 1:
return "连接";
case 2:
return "隐藏";
case 3:
return "断线";default:
return data; }}<ul v-if="!flag">
<li v-for="(item,index) in items">{{item.id | showName()}}</li>
</ul> |
| 时间戳 |
<p>{{curentTime | showTime()}}</p>
</div>data:{
msg:'hello',
flag:true,
items:[{id:1,name:"sonia"},{id:2,name:"sonia1"},{id:3,name:"sonia2"}],
curentTime:Date.now()
},showTime:function(data){
var d=new Date(data);
return d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
} |
|
|
|