本教程分为三部分 ： 基础 进阶 实战 ，深入浅出Vue.js
基础篇持续 更新中
------ 列表渲染指令v-for
用法: 当需要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用到列表
渲染指令 v-for。
两种使用场景：
- 遍历多个对象
- 遍历一个对象的多个属性
举个栗子：
<div id="app">
v-for的用法： v-for一定是写在要遍历的元素上，v-for后接等号，类似于item in items<br>
<br> (1)遍历多个对象：一定是遍历的数组
<br> 学好Vuejs的方法是：
<ul>
<li v-for="vueMth in VueMethods">{{vueMth.name}}</li>
</ul>
<!-- 带索引的写法 -->
<hr> 带索引的写法 :括号的第一个变量是item ，第二个代表index
<ul>
<li v-for="(vueMth,index) in VueMethods ">{{index}}------{{vueMth.name}}</li>
</ul>
<hr><br> (2).遍历一个对象的多个属性 ：<br>
<span v-for='value in nvshen'> {{value}} </span>
<hr> 拿到 value ，key index 的写法 v-k-i ----外开 <br>
<div v-for="(value ,key,index) in nvshen">
第{{index}}个女神：----键是{{key}}-----{{value}}
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
//每个对象对应一个li 数组
VueMethods: [{
name: '多思考'
}, {
name: '多练习'
}, {
name: '听张季邪吹牛逼'
}],
nvshen: {
girll: '林青霞',
girl2: '马伊琍',
girl3: '老崔'
}
}
})
</script>
------- 数组更新，过滤与排序
改变数组的一系列方法：
• push() 在末尾添加元素
• pop() 将数组的最后一个元素移除
• shift() 删除数组的第一个元素
• unshift（）：在数组的第一个元素位置添加一个元素
•
splice()：可以添加或者删除函数—返回删除的元素
三个参数：
* 第一个参数 表示开始操作的位置
* 第二个参数表示：要操作的长度
* 第三个为可选参数：
image.png
• sort（）：排序
• reverse() 翻转数组
栗子：
<div id="app">
<div v-for="state in arr">{{state}}</div>
<button @click="stoArr">点我排序</button>
<button @click="reserveArr">点我翻转</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
arr: ['bookaaaaaa', 'shenss', 'laocuia']
},
methods: {
// 利用sort方法排序
stoArr: function() {
this.arr.sort(function(a, b) {
//数组的长度从小到大排序
return a.length - b.length;
})
},
//直接调用翻转数组
reserveArr: function() {
this.arr.reverse()
}
},
})
</script>
注意：两个数组变动vue检测不到:
- 改变数组的指定项
- 改变数组长度过滤
：filter
改变指定项：
Vue.set(app.arr,1,”car”);-
app.arr.splice(1)： 改变数组长度
解决方法：
1. set
2. splice
栗子：
<div id="app">
<button @click="changeone">改变数组的指定项</button>
<hr><br>
<button @click="changeArrlength">改变数组的长度</button>
<hr><br>
<!-- 过滤 -->需求 返回字符串中含有 oo 的项：<br> {{matChoo}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
arr: ['bookaaaaaa', 'shenss', 'laoocuia']
},
computed: {
matChoo: function() {
// 参数代表过滤的每一项
return this.arr.filter(function(book) {
return book.match(/oo/);
})
}
},
// 改变数组的指定项
changeone: function() {
this.arr[0] = 'call'
},
// 改变数组的长度
changeArrlength: function() {
this.arr.length = 1
}
},
})
</script>
------- 方法和事件
[object MouseEvent]
基本用法
v-on绑定的事件类似于原生 的onclick等写法
<div id="app">
点击次数： {{count}}
<br>
<!-- 如果方法中带有参数，但是你没有加括号， ------handel+()--------默认传原生事件对象event-->
<button @click="handel()">点我加1</button>
<button @click="handel(10)">点我加10</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
count: 0
},
methods: {
handel: function(count) {
// console.log(count)
count = count || 1;
this.count += count;
}
},
})
</script>
如果方法中带有参数，但是你没有加括号，默认传原生事件对象event
修饰符
在vue中传入event对象用 $event
向上冒泡
stop:阻止单击事件向上冒泡
prevent::提交事件并且不重载页面
self:只是作用在元素本身而非子元素的时候调用
once: 只执行一次的方法
可以监听键盘事件：
<input @keyup.13 ="submitMe">——指定的keyCode
vueJS为我们提供了：已下简写方式.......
.enter
.tab
.delete
栗子：
<div id="app">
stop用法：阻止单击事件向上冒泡
<div @click='divClick' style='height:100px;width:100px;background-color: aquamarine;'>
<button @click.stop="butClick">点我</button>
</div>
<hr><br> self用法：只是作用在元素本身而非子元素的时候调用
<div @click.self='divClick' style='height:100px;width:100px;background-color: aquamarine;'>
<button @click="butClick">点我</button>
</div>
<hr><br> prevent用法：提交事件并且不重载页面
<form action="" @submit.prevent='hangle'>
<button type="submit">提交表单</button>
</form>
once用法：只执行一次的方法
<hr><br>
<button @click='onceMethod'>执行多次</button>
<button @click.once='onceMethod'>执行1次</button>
<hr><br> 可以监听键盘事件：
<input @keyup.13='submitMe'><br><br> 也可以@keyup.enter: <br>
<input @keyup.enter='submitMe'>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {},
methods: {
divClick: function() {
alert('div被人点击l')
},
butClick: function() {
alert('btn被人点击l')
},
hangle: function() {
alert('我不重载了，页面也不刷新了')
},
onceMethod: function() {
alert('执行多少次了')
},
submitMe() {
alert('您按下了enter键')
}
},
})
</script>
