vue数据属性基本操作
事件及methods
<!--
事件的基本使用：
1.使用v-on:xxx 或者 @xxx 绑定事件，其中xxx是事件名
2.事件的回调需要配置在methods对象中，最终会在vm上；
3.methods中配置的函数，不要用箭头函数;否则this就不是vm了；
4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象；
5.@click='demo' 和@click='demo($event)'效果一致，但后者可以传其他参数，@click='demo($event，name)',且name对应是vue实例中的data；
-->
事件修饰符
<!--
vue中的事件修饰符：
1.prevent:阻止默认事件（常用）
2.stop:阻止事件冒泡（常用）
3.once:事件只触发一次（常用）
4.captrue:使用事件的捕获模式；
5.self:只有event.target是当前操作的元素时才触发事件；
6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕；
-->
<a href="http://www.baidu.com" @click.prevent="showinfo222($event)">baidu</a>
<!-- 阻止事件冒泡（常用） -->
<div class="app" @click="showinfo333($event)"><button type="button" @click.stop="showinfo333($event)">点击我不使用stop我会弹窗2次</button></div>
<!-- 事件只触发一次（常用） -->
<button type="button" @click.once="showinfo444($event)">点击我只会弹窗1次</button>
键盘事件
<!--1. Vue中常用的按钮别名：
回车 =》enter
删除 =》delete
退出 =》esc
控股 =》space
换行 =》tab
上 =》 up
下 =》down
左 =》left
右 =》right
2.其他就不说了
-->
<input type="text" name="test" id="test" placeholder="按下回车，提示已输入的内容" @keyup.enter="showinfo($event)"/>
计算属性：computed
<!--
计算属性：
1.定义：要用的属性不存在，要通过已有属性计算得来
2.原理：底层借助了Object.defineproperty方法提供的getter和setter
-->
// computed:{
// fullName:{
// //get在什么时候被调用？1.初次读取fullname时；2.所依赖的数据发生变化时；
// get(){
// return this.firstname+this.lastname
// }
// }
// },
//简写:只可有get，有set时不可使用简写
computed:{
fullName(){
return this.firstname+this.lastname
}
}
监视属性：watch
<!--
监视属性watch:
1.当被监视的属性变化时，回调函数自动调用，进行相关操作
2.监视的属性必须存在，才能进行监视
3.监视的两种写法：
a.new Vue时传入watch配置
b.通过vm.$watch监视
-->
watch:{
immediate:true,//当初始化时，让handler调用一下
isHot:{
//当isHot发生改变时，就会自动调用handler函数,而且可以获取变化前的值newValue，变化后的值,oldValue；
handler(newValue,oldValue){
if (newValue) {
this.info = "炎热"
} else{
this.info = "凉爽"
}
}
}
}
监视属性：watch、深度监视：deep:true
watch:{
immediate:true,//当初始化时，让handler调用一下
isHot:{
//当isHot发生改变时，就会自动调用handler函数,而且可以获取变化前的值newValue，变化后的值,oldValue；
handler(newValue,oldValue){
if (newValue) {
this.info = "炎热"
} else{
this.info = "凉爽"
}
}
},
shengdu:{
deep:true,//这样就可以监视到多层数据变化
handler(newValue,oldValue){
console.log(newValue,oldValue)
}
}
}
条件渲染：v-if / v-show
<!--
v-show可以做条件渲染
v-if也可条件渲染
1.v-if :
写法：（1）v-if="表达式"
（2）v-else-if="表达式"
（3）v-else="表达式"
适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意：v-if可以和v-else-if\v-else一起使用，但要求结构不可被"打断"
2.v-show
写法：使用于频率较高的场景
不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注：使用v-if时，可能无法获取到元素，而v-show一定可以获取到
-->
列表过滤、排序–等：总结
<!--
Vue监视数据的原理：
1.vue会监视data中所有层次的数据
2.如何监测对象中的数据？
通过setter实现监视，且要在new vue时就传入要监测的数据
（1）对象中后追加的属性，vue默认不做响应式处理
（2）如需给后添加的属性做响应式，请使用如下api:
vue.set(target,propertyName/index,value)或
vm.$set(target,propertyName/index,value)
3.如何监视数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
（1）调用原生对应的方法对数组进行更新
（2）重新解析模板，进而更新页面
4.在vue修改数组中的某个元素一定要用如下方法：
（1）使用这些api:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
(2)Vue.set()或者vm.$set()
特别注意：Vue.set()和vm.$set()不能给vm或者vm的根数据对象添加属性！！！
-->
排序+过滤：实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>排序</title>
<script src="../status/js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="keyword" placeholder="输入关键字"/>
<button type="button" @click="sorttype =2">年龄升序</button>
<button type="button" @click="sorttype =1 ">年龄降序</button>
<button type="button" @click="sorttype =0">原</button>
<ul>
<li v-for="p in pers" :key="p.id">{{p.name}}-------{{p.age}}---{{p.sex}}</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
data:function(){
return{
keyword:"",
sorttype:0,//0原顺序1降序2升序
persons:[
{id:'0001',name:'马冬梅',age:18,sex:'女'},
{id:'0002',name:'周冬雨',age:22,sex:'女'},
{id:'0003',name:'周杰伦',age:19,sex:'男'},
{id:'0004',name:'温兆伦',age:44,sex:'男'}
]
}
},
computed:{
pers(){
const arr = this.persons.filter((p)=>{
return p.name.indexOf(this.keyword)!==-1
})
//是否排序
if(this.sorttype){
arr.sort((p1,p2)=>{
return this.sorttype === 1? p2.age-p1.age : p1.age-p2.age
})
}
return arr
}
}
})
vm.$mount('#app')
</script>
</body>
</html>
各种实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>总结：数据监测</title>
<script src="../status/js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!--
Vue监视数据的原理：
1.vue会监视data中所有层次的数据
2.如何监测对象中的数据？
通过setter实现监视，且要在new vue时就传入要监测的数据
（1）对象中后追加的属性，vue默认不做响应式处理
（2）如需给后添加的属性做响应式，请使用如下api:
vue.set(target,propertyName/index,value)或
vm.$set(target,propertyName/index,value)
3.如何监视数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
（1）调用原生对应的方法对数组进行更新
（2）重新解析模板，进而更新页面
4.在vue修改数组中的某个元素一定要用如下方法：
（1）使用这些api:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
(2)Vue.set()或者vm.$set()
特别注意：Vue.set()和vm.$set()不能给vm或者vm的根数据对象添加属性！！！
-->
<h1>学生信息</h1>
<hr >
<button type="button" @click="student.age++"> 年龄+1岁</button>
<button type="button" @click="addsex">添加性别属性，默认值：男</button>
<button type="button" @click="updatesex" v-if="student.sex">修改性别</button>
<button type="button" @click="addFriend">在列表首位添加一个朋友</button>
<button type="button" @click="updatefirstfriendname">修改第一个朋友的名字为：张三</button>
<button type="button" @click="addhobby">添加一个爱好</button>
<button type="button" @click="updatehobby">修改第一个爱好为：开车</button>
<button type="button" @click="removesmoke('抽烟')">过滤爱好为：抽烟</button>
<hr >
<h3>姓名：{{student.name}}</h3>
<h3>年龄：{{student.age}}</h3>
<h3 v-if="student.sex">性别：{{student.sex}}</h3>
<h3>爱好：</h3>
<ul>
<li v-for="(h,i) in student.hobby" :key="i">{{h}}</li>
</ul>
<h3>朋友们</h3>
<ul>
<li v-for="(f,i) in student.friends" :key="i">{{f.name}}----{{f.age}}</li>
</ul>
</div>
<script type="text/javascript">
const vm = new Vue({
data:function(){
return{
student:{
name:'tom',
age:18,
hobby:['抽烟','喝酒','烫头'],
friends:[
{name:'jerry',age:35},
{name:'tony',age:36}
]
}
}
},
methods:{
addsex:function(){
Vue.set(this.student,'sex','男')
},
updatesex:function(){
const s = this.student.sex ==='男'? '女':'男'
Vue.set(this.student,'sex',s)
},
addFriend:function(){
this.student.friends.unshift({name:'jack',age:69})
},
updatefirstfriendname:function(){
this.student.friends[0].name = '张三'
},
addhobby:function(){
this.student.hobby.push('学习')
},
updatehobby:function(){
this.$set(this.student.hobby,'0','开车')
//this.student.hobby.splice(0,1,'开车')//从第一个开始删除1个，并将其替换为开车
},
removesmoke:function(f){
this.student.hobby = this.student.hobby.filter((h)=>{
return h!== f
})
}
}
})
vm.$mount("#app")
</script>
</body>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
