海创软件组--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 实例生命周期

1. vue对象的生命周期
   1). 初始化显示
   • beforeCreate()
   • created()
   • beforeMount()
   • mounted()
     2). 更新状态
   • beforeUpdate()
   • updated()
     3). 销毁vue实例: vm.$destory()
   • beforeDestory()
   • destoryed()
2. 常用的生命周期方法
   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