您的位置:首页 > Web前端 > Vue.js

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

2019-06-15 19:39 1196 查看
  • 课程简介
  • 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-ifv-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>

7Vue中的列表渲染

数组和对象

8Vue中的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、作用域插槽

 

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: