十六周学习前端的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、作用域插槽
- 学习django框架,记录所遇到的问题以及解决方法
- vue.js学习笔记--遇到的那些问题
- vue.js学习笔记--遇到的那些问题
- vue.js中的各种问题记录(包括环境问题和学习笔记)
- 我前端学习问题笔记——JS初学篇
- 【记录】JS正则表达式(学习笔记2)现学现卖还帮美女解决了个问题。
- 前端框架vue.js 学习
- vue饿了么学习笔记(1)关于dev-server.js消失的问题
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
- 记录自己学习心得以及工作中遇到问题的总结
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法 ( 摘自zdwzdwzdw)
- 记录学习laravel框架过程中遇到的问题
- vue.js学习笔记之安装以及项目的创建和运行
- 【Web前端】Vue.js 项目中遇到的一些问题汇总
- 【c语言学习笔记】指针数组和数组指针以及在做题的时候遇到的问题
- [知了堂学习笔记] SSM框架项目中遇到的问题及解决办法_01
- 学习两天Vue.js遇到的问题及解决办法。
- 移动端前端笔记 — 遇到的常见JS与CSS问题及解决方法
- MapReduce(Hbase)学习笔记---初学遇到的问题以及解决办法
- 记录一下:Unity5.5.1和Android 交互学习以及遇到的问题