欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

海创软件组--20200823--Vue基本知识点总结

程序员文章站 2024-03-25 22:42:16
...

计算属性和监视

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可以监视到数据改变
海创软件组--20200823--Vue基本知识点总结

vue组件间通信

子向父组件间通信
海创软件组--20200823--Vue基本知识点总结
海创软件组--20200823--Vue基本知识点总结
海创软件组--20200823--Vue基本知识点总结
消息的订阅与发布pubsub,任意组件中
海创软件组--20200823--Vue基本知识点总结
海创软件组--20200823--Vue基本知识点总结
海创软件组--20200823--Vue基本知识点总结
slot通讯-标签
父组件app.vue中
海创软件组--20200823--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> 

海创软件组--20200823--Vue基本知识点总结

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)

海创软件组--20200823--Vue基本知识点总结

   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