项目总结1（微信+vue2.0）

Posted 2020-10-04

项目总结（vue2.0）

一、基础知识

1.生命周期（项目到用到的）

Created：组件实例化创建完成，属性绑定DOM未完成。($el 属性还不存在)。

Mounted：组件挂在完成，虚拟DOM渲染到html上，mounted知执行一次（从mounted就可以获取到$refs，进行操作）。

一般在created或是mounted进行一些ajax操作。

updated：组件更新之后，可以获取到DOM节点。

2.数据渲染

v-if：是否创建DOM。一般用在不是频繁创建DOM元素的情况下，否则可用v-show代替。（一般配合v-else，v-else-if一起使用）。

v-else：可以用在不同于v-if的标签，但必须紧跟在v-if或v-else-if的后面。

v-else-if：可以链式使用多次。

v-show：切换display属性。

v-for：列表渲染。

对象迭代：v-for=“（value,key,index） in obj” ,key:键名，value：键值，index索引。

整数迭代：v-for=“i in 10”,。

数组迭代：v-for=“（item，index） in arr”（数组嵌套同理）。

key：为每一项提供一个唯一的表示，用key表示：key=“item.id”.

v-text:更新元素的text content。

v-html：插入dom元素。

3.属性绑定

v-bind：简写例如：class。属性值若是变量，要用v-bind（父组件向组件传值）。

4.属性与方法

el：vue实例化的元素。

data：在实例化时data的类型是object，在组件定义时，data的类型是function，内部的元素以return返回的形式（不要是用箭头函数）。

methods：定义的方法，类型是object。内部形式为{key：function（）{}}（不要使用箭头函数）。

computed：计算属性（计算属性值）。

5.自定义过滤器

基本形式：Vue.filter(“name”，function（value[，value1…]{Return A})

name:过滤器的名称。

value:默认传入的字符串。

之后得到的值要用return返回出来。

6．事件处理器

  v-on简写例如@click=“getInfo（$event,index）”。$event为元素本身，相当于event，index为v-for时的下标。

例如：点击弹窗空白的地方弹窗消失，判断ev.target的值

  事件修饰符（用过）：

  stop：阻止冒泡（加在子元素的事件上）。

7．父子组件传值（只是其中一种方法）

父组件向子组件传值

父组件<child :msg=”childData”></child>

子组件props:[“msg”]

若想父组件动态向子组件传值，则要用父组件调用子组件的方法每次向方法里传参就可以。例如：父组件this.$refs.child.showName(msg) .必须给子组件添加ref属性并获取到。

子组件向父组件传值

 通过父组件订阅子组件的方法，在子组件在发布方法时，获取到子组件传过来的值。

子组件：

<template>

<div @click="iclick"></div>

</template>

 methods:{

         iclick(){

            let data = { a:‘data‘ };

            this.$emit(‘ievent‘,data,‘lalala‘);

         } 
}

 

父组件：

<i-template @ievent = "ievent"></i-template>

        methods:{

            ievent(...data){

            console.log(‘allData:‘,data);  //  data为包含传过来所有数据的数组，第一个元素是对象，第二个元素是字符串

        } 
}

 

总结：当用到路由的时候，头部底部放在父组件中，个别页面没有底部可以由子组件传值控制父组件的内容。