Vue 核心
文章目录
- Vue 核心
-
- 一,Vue 简介
-
- (一)官网
- (二)介绍与描述
- (三)Vue 的特点
- (四)与其它 JS 框架的关联
- (五)Vue 周边库
- 二,初识 Vue
- 三,模板语法
-
- (一)模板的理解
- (二) 插值语法
- (三) 指令语法
- 四,数据绑定
-
- (一)单向数据绑定
- 五,MVVM 模
- 六,事件处理
-
- (一)绑定监听
- (二)事件修饰符
- (三)按键修饰符
- 七,计算属性与监视
-
- (一)效果
- (二)计算属性-computed
- (三)监视属性-watch
- 八,class 与 style 绑定
-
- (一)理解
- (二)class 绑定
- (三)style 绑定
- 九,条件渲染
-
- (一)条件渲染指令
- (二)比较 v-if 与 v-show
- 十,列表渲染
-
- (一)效果
- (二)列表显示指令
- 十一,收集表单数据
- 十二,过滤器
-
- (一)效果
- (二)理解过滤器
- 十三,内置指令与自定义指令
-
- (一)常用内置指令
- (二)自定义指令
- 十四,Vue 实例生命周期
-
- (一)效果
- (二)生命周期流程图
- (三)vue 生命周期分析
- (四)常用的生命周期方法
Vue 核心
一,Vue 简介
Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
(一)官网
- 英文官网: https://vuejs.org/
- 中文官网: https://cn.vuejs.org/
(二)介绍与描述
动态构建用户界面的渐进式 JavaScript 框
(三)Vue 的特点
- 遵循 MVVM 模式
- 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
- 它本身只关注 UI, 也可以引入其它第三方库开发项
(四)与其它 JS 框架的关联
- 借鉴 Angular 的模板和数据绑定技术
- 借鉴 React 的组件化和虚拟 DOM 技
(五)Vue 周边库
- vue-cli: vue 脚手架
- vue-resource
- axios
- vue-router: 路由
- vuex: 状态管理
- element-ui: 基于 vue 的 UI 组件库(PC 端)
- ……
二,初识 Vue
三,模板语法
(一)模板的理解
html 中包含了一些 JS 语法代码,语法分为两种,分别为:
- 插值语法(双大括号表达式)
- 指令(以 v-开头)
(二) 插值语法
- 功能: 用于解析标签体内容
- 语法: {{xxx}} ,xxxx 会作为 js 表达式解析
(三) 指令语法
- 功能: 解析标签属性、解析标签体内容、绑定事件
- 举例:v-bind:href = ‘xxxx’ ,xxxx 会作为 js 表达式被解析
- 说明:Vue 中有有很多的指令,此处只是用 v-bind 举个例子
四,数据绑定
(一)单向数据绑定
- 语法:v-bind:href =“xxx” 或简写为 :href
- 特点:数据只能从 data 流向页面,还能从页面流向 data
五,MVVM 模
- M:模型(Model) :对应 data 中的数据
- V:视图(View) :模板
- VM:视图模型(ViewModel) : Vue 实例对象
六,事件处理
(一)绑定监听
- v-on:xxx=“fun”
- @xxx=“fun”
- @xxx=“fun(参数)”
- 默认事件形参: event
- 隐含属性对象: $event
(二)事件修饰符
- .prevent : 阻止事件的默认行为 event.preventDefault()
- .stop : 停止事件冒泡 event.stopPropagation()
(三)按键修饰符
- keycode : 操作的是某个 keycode 值的键
- .keyName : 操作的某个按键名的键(少部分)
七,计算属性与监视
(一)效果
(二)计算属性-computed
- 要显示的数据不存在,要通过计算得来。
- 在 computed 对象中定义计算属性。
- 在页面中使用{{方法名}}来显示计算的结果。
(三)监视属性-watch
- 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
- 当属性变化时, 回调函数自动调用, 在函数内部进行计算
八,class 与 style 绑定
(一)理解
- 在应用界面中, 某个(些)元素的样式是变化的
- class/style 绑定就是专门用来实现动态样式效果的技术
(二)class 绑定
- :class=‘xxx’
- 表达式是字符串: ‘classA’
- 表达式是对象: {classA:isA, classB: isB}
- 表达式是数组: [‘classA’, 'classB
(三)style 绑定
- :style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
- 其中 activeColor/fontSize 是 data 属性
九,条件渲染
(一)条件渲染指令
- v-if 与 v-else
- v-sho
(二)比较 v-if 与 v-show
- 如果需要频繁切换 v-show 较好
- 当条件不成立时, v-if 的所有子节点不会解析(项目中使用)
十,列表渲染
(一)效果
(二)列表显示指令
遍历数组: v-for / index
遍历对象: v-for / key
十一,收集表单数据
十二,过滤器
(一)效果
(二)理解过滤器
- 功能: 对要显示的数据进行特定格式化后再显示
- 注意: 并没有改变原本的数据, 是产生新的对应的数据
十三,内置指令与自定义指令
(一)常用内置指令
- 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 : 双向数据绑定
- v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
(二)自定义指令
- 注册全局指令
Vue.directive('my-directive', function(el, binding){el.innerHTML = binding.value.toupperCase()
})
- 注册局部指令
directives : {'my-directive' : {bind (el, binding) {el.innerHTML = binding.value.toupperCase()}}
}
- 使用指令
v-my-directive='xxx'
十四,Vue 实例生命周期
(一)效果
(二)生命周期流程图
(三)vue 生命周期分析
- 初始化显示
- beforeCreate()
- created()
- beforeMount()
- mounted()
- 更新状态: this.xxx = value
- beforeUpdate()
- updated()
- 销毁 vue 实例: vm.$destory()
- beforeDestory()
- destoryed()
(四)常用的生命周期方法
- mounted(): 发送 ajax 请求, 启动定时器等异步任务
- beforeDestory(): 做收尾工作, 如: 清除定时器