项目总结1(微信+vue2.0)

项目总结(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为包含传过来所有数据的数组,第一个元素是对象,第二个元素是字符串

        } 
}

 

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

 

项目总结1(微信+vue2.0)

上一篇:ListView模拟微信好友功能


下一篇:做了一个淘宝内部优惠券分享平台支持微信公众号以及网站