vue项目学习笔记

1、v-for="item in list"

2、v-on:click    @click

3、v-model: 数据的双向绑定

4、v-bind:content="item"  ( :content="item" ) 传值给子组件，子组件用props接收值。

5、组件分为全局组件和局部组件，局部组件使用前需要先注册。

　　Vue.component("TodoItem", {

　　　　props: ['content'],

　　　　template: "<li>{{content}}</li>"

　　});    //全局

　　var TodoItem = {

　　　　props: ['content'],

　　　　template: "<li>{{content}}</li>"

　　}；  //局部，需要在components中注册

6、子组件向外触发事件

　　this.$emit("delete", this.index)

　　@delete=“handleItemDelete”

7、vue实例的内容

　　el: 

　　props: []

　　components:{}

　　data: {}

　　methods:{}

8、vue实例的生命周期函数：某个时间点自动执行。  生命周期函数不放在 methods 里

　　1）beforeCreate

　　2）created

　　3）beforeMount

　　4）mounted

　　5）beforeDestroy

　　6）destroyed

　　7）beforeUpdate

　　8）updated

9、v-text：原样输出     v-html：显示出样式  （可以是变量，也可以是表达式）

10、计算属性: 有缓存机制  使用的属性没有发生变化时，不会重新计算

　　computed: {

　　　　fullName: function() {

　　　　　　return this.firstName + " " + this.lastName

　　　　}

　　}

　　方法：没有缓存机制

　　侦听器: 有缓存机制，但没有计算属性简洁

　　watch: {

　　　　firstName: function() {

　　　　　　this.fullName = this.firsrName + " " + this.lastNamr;

　　　　},

　　　　lastName: function() {

　　　　　　this.fullName = this.firsrName + " " + this.lastNamr;

　　　　},

　　}

 11、计算属性的getter和setter

       　　

12、class的对象绑定      :class="{actived: isActived}"

　　class绑定数组   :class="[actived, actived3]"

　　style   :style="styleObj"  也可绑定对象和数组

 

 13、v-if 为true时，dom渲染在页面上，为false时不渲染   (v-if  v-else-if  e-else 之间一定要连着写，中间不能插入其他内容)

　　v-show  都会被渲染，display:none

 14、给某个元素标签加上 key 时， key值不同， vue 不会去复用这个dom元素

15、push  pop shift  unshift splice  sort  reverse 变异方法

　　数组是引用类型，直接通过下标修改数组，页面是不会变的。只能用变更方法 或者 替换数组改变数组或对象的引用 或者 set（） 来更改数组的值

16、template 模板占位符  

17、对象的set

　　Vue.set(vm.userInfo, "address", "bj");  //可改变对象的值，并且可以渲染

　　vue.$set(vm.userInfo, "address", "bj");  //可改变对象的值，并且可以渲染

18、数组的set

　　Vue.set(vm.userInfo, 1, 5);  // 1 为下标

　　vm.$set(vm.userInfo, 2, 10) ; 

19、<tr is="row"></tr>       //  row 是自定义的组件 table、ul、select里面使用is属性

20、在子组件里定义data时，data必须是一个函数，并且return一个对象

　　data: function() {

　　　　return { 

　　　　　　content: "xxx"

　　　　}

　　}

21、ref

　　当ref写在标签上时，this.$refs.hello  获取dom结点

　　当ref写在组件上时，this.$refs.name 获取子组件的引用

22、数据单向流：父组件通过属性像子组件传递参数， 子组件用props接收，但子组件不可以修改父组件传递过来的参数

　　子组件通过实践触发的方式向父组件传值。this.$emit

23、组件参数校验

　　

 

 24、非props特性：父组件用属性传递了参数，子组件缺没有用props接收，就不能在子组件使用。这时非props特性会直接显示在子组件最外层的dom标签的属性里。

　　props特性：父组件传了，子组件也用props接收了。不会显示的子组件dom结点的标签上

25、给组件绑定原生事件

　　<child @click.native="handleClick"></child>

26、非父子组件传值（bus/总线/发布订阅模式/观察者模式）

　　

 

 　　

 

 27、在vue中使用插槽（slot）

　　

 

 28、动态组件
　　<component :is="type"></component>   显示组件名为type的组件

29、v-once 可存储在内存中

30、动画、过度

31、animate.css库

 

5-4