初学Vue(三) -- 生命周期、过滤器、监听属性、计算属性
vue - 国人开发制作的
类似于 view 的发音
vue经过了几次大的版本波动
0.x 0.6版本
1.x 版本
2.x 版本 - 现在常用的
为什么要介绍版本改动呢，因为不同版本语法和用法有差别，用起来比较麻烦
react 因为版权原因，导致百度等企业转用vue，导致vue突然火起来，也有支持国人的成分，当然其中的也缺不了它的确好用。
完整版演示代码
正式部分
vue学习建议先学会js，json
有的人觉得vue或angular不够jquery方便，首先，vue和angular是数据驱动的，而jquery是事件驱动的，也就是说用jquery需要想着给赋予事件，而vue与angular只要想着数据怎么变化就行了。
vue1.0下载
vue2.0下载
vue使用
html部分：
//首先当然是引入vue.js文件
<script src="vue.js"></script>
//vue标准是要用两对花括号圈住数据名的
{{msg}}
js部分：
//使用vue要先new 一个vue对象出来传入json格式的数据
<script>
new Vue({
//作用域：el - element缩写
el:'body',
//输出的数据
data:{
msg:'hello vue!',
}
})
</script>{{}} -> 必须在作用域里面放入输出的模板，模板里面放入data里面你自己定义的变量
注意：只有ie8 以上的浏览器才能兼容vue
如何选取class或id为作用域
{{msg}}
<script>
new Vue({
//这里选区类与id是与jquery的方式是一样的，id的话就是#myDiv
el: '.myDiv',
data: {
msg:'hello vue!',
}
})
</script>
常用指令
类似于angular 的常用指令有 ng-show /ng-repeat，vue当然也有。
- v-show：类似于display，true就是显示false就是隐藏
<script>
//这里定义作用域是必须的，使用vue语句如果不定义作用域是不会起作用的
new Vue({
el:'body',
})
</script>
<script>
new Vue({
el:'body',
//也可以利用数据传输来使用，更加灵活
data:{
dis:false,
}
})
</script>- v-for：循环输出数组或json数据
{{i}}{{$index}}
{{i}}
{{key}}=>{{value}}
{{$key}}=>{{i}}
<script>
new Vue({
el:'body',
data:{
//这是个字符串数组
arr:['a','b','c'],
json:{
bill:18,
bill2:21,
bill3:24
}
}
})
</script>- v-for: {{index}} -> 索引值，{{key}} -> key值因为json是键值对，可以理解为数组的索引与值的关系，所以可以用不同方式访问。{{index}}可以进行计算 => {{index+10}} 从10开始计数
v-model：双向绑定 -- 数据和输出绑定
{{msg}}
<script>
new Vue({
el:'body',
data:{
msg:'',
}
})
</script>Vue事件书写区
<script>
new Vue({
el:'body',
data:{
dis:true,
},
//vue 事件区域，所有事件控制写在这里
methods:{
change:function() {
this.dis=!this.dis;
}
}
})
</script>- v-on有简写形式@ ,可以直接把v-on替换为@，@click='change'。
事件对象：event
- 查看事件对象这些演示里面的html部分关于body与html的样式设置是必须的，不然body与html会按内容的大小填充，而不是布满整个页面
html部分：
//这里是必须设置这个样式，不然body的大小是根据页面内容调整大小的
<script>
new Vue({
el:'body',
methods:{
//事件对象，如果传参只有一个，默认就是事件对象，如果有多个参数传入，那么事件对象就是$event
show:function(e){
console.log(e);
}
}
})
</script>- `@click="show"是可以传递参数给事件的，当它传递参数时，事件处理的形参不再默认为是时间对象，当我们传递参数给事件又想看事件对象时可以用$event
html部分：
js部分：
<script>
new Vue({
el:'body',
methods:{
show:function(e,$event){
console.log(e,event);
}
}
})
</script>事件冒泡：事件冒泡的三种阻止方法
- 先来看下事件冒泡没有阻止的情况这些演示里面的html部分关于body与html的样式设置是必须的，不然body与html会按内容的大小填充，而不是布满整个页面
html部分：
js部分：
<script>
new Vue({
el:'body',
methods:{
myDiv:function() {
alert('i am div');
},
myBody:function(event){
alert('i am body');
}
}
})
</script>- event.cancelBubble=true;
html部分：
js部分：
<script>
new Vue({
el:'body',
methods:{
myDiv:function() {
event.cancelBubble=true;
alert('i am div');
},
myBody:function(event){
alert('i am body');
}
}
})
</script>- event.stopProgation();
html部分：
js部分：
<script>
new Vue({
el:'body',
methods:{
myDiv:function() {
event.stopProgation();
alert('i am div');
},
myBody:function(event){
alert('i am body');
}
}
})
</script>- 直接在click后接.stop其中，上面两个event都是原生方法，所以虽然能用，但是还是不够方便，所以这里使用vue方法来
html部分：
js部分：
<script>
new Vue({
el:'body',
methods:{
myDiv:function() {
alert('i am div');
},
myBody:function(event){
alert('i am body');
}
}
})
</script>阻止默认事件 -- 两种默认事件阻止方式
- event.preventDefault();这个是原生js方法，能用但是也不够vue方法方便
html部分：
js部分：
<script>
new Vue({
el:'body',
methods:{
myBody:function(){
event.preventDefault();
alert('我右键了');
}
}
})
</script>- @click.prevent="";
html部分：
js部分：
<script>
new Vue({
el:'body',
methods:{
myBody:function(){
alert('我右键了');
}
}
})
</script>键盘事件 -- 键盘监控事件利用keydown/up来监控用户按下了什么按键
- 键盘监控事件
html部分：
js部分：
<script>
new Vue({
el:'body',
methods:{
mybody:function(){
alert('我按键盘了');
}
}
})
</script>- event.keyCode监控用户按键的ASCII码，可以通过查看keyCode来赋予不同按键不同事件，例如通过console.log(event.keyCode);可以看到按键A的键值是65，那么我们可以设置只有当按下A键时才显示的事件@keydown.65等效于if(e.keyCode==65)
html部分：
js部分：
<script>
new Vue({
el:'body',
methods:{
mybody:function(){
alert('我按了A键');
}
}
})
</script>- 可以组合键使用
html部分：
js部分：
<script>
new Vue({
el:'body',
methods:{
mybody:function(){
alert('我按了abc键');
}
}
})
</script>