x项目: MOOC qunar
基础:js es6 webpack npm
知识点:
axios ajax数据获取
vue-router 页面路由
vuex 多个组件数据共享
stylus :样式
组件:
异步组件:代码上线
递归组件:
共用组件:
插件:
项目:
上线流程
前后端同调
vue基础:
1,一个VUE项目往往是由多个vue实例对象组成的,
2,组件也是vue的实例对象
3,vm.$xxx //xxx是vue实例对象中的属性或方法
初始化实例对象:
new vue({
el:'#app'
data:{}
methods:{}
1.是方法，主动调用
2.每次需要重新加载
3.无缓存性
watch:{}
1.是观察的动作，自动执行
2.应用：监听props，emit的传值
3.具有缓存性，页面重新渲染值不变化,计算属性会立即返回之前的计算结果，而不必再次执行函数
指令:
v-for='item in list'
v-on:click="绑定事件" 简写@click
v-model='双向数据绑定'
v-bind:content="item" 赋值?
v-text='name1'
v-html="name2+'hahA'" 解析html
{{name+'haha'}}
以上三个表达式中可拼接字符串
条件渲染:
1v-if='' 值控制是否存在dom
2v-show='' display:none 没有dom操作,相对性能高
3v-if v-else 便签必须连在一起写 (if值为false时显示else的内容)
v-if v-else-if v-else
当input内值被复用时,用不同的key值区别,防止复用bug,唯一标识
列表渲染:
<div v-for='(item,index) of info' :key='item.id'>
给info添加新值时:set方法:
对象:vue.set(info,index,item)
样式绑定:
1对象法:class='{activated:isactivated}'
//控制data中的isactivated
2数组法
:class='[activated,changed,,]'
3:style="[c1,{background:'yellow'}
组件:
注册组件:
1组件名字,驼峰命名,,在使用时需将大写字母变为'-'+'小写'
2引用父组件加props
3
组件相关用法:
一:is属性: is="组件名"
解决模板命名与html标签嵌套规则冲突的时候可能会产生bug的情况
例如;<tabel><tr> <ul><li> <ol><li> <dl><dt><dd> <select><option>
<aa-a><aa-a>
方法一:
注册全局组件 :
Vue.component('组件名aaA',{})
方法二:
注册局部组件
var zujian={
props:['content'] //要接受的父组件的?值
template:"<li>{{content}}<li>"
}
组件传值:
父传子:props:[]
子传父:
生命周期钩子:
beforeCreate 实例初始化后,数据观测事件监听未被配置之前
created数据观测事件监听配置后,实例创建完成,未挂载el
beforeMount挂载el到html前,相关render函数被调用,读取模板
mounted挂载el后
beforeDestroy实例销毁前
destoryed实例销毁后
beforeUpdated 数据有更新,未被渲染前
updated数据更新渲染后
