<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<style>
.color{
color: red;
}
.style{
font-style: italic;
}
.size{
font-size: 20px;
}
.weight{
font-weight: bold;
}
</style>
</head>
<body>
<div id="app">
<!-- v-clock 解决闪烁 -->
<div v-clock>{{clockData}}</div>
<div v-text="msg">111</div>
<div v-html="msg">111</div>
<!-- v-bind 绑定属性，缩写: -->
<p :title="titleMsg || 'this is my title'">show me</p>
<!-- v-on 绑定事件，缩写@ -->
<button @click="clickTest">click me</button>
<!-- 事件修饰符 -->
<!-- .stop 阻止冒泡 -->
<div @click="clickFa">
<div @click.stop="clickTest">
<button @click="clickChild">stop child</button>
<p>father2</p>
</div>
<p>father1</p>
</div>
<!-- .prevent 阻止默认行为 -->
<a href="http://www.baidu.com" @click.prevent="clickTest">aaa</a>
<!-- .capture 实现捕获 -->
<div @click.capture="clickFa">
<button @click="clickChild">prevent child</button>
<p>father</p>
</div>
<!-- .self 只点击当前元素才触发
并不会对冒泡有实质影响，只是加了.self的那一层只有点击自己时才会触发
-->
<div @click="clickFa">
<div @click.self="clickTest">
<button @click="clickChild">self child</button>
<p>father2</p>
</div>
<p>father1</p>
</div>
<!-- .once 只触发一次 -->
<a href="http://www.baidu.com" @click.prevent.once="clickTest">aaaOnce</a><br />
<!-- v-model 双向绑定 -->
<!-- 不是双向数据流，只是语法糖 -->
单向绑定<input type="text" :value="inpMsg">
双向绑定<input type="text" v-model="inpMsg">
<!-- class -->
<p :class="['color','size',{'weight':flag}]">show class</p>
<p :class="classObj">show class</p>
<!-- style -->
<p :style="styleObj1">show style</p>
<p :style="[styleObj1,styleObj2]">show style</p>
<!-- v-for -->
<ul>
<li v-for="(item,index) in list">{{index}} - {{item}}</li>
<li v-for="(val,key,i) in obj">{{key}} : {{val}} -- {{i}}</li>
<li v-for="count in 4">{{count}}</li>
</ul>
<!-- key 唯一标识符 -->
<p>
<span>val</span>
<input type="text" v-model="name">
</p>
<button @click="add">ADD</button>
<ul>
<li v-for="item in valList" :key="item.id"><input type="checkbox">{{item.id}} - {{item.name}}</li>
</ul>
<!-- v-if(会操作dom)/v-show -->
<button @click="change">change flag</button>
<p v-show="flag">v-show</p>
<p v-if="flag">v-if</p>
<!-- computed -->
<p>{{fulldata}}</p>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
clockData:'123333',
msg:'<h1>222</h1>',
titleMsg:'title',
inpMsg:'input value',
flag:false,
classObj:{color:true,style:true,size:true,weight:true},
styleObj1:{color:'red','font-size':'20px'},
styleObj2:{'font-weight':'bold'},
list:[2,4,6,8,10],
obj:{a:1,b:2,c:3},
id:3,
name:'',
valList:[
{id:1,name:'qq'},
{id:2,name:'cc'},
{id:3,name:'sxq'},
]
},
methods: {
clickTest(){console.log('click')},
clickFa(){console.log('Fa')},
clickChild(){console.log('child')},
add(){this.valList.unshift({id:++this.id,name:this.name})},
change(){this.flag=!this.flag}
},
// 1. 一对多
watch:{
flag:{ // 此写法可以在渲染完成后，就触发一次
handler(newData,oldData){
console.log(newData,oldData,'newData,oldData--')
},
immediate:true
},
// 或
// 'flag'(newData,oldData){
// console.log(newData,oldData,'newData,oldData--')
// }
},
// 1. 表达更清晰
// 2. 缓存
// 3. 多对一
computed:{
'fulldata'(){
return this.id + '---' + this.name;
}
}
})
</script>
</body>
</html>史潇倩
133 声望12 粉丝
« 上一篇
es6 sort 排序下一篇 »
vue组件传值
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。