Vue学习笔记——Vue核心

1.1 Vue简介

1.1.1.官网

1. 英文官网: https://vuejs.org/
2. 中文官网: https://cn.vuejs.org

1.1.2.介绍与描述

1. 动态构建用户界面的渐进式JavaScript框架
2. 作者：尤雨溪

1.1.3.Vue的特点

1. 遵循MVVM模式
2. 编码简洁，体积小，运行效率高，适合移动/PC端开发
3. 它本身只关注UI，也可以引入其他第三方库开发项目

1.1.4.与其他JS框架的关联

1. 借鉴Angular的模板和数据绑定定数
2. 借鉴React的组件化和虚拟DOM技术

1.1.5.Vue周边库

1. vue-cli:vue脚手架
2. vue-resource
3. axios
4. vue-router：路由
5. vuex：状态管理
6. element-ui：基于vue的UI组件库（PC端）
   …

1.2.初始Vue

略

1.3.模板语法

1.3.1.效果

插值语法：显示文字/图片在页面上
指令语法：跳转页面

1.3.2.标题模板的理解

html中包含了一些JS语法代码，语法分为两种，分别为：

1. 插值语法（双大括号表达式）
2. 指令（以v-开头）

1.3.3.插值语法

1. 功能：用于解析标签体内容
2. 语法：{{xxx}},xxxx会作为js表达式解析

1.3.4.指令语法

1. 功能：解析标签属性、解析标签体内容、绑定事件
2. 举例：v-bind:href=‘xxxx’,xxxx会作为js表达式被解析
3. 说明：Vue中有很多的指令，此处只是用v-bind举个例子

1.4数据绑定

1.4.1.效果

分为单向数据绑定和双向数据绑定

1.4.2.单向数据绑定

1. 语法：v-blind:href=“xxx”,或简写为:href
2. 特点：数据只能从data流向页面

1.4.3.双向数据绑定

1. 语法：v-mode:value=“xxx”，或简写为v-mode=“xxx”
2. 特点：数据不仅能从datda流向页面，还能从页面流向data

1.5.MVVM模型

1. M：模型(Model)：对应data中的数据
2. V：试图(View)：模板
3. VM：视图模型(ViewModel)：Vue实例对象

1.6事件处理

1.6.1.效果

1.6.2.绑定监听

1. v-on:xxx=“fun”
2. @xxx=“fun”
3. @xxx=“fun(参数)”
4. 默认事件形参:event
5. 隐含属性对象:$event

1.6.3.事件修饰符

1. prevent：阻止事件的默认行为 event.preventDefault()
2. stop：停止事件冒泡event.stopPropagation()

1.6.4.按键修饰符

1. keycode：操作的是某个keycode值的键
2. keyName：操作的某个按键名的键（少部分）

1.7.计算属性与监视

1.7.1.效果

1.7.2.计算属性-computed

1. 要显示的数据不存在，要通过计算得来
2. 在computed对象中定义计算属性。
3. 在页面中使用{{方法名}}来显示计算的结果。

1.7.3.监视属性-watch

1. 通过vm对象的$watch()或watch配置来监视指定的属性
2. 当属性变化时，回调函数自动调用，在函数内部进行计算

1.8.class与style绑定

1.8.1.理解

1. 在应用界面中，某个（些）元素的样式是变化的
2. class/style绑定就是专门用来实现动态样式效果的技术

1.8.2.class绑定

1. :class=‘xxx’
2. 表达式是字符串:‘classA’
3. 表达式是对象：{classA:isA,classB:isB}
4. 表达式是数组：[‘classA’,‘classB’]

1.8.3.style绑定

1. :style=“{color:activeColor,fontSize:fontSize+‘px’}”
2. 其中activeColor/fontSize是data属性

1.9.条件渲染

1.9.1.条件渲染指令

1. v-if与v-else
2. v-show

1.9.2.比较v-if与v-show

1. 如果需要频繁切换v-show较好
2. 当条件不成立时，v-if的所有子节点不会解析（项目中使用）

1.10.列表渲染

1.10.1.效果

1.10.2.列表显示指令

1. 遍历数组：v-for/index
2. 遍历对象：v-for/key

1.11.收集表单数据

1.12.过滤器

1.12.1.效果

1.12.2.理解过滤器

1. 功能：对要显示的数据进行特定格式化后再显示
2. 注意：并没有改变原本的数据，是产生新的对应的数据

1.13.内置指令与自定义指令

1.13.1.常用内置指令

1. v-text：更新元素的textContent
2. v-html：更新元素的innerHTML
3. v-if：如果为true，当前标签才会输出页面
4. v-else：如果为false，当前标签才会输出到页面
5. v-show：通过控制display样式来控制显示/隐藏
6. v-for：遍历数组/对象
7. v-on：绑定事件监听，一般简写为@
8. v-bind：绑定解析表达式，可以省略v-bind
9. v-model：双向数据绑定
10. v-cloak：防止闪现，与css配合：[v-cloak]{display:none}

1.13.2.自定义指令

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()
        }
    }
}

使用指令：
v-my-directive=‘xxx’

1.14.Vue实例生命周期

1.14.1.效果

1.14.2.生命周期流程图

1.14.3.vue生命周期分析

1. 初始化显示
   • beforeCreate()
   • created()
   • beforeMount()
   • mounted()
2. 更新状态：this.xxx=value
   • beforeUpdate()
   • updated()
3. 销毁vue实例：vm.$destory()
   • beforeDestory()
   • destoryed()

1.14.4.常用的声明周期放啊

1、mounted():发送ajax请求，启动定时器等异步任务
2、beforeDestroy():做收尾工作，如：清除定时器