Vue2.0一些知识点(下) | 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第7天

watch 侦听器

在开发过程中监视数据的变化，从而针对数据的变化做特定的操作 语法格式:

const vm  = new Vue({
    el:'#app',
    data:{message:'1'},
    watch:{
    //监听message变化
    //newVal是变化后的新值，oldVal是变化之前的旧值
    username(newVal,oldVal){
        console.log(newVal,oldVal)
        }
    }
})

注意点

组件初次加载后不会调用watch侦听器，如果需要让watch立即被效用，需要使用immediate选项，

    watch:{
        username(xx,xx):{
        }
        //立即触发侦听器
        immediate:true;
    }

计算属性

通过一系列运算之后，最终得到的一个属性值，动态计算出来的属性值可以被模板结构或methods方法使用。

计算例子

    //已勾选商品的总价格,记得return出去
    amt() {
      //1.先filte过滤
      //2.reduce累加
      return this.list
        .filter((item) => item.goods_state)
        .reduce(
          (total, item) => (total += item.goods_price * item.goods_count),
          0
        );
    },

具体使用

<p>{{amt}}<p>

组件化开发

组件化开发指的是:根据封装的思想，把页面上可重用的UI结构封装为组件,从而方便项目的开发和维护。

组件的组成部分

• template 组件的模板结构
• script 组件的JavaScript行为
• style 组件的样式

组件的props

props是自定义属性，允许使用者通过自定义属性，为当前组件设定初始值

自定义属性的名字，是封装者自定义的，只要名称合法即可

props: ["init"], init='6',为字符串赋值，而:init=‘6’为v-bind赋值，为数字6

具体注意点

• props数据可以直接在模板中使用

• props:[]只能接受值，无法定义默认值。

• props:{init:{}} 对象的格式，可以default定义默认值，还可以定义多个自定义属性

Vue操纵DOM方法

this.$refs.(定义的ref属性值)

<h1 ref='myh1'>asd</h1>

this.$refs.myh1
//改变样式
this.$refs.myh1.style.color='red'

可以调用子组件的方法和数据

<left ref='comLeft'></left>
this.$refs.comLeft.show();//调用了子组件Left里的show方法

总结

Vue的组件化开发有利于项目的开发和维护，同时可以针对组件可以有效复用