1.vue特点: 模板渲染 模块化 扩展功能 (路由 ajax)
2. 实例 –> 组件 –> 指令 –> 选项 –> 模板渲染 –> 事件的绑定 –> 计算属性 –> 内置动画 –> 组件交互 –> 路由
3.项目开发 : 页面 –> 首页 –> 列表页 –> 售卖页(子路由页 –> 选项 –> 产品说明 –> 各种弹窗)
4.vue (数据渲染/数据同步) –> (组件化/模块化) –> (其他功能: 路由,ajax,数据流)
5.vuejs中文官网 http://cn.vuejs.org/
vuejs源码 https://github.com/vuejs/vue
vuejs官方工具 https://github.com/vuejs
6.new Vue({}) : 构造函数
el: 挂载app
template:模板(必须有根元素)
data:{} 载入数据
7.引入子组件: components :{App}
8.vue 的生命周期
9.引入vue并赋予Vue变量 : import Vue from ‘vue’
10.组件的分发: 跟组件 –> layout (header) (footer) (content) –>(slidebar)(…)
11.全局注册组件: Vue.component(‘组件名’,{template:“,})
局部注册组件: components:{‘组件名:模板’}
12.在body中烤串式写法,在js中用驼峰标识
13.data引入赋值,通过事件,改变一个data,另一个也会改变;data必须是函数,return返回一个对象
14.全局api –> 实例选项 –> 实例属性/方法 –> 指令 –> 内置组件
15. 用变量接收一个跟实例 var root = new Vue({})
获取数据 : root.
data使用方法:root.
on(‘emit’,function(){})
16.@click: 点击事件 @想相当于(v-on:)
@keydown.enter: 修改
17.keep-alive标签包住router-view标签保存缓存,访问过就保存起来
18.组件中 :is= ‘名字’ 是否显示这个组件
19.es6语法 : render:function(h) { return h(App)} 相当于 render h => h(App)
20.指令: v-text(源代码输出) v-html:(渲染标签) v-for:(渲染列表 item in list):指当前循环的标签上添加 (item,index) : item代表元素,index代表是下标,一般跟:class进行动态的绑定
v-for:渲染对象: (value,key): value属性名, key属性值
v-for:组件渲染: 在使用的地方 import componentA form ‘./components/a’(会自动查找v文件)
在组件里面注册组件 : components : {componentA},(es6缩写)
在body里面写标签
<componentA v-for:'(value,key) in obj'></componentA>
(V2.0里面可以烤串也可以驼峰)
组件循环的意义: 动态为组件传值
21.三目运算 : status ? ‘1’ : ‘2’
22.es6的简写: addItem: function (){} 简写 addItem (){}
22.视图触发更新 : pop() push() shift() unshift() splice() sort() reverse()
23.不会触发更新 : filter() concat() slice()
为其中的某一项赋值
改变数组的长度
24.强制更新视图,需要引入 import Vue form ‘vue’
Vue.set(‘原数组’,第几项,改变的数据) 如:Vue.set(this.list,1,{属性名:属性值});
25.v-bind : 动态绑定 缩写(:) ,可以调用data中的数据进行动态的绑定
,常用与绑定class
className可以是对象:{aaa:true,ddd:false}
:style=”linkCss” 进行动态的绑定内联样式
25.条件渲染 v-if v-show (判断布尔值true false)
26.通过方法的形式,点击触发事件, 开关 this.pa = !this.pa
27.v-if为false的时候,文档流中不存在元素
28.v-else 配合v-if或者 v-show 使用,就可以实现开关的样式
29.v-bind动态绑定标签的属性