海创软件组--20200823--Vue基本知识点总结
计算属性和监视
computed里可有两个方法，get与set，一般我们在实现单向数据绑定的时候只使用get，例如
<div id="demo">
姓: <input type="text" placeholder="First Name" v-model="firstName">
<br>
名: <input type="text" placeholder="Last Name" v-model="lastName">
<br>
姓名 1(单向): <input type="text" placeholder="Full Name" v-model="fullName1">
<br>
姓名 2(单向): <input type="text" placeholder="Full Name" v-model="fullName2">
<br>
姓名 3(双向): <input type="text" placeholder="Full Name2" v-model="fullName3">
<br>
</div>
想要让fullName根据firstName与lastName的变化而变化，此时只需要监视firstName与lastName的变化，所以是单向数据绑定，使用get就可，一般只使用get的话不需要写get，直接写就可以
computed: {
fullName: function ()
{
return this.firstName + " " + this.lastName
}
但是如果想要让firstName与lastName根据fullName的变化而变化，此时就是双向数据了，需要使用get与set，set的function (value)的value是fullName3最新的值
fullName3: {
get: function () {
return this.firstName + " " + this.lastName
},
set: function (value) {
var names = value.split(' ') this.firstName = names[0] this.lastName = names[1]
} } },
watch的监视，可以传两个参数，一个是最新的一个是旧的，只传一个参数的时候就是最新值
watch: {
lastName: function (newVal, oldVal) {
this.fullName2 = this.firstName + ' ' + newVal
} }
Vue 实例生命周期
- vue对象的生命周期
1). 初始化显示- beforeCreate()
- created()
- beforeMount()
- mounted()
2). 更新状态 - beforeUpdate()
- updated()
3). 销毁vue实例: vm.$destory() - beforeDestory()
- destoryed()
- 常用的生命周期方法
created()/mounted(): 发送ajax请求, 启动定时器等异步任务
beforeDestory(): 做收尾工作, 如: 清除定时器
mounted()初始化显示之后立即调用，一次，只有beforeUpdate()和updated()会调用多次，其他都是只发生一次
数组更新检测
当你定义了一个数组，vue本身只是监视了persons的改变，没有监视数组内部数据的改变
data: {
persons: [
{name: 'Tom', age:18},
{name: 'Jack', age:17},
{name: 'Bob', age:19},
{name: 'Mary', age:16}
]
},
所以原本当 persons里面的数据发生改变的时候，vue是监视不到的，但是vue重写了数组中的一系列改变数组内部数据的方法（先调原生，更新界面），使用这些数组的方法时，vue可以监视到数据改变
vue组件间通信
子向父组件间通信
消息的订阅与发布pubsub，任意组件中
slot通讯-标签
父组件app.vue中
<child><div slot="xxx">xxx 对应的标签结构</div> <div slot="yyy">yyyy 对应的标签结构</div> </child>
子组件中
<slot name="xxx">不确定的标签结构 1</slot>
<div>组件确定的标签结构</div>
<slot name="yyy">不确定的标签结构 2</slot>
splice（可实现增删改）
//删除
this.persons.splice(index, 1)
//更改
this.persons.splice(index, 1, newP)
//增加
this.persons.splice(index, 0, newP)
过滤器filter
数组过滤器，
定义和用法
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。
语法
array.filter(function(currentValue,index,arr), thisValue)
let sunArr = [{
id: '1',
name: 'lee',
age: '20'
}, {
id: '2',
name: 'sun6sian',
age: '24'
}]
newArr = sunArr.filter((item, index, arr) => item.age > 18)
时间过滤器
1). 定义过滤器
Vue.filter(filterName, function(value[,arg1,arg2,...]){
// 进行一定的数据处理
return newValue
})
2). 使用过滤器
<div>{{myData | filterName}}</div>
<div>{{myData | filterName(arg)}}</div>
<div id="test">
<h2>显示格式化的日期时间</h2>
<p>{{time}}</p>
<p>最完整的: {{time | dateString}}</p>
//选择你想要的格式
<p>年月日: {{time | dateString('YYYY-MM-DD')}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script>
// 定义全局过滤器
Vue.filter('dateString', function (value, format='YYYY-MM-DD HH:mm:ss') {
console.log(value);
return moment(value).format(format);
})
new Vue({
el: '#test',
data: {
time: new Date()
},
mounted () {//初始化显示，一上来就开启
setInterval(() => {
this.time = new Date()
}, 1000)
}
})
</script>
find、filter、forEach、map
四个的语法都相同，value:必须，代表当前元素，其他四个参数都是可选，index代表当前索引值，arr代表当前的数组，thisValue代表传递给函数的值，一般用this值，如果这个参数为空，undefined会传递给this值
array.find/filter/forEach/map(function(value, index, arr),thisValue)
find
var arr = [1,2,3,4,5,6,7];
var ar = arr.find(function(value){
return value>5;
});
console.log(ar);//6
console.log(arr);//[1,2,3,4,5,6,7]
filter
var arr = [1,2,3,4,5,6,7];
var ar = arr.filter(function(elem){
return elem>5;
});
console.log(ar);//[6,7]
console.log(arr);//[1,2,3,4,5,6,7]
map()：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，map()方法按照原始数组元素顺序依次处理元素
var arr = [1,2,3,4,5,6,7];
var ar = arr.map(function(elem){
return elem*4;
});
console.log(ar);//[4, 8, 12, 16, 20, 24, 28]
console.log(arr);//[1,2,3,4,5,6,7]
forEach()
var arr = [1,2,3,4,5,6,7];
var sum = 0;
var ar = arr.forEach(function(elem){
sum+=elem*4;
});
console.log(ar);//forEach没有返回值undefined
console.log(arr);//[1,2,3,4,5,6,7]
console.log(sum);//112