十六周学习前端的Vue.js框架的笔记记录，以及遇到的问题记录

• 课程简介
• Vue起步

一、基础学习：Vue.js的文档学习和视频学习相结合

1、v-for:数据绑定，循环 item in list

2、v-on 事件绑定，@

ToDoList的功能

3、v-model数据的双向绑定，表单

4、前端组件化

 

二、实战

 

• Vue实例

1、创建一个Vue实例

2、Vue实例生命周期钩子函数

3、Vue的模板语法

4、计算属性，方法与倾听器☆

5、vue中的样式绑定

①class的对象绑定，1.:class="{ activated:isActivated }"

                  2.:class="[activated,activatedOne]"

 

②style 

1.:style="styleObj"

2. :style="[styleObj,{fontSize:'26px'}]"

6、Vue中的条件渲染

①v-if和v-show的用法

<v-if=”show”>{{ message }}</div>    //未被添加，每次都要删除和添加dom

<v-show=”show”>{{ message }}</div>  // display:none

data:{

show:false

}

②<div  v-if=”show===a”></div>

<div  v-if-else=”show===b”></div>

<div  v-else></div>

7、Vue中的列表渲染

数组和对象

8、Vue中的set方法

Vue.set(vm.userInfo,"adress","Beijing")//在列表中增加address这一行，值为Beijing

①Vue.set(vm.userInfo,1,5)

②vm.$set(vm.userInfo,2,9)

9、使用组件的细节点：

①使用is属性解决模板标签上出现bug的问题，如tbody中要有tr;

ul中要有li;select中要有option

②ref引用的方式获取dom

<div ref='hello'

             @click="handleClick">

            Hello World

        </div>

 

 

  var vm = new Vue({

            el:'#app',

            data:{

 

            },

            methods:{

                handleClick:function() {

                    console.log(this.$refs.hello.innerHTML)

                }

            }

        })

       

10、父组件向子组件传递数据

11、子组件向父组件传递数据

12、组件参数校验与非props特性

13、给组件绑定原生事件

14、非父子组件传值Bus/总线/发布订阅模式/观察者模式

15、在Vue中使用插槽slot

给插槽命名 <div slot=”header”></div>

<slot name=”header></slot>

16、作用域插槽