- 1 什么是 Vue？
比JQuery用起来更加精简的前端框架
- 2 Vue 中的监听事件
- 在 js 里为 Vue 对象的数据设置为 clickNumber
- methods 新建 count 方法
- v-on:click 添加事件处理
- v-on 可以缩写为 @
- 事件修饰符 阻止冒泡 .stop， 点击事件添加 v-on:click.stop
- 事件修饰符 优先触发 .capture
- 事件修饰符 只有自己能触发，子元素无法触发.self
- 事件修饰符 只能提交一次 .once
- 事件修饰符 阻止提交 .prevent ?
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<div id="div1">
<div>一共点击了 {{clickNumber}}次</div>
<button v-on:click="count">点击</button>
</div>
<script>
new Vue({
el: '#div1',
data: {
clickNumber:0
},
methods:{
count: function(){
this.clickNumber++;
}
}
})
</script>
- 3 Vue 中的条件语句
- 同样要在js中设置数据
- methods 中添加方法
- 元素中 添加v-if 标签
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
<div id="div1">
<button v-on:click="toggle">切换隐藏显示</button>
<div v-if="show"> 默认这一条是看得见的</div>
</div>
<script>
new Vue({
el: '#div1',
data: {
show:true
},
methods:{
toggle: function(){
this.show=!this.show;
}
}
})
</script>
- v-for Vue循环语句
1 index用法 *** 通过如下方式可以获取遍历下标 <tr v-for="hero,index in heros">
data: {
heros:data
}
<tr v-for="hero in heros">
<td>{{hero.name}}</td>
<td>{{hero.hp}}</td>
</tr>
- 4 v-bind 做属性绑定
通过v-bind进行属性绑定
<a v-bind:href="page">http://Google.com</a>
简写 v-bind:href 可以简写成 :href
- 5 v-model 双向绑定
修饰符
.lazy 加上.lazy之后，相当于监听change操作，只有在失去焦点的时候，才会进行数据绑定了
.number
.trim trim 去掉前后的空白
<div id="div1">
hero name: <input v-model="name" >
<button @click="doClick" >提交数据</button>
</div>
<script>
new Vue({
el: '#div1',
data:{
name:"teemo"
},
methods:{
doClick:function(){
alert(this.name);
}
}
})
</script>
双向绑定是数据与视图的双向绑定，当 数据发生变化 视图也会跟着改变，传统的方式需要先获取标签再更改数据，是单向绑定。
- 6 computed计算属性
* 1 computed 和 methods 的区别
computed 是有缓存的， 这样如果是复杂计算，就会节约不少时间。 而methods每次都会调用
*2 也可以通过watch 监听属性来设置
- 7 自定义指令
像 v-if, v-bind, v-on 以外, 开发者还可以开发 自定义的指令1 .简单例子
2 .带参数的自定义指令
1. 使用Vue.directive 来自定义
2. 第一个参数就是 指令名称 xart
3. el 表示当前的html dom对象
4. 在方法体力就可以通过 innerHTML style.color 等方式操控当前元素了
Vue.directive('xart', function (el) {
el.innerHTML = el.innerHTML + ' ( x-art ) '
el.style.color = 'pink'
})
使用方式：<div v-xart> 好好学习，天天向上 </div>
v-xart=“xxx” 这个xxx。 此时xxx是一个json对象，所以就可以通过.text, .color取出对应的值出来。
Vue.directive('xart', function (el,binding) {
el.innerHTML = el.innerHTML + '( ' + binding.value.text + ' )'
el.style.color = binding.value.color
})
视图上用就传递个json 对象进去
<div v-xart="{color:'red',text:'best learning video'}"> 好好学习，天天向上 </div>
