转载自某大佬的笔记，大佬没发布过，所以没链接
1.计算属性和监听
1.计算属性
- 在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以
- 所有的计算属性都以函数的形式写在
Vue实例的computed选项内，最终返回计算后的结果
2.监听属性
- 通过Vue实例对象的$watch( )或watch配置来监视指定的属性
- 当属性变化时,回调函数自动调用，在函数内部进行计算
3.计算属性高级
- 通过getter/setter实现对属性数据的显示和监视
- 计算属性存在缓存，多次读取只执行一次getter计算
计算属性可以依赖其他计算属性，不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据。
<head>
<title></title>
<style>
#app{
width: 300px;
height: 300x;
margin: 50px auto;
}
</style>
</head>
<body>
<div id="app">
姓<input type="text" v-model="firstName"/><br />
名<input type="text" v-model="lastName"/><br />
姓名1(单向)<input type="text" v-model="allName1"/><br />
姓名2(单向)<input type="text" v-model="allName2"/><br />
姓名3(双向)<input type="text" v-model="allName3"/>
</div>
<script type="text/javascript" src="lib/vue.js"></script>
<script>
var vm = new Vue({
el : '#app',
data:{
firstName:'ya',
lastName:'yj',
allName2:'ya yj'
},
computed:{
// 方式一 直接把firstName和lastName的结果绑定在allName1的结果上面
allName1:function(){
return this.firstName+' '+this.lastName
},//方式三 计算属性高级 setter和getter
allName3:{
set:function(value){
let name=value.split(' ');
this.firstName=name[0];
this.lastName=name[name.length-1]
},
get:function(){
return this.firstName+' '+this.lastName;
}
}
},//方式二 使用监听属性
watch:{
firstName:function(newName,oldName){
this.allName2 = newName+' '+this.lastName
}
}
});
vm.$watch('lastName',function(newName,oldName){
this.allName2=this.firstName+' '+newName
})
</script>
</body>
2.class和style绑定
在应用界面中，某个(些)元素的样式是变化的。class/style绑定就是专门用来实现动态样式效果的技术
2.1 class绑定
1）:class=‘xxx’
2）表达式的字符串：‘classA’
3）表达式是对象：｛classA:isA,classB:isB｝
4） 表达式是数组：[‘classA’,‘classB’]
2.2 style绑定
1）:style="{color:activeColor,fontSize:fontSize+‘px’}"
2） 其中activeColor/fontSize是data属性
2.3 编码实现
<style>
.classA {
color: red;
}
.classB {
background: blue;
}
.classC {
font-size: 20px;
}
</style>
<div id="app">
<h2>1. class绑定： :class='xxx'</h2>
<p :class="a">表达式是字符串：'classA'</p>
<p :class="{classA:isA,classB:isB}">表达式是对象：{classA:isA,classB:isB}</p>
<p :class="['classA','classB']">表达式是数组：['classA','classB']</p>
<h2>2. style绑定</h2>
<p :style="{color,fontSize}">style="{color:activeColor,fontSize:fontSize+'px'}"</p>
<button @click="update">更新</button>
</div>
<script src="../lib/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
a: 'classA',
isA: true,
isB: false,
color: 'red',
fontSize: '20px',
}, methods: {
update: function () {
this.a = 'classC';
this.isA = false;
this.isB = true;
this.color = 'blue';
this.fontSize = '30px'
}
}
})
3.条件渲染
3.1 条件渲染指令
1） v-if、v-else-if与v-else
2）v-show
3.2 比较v-if 和v-show
1） 如果需要频繁切换v-show 较好
2） 当条件不成立时, v-if 的所有子节点不会解析(项目中使用)
3.3 编码实现
<div id="app">
<h2 v-if="ok">表白成功</h2>
<h2 v-else>表白失败</h2>
<h2 v-show="ok">求婚成功</h2>
<h2 v-show="!ok">求婚失败</h2>
<br>
<button @click="ok=!ok">切换</button>
</div>
<script src="../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok: false
}
})
</script>
4.列表渲染
4.1 指令
1）列表显示指令
数组：v-for/index
对象：v-for/key
2） 列表的更新显示
删除item
替换item
3） 列表的高级处理
列表过滤
列表排序
4.2 编码实现
<div id="app">
<h2>测试:v-for遍历数组</h2>
<ul>
<li v-for="(p,index) in persons" :key="index">
{{index}}----{{p.name}}----{{p.age}}
--
<button @click="deleteItem(index)">删除</button>
--
<button @click="updateItem(index,{name:'jack',age:15})">更新</button>
</li>
</ul>
<h2>测试：v-for 遍历对象</h2>
<ul>
<li v-for="(value,key) in persons[0]">
{{key}} : {{value}}
</li>
</ul>
</div>
<script src="../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
persons: [
{id: 1, name: 'Tom', age: 13},
{id: 2, name: 'Jack', age: 12},
{id: 3, name: 'Bob', age: 14}
]
}, methods: {
deleteItem(index) {
/* splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
注释：该方法会改变原始数组。
语法
arrayObject.splice(index,howmany,item1,.....,itemX)
index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX 可选。向数组添加的新项目。*/
this.persons.splice(index, 1)
},
updateItem(index,p){
// this.persons[index]=p; 页面不会更新
this.persons.splice(index,1,p)
}
}
})
</script>
4.3 附录
4.3.1 会改变原数组的方法
sort()
sort() 方法用于对数组的元素进行排序。
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
push()
定义和用法
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
语法
arrayObject.push(newelement1,newelement2,…,newelementX)
参数
newelement1 必需。要添加到数组的第一个元素。
newelement2 可选。要添加到数组的第二个元素。
newelementX 可选。可添加多个元素。
splice()
定义和用法
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
注释：该方法会改变原始数组。
语法
arrayObject.splice(index,howmany,item1,…,itemX)
参数
index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, …, itemX 可选。向数组添加的新项目。
返回值
Array 包含被删除项目的新数组，如果有的话。
说明
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
pop()
定义和用法
pop() 方法用于删除并返回数组的最后一个元素。
语法
arrayObject.pop()
返回值
arrayObject 的最后一个元素。
说明
pop() 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。
shift()
定义和用法
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
语法
arrayObject.shift()
返回值
数组原来的第一个元素的值。
说明
如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。请注意，该方法不创建新数组，而是直接修改原有的 arrayObject。
reverse()
定义和用法
reverse() 方法用于颠倒数组中元素的顺序。
语法
arrayObject.reverse()
提示和注释
注释：该方法会改变原来的数组，而不会创建新的数组。
unshift()
定义和用法
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
语法
arrayObject.unshift(newelement1,newelement2,…,newelementX)
参数
newelement1 必需。向数组添加的第一个元素。
newelement2 可选。向数组添加的第二个元素。
newelementX 可选。可添加若干个元素。
返回值
arrayObject 的新长度。
说明
unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。
请注意，unshift() 方法不创建新的创建，而是直接修改原有的数组。
4.3.1 不改变原数组的方法
filter()
Array.filter(function(currentValue, index, arr), thisValue)
其中，函数 function 为必须，数组中的每个元素都会执行这个函数。且如果返回值为 true，则该元素被保留；
函数的第一个参数 currentValue 也为必须，代表当前元素的值。
concat()
定义和用法
concat() 方法用于连接两个或多个数组。
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
语法
arrayObject.concat(arrayX,arrayX,…,arrayX)
参数
arrayX 必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。
返回值
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。
slice()
方法可从已有的数组中返回选定的元素。
语法
arrayObject.slice(start,end)
参数
start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
返回值
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
