Vuejs基础学习笔记整理

Vue.js
官网：
中文：https://cn.vuejs.org/
英文：https://vuejs.org/

基础部分

1.vue:渐进式JavaScript框架
2.作用：动态构建用户界面
3.遵循MVM模式
4. vue（view）：结合并简化Angular+ React的一些优势
Angular:模板语法，数据绑定
React:组件化，虚拟

HelloWorld

1. 引入Vue.js
2. 创建Vue对象
   el : 指定根element(选择器)
   data : 初始化数据(页面可以访问)
3. 双向数据绑定 : v-model
4. 显示数据 : {{xxx}}
5. 理解vue的mvvm实现

MVVM
Model:模型，数据对象（data）
View:视图，
ViewModel:视图模型（Vue）的实例

开发：
声明式开发：不需要管流程
命令式开发：jQuery

模板语法

1. 模板的理解:
   动态的html页面
   包含了一些JS语法代码
   大括号表达式
   指令(以v-开头的自定义标签属性)
2. 双大括号表达式
   语法: {{exp}} 或 {{{exp}}}
   功能: 向页面输出数据
   可以调用对象的方法
3. 指令一: 强制数据绑定
   功能: 指定变化的属性值
   完整写法:
   v-bind:xxx=‘yyy’ //yyy会作为表达式解析执行
   简洁写法:
   :xxx=‘yyy’
4. 指令二: 绑定事件监听
   功能: 绑定指定事件名的回调函数
   完整写法:
   v-on:click=‘xxx’
   简洁写法:
   @click=‘xxx’
   计算属性和监视
5. 计算属性
   在computed属性对象中定义计算属性的方法
   在页面中使用{{方法名}}来显示计算的结果
6. 监视属性:
   通过通过vm对象的$watch()或watch配置来监视指定的属性
   当属性变化时, 回调函数自动调用, 在函数内部进行计算
7. 计算属性高级:
   通过getter/setter实现对属性数据的显示和监视
   计算属性存在缓存, 多次读取只执行一次getter计算

每个属性都有两个对应的方法：
get:返回当前属性的值
set：监视，一旦改变属性值就会调用，传入最新的值
都是回调函数

回调函数：
1.你定义的
2.你没有调用
3.最终执行
什么时候调用？当需要读取当前属性值时回调
用来做什么？根据相关数据计算并且返回当前属性的值

class与style绑定

1. 理解
   在应用界面中, 某个(些)元素的样式是变化的
   class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class=‘xxx’
   xxx是字符串
   xxx是对象
   xxx是数组
3. style绑定
   :style="{ color: activeColor, fontSize: fontSize + ‘px’ }"
   其中activeColor/fontSize是data属性

条件渲染

1. 条件渲染指令
   v-if
   v-else
   v-show
2. 比较v-if与v-show
   如果需要频繁切换 v-show 较好

列表渲染

1. 列表显示
   数组: v-for / index
   对象: v-for / key
2. 列表的更新显示
   删除item
   替换item

列表渲染_过滤与排序

1. 列表过滤
2. 列表排序

事件处理

1. 绑定监听:
   v-on:xxx=“fun”
   @xxx=“fun”
   @xxx=“fun(参数)”
   默认事件形参: event
   隐含属性对象: $event
2. 事件修饰符:
   .prevent : 阻止事件的默认行为 event.preventDefault()
   .stop : 停止事件冒泡 event.stopPropagation()
3. 按键修饰符
   .keycode : 操作的是某个keycode值的健
   .enter : 操作的是enter键

表单输入绑定
使用v-model(双向数据绑定)自动收集数据
text/textarea
checkbox
radio
select

Vue实例_生命周期

1. vue对象的生命周期
   1). 初始化显示
   beforeCreate()
   created()
   beforeMount()
   mounted()
   2). 更新状态：this.xxx = value
   beforeUpdate()
   updated()
   3). 销毁vue实例: vm.$destory()
   beforeDestory()
   destoryed()
2. 常用的生命周期方法
   created()/mounted(): 发送ajax请求, 启动定时器等异步任务
   beforeDestory(): 做收尾工作, 如: 清除定时器

过渡&动画1

1. vue动画的理解
   操作css的trasition或animation
   vue会给目标元素添加/移除特定的class
2. 基本过渡动画的编码
   1). 在目标元素外包裹
   2). 定义class样式
   1>. 指定过渡样式: transition
   2>. 指定隐藏时的样式: opacity/其它
3. 过渡的类名
   xxx-enter-active: 指定显示的transition
   xxx-leave-active: 指定隐藏的transition
   xxx-enter: 指定隐藏时的样式

过滤器

1. 理解过滤器
   功能: 对要显示的数据进行特定格式化后再显示
   注意: 并没有改变原本的数据, 可是产生新的对应的数据
2. 编码
   1). 定义过滤器
   Vue.filter(filterName, function(value[,arg1,arg2,…]){
   // 进行一定的数据处理
   return newValue
   })
   2). 使用过滤器
   {{myData | filterName}}
   {{myData | filterName(arg)}}

内置指令
常用内置指令
v:text : 更新元素的 textContent
v-html : 更新元素的 innerHTML
v-if : 如果为true, 当前标签才会输出到页面
v-else: 如果为false, 当前标签才会输出到页面
v-show : 通过控制display样式来控制显示/隐藏
v-for : 遍历数组/对象
v-on : 绑定事件监听, 一般简写为@
v-bind : 强制绑定解析表达式, 可以省略v-bind
v-model : 双向数据绑定
ref : 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象
v-cloak : 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }

自定义指令

1. 注册全局指令
   Vue.directive(‘my-directive’, function(el, binding){
   el.innerHTML = binding.value.toupperCase()
   })
2. 注册局部指令
   directives : {
   ‘my-directive’ : {
   bind (el, binding) {
   el.innerHTML = binding.value.toupperCase()
   }
   }
   }
3. 使用指令
   v-my-directive=‘xxx’