Vue2篇1-优快云博客

本文链接：https://blog.youkuaiyun.com/Derivefly/article/details/149668576

第1章：Vue核心

1.1. Vue 简介

1.1.1. 官网

1. 英文官网:https://vuejs.org/

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

1.1.2. Vue 周边库

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

1.2. 模板语法

1.2.1. 模板的理解

1.html 中包含了一些JS语法代码，语法分为两种，分别为： 1. 插值语法（双大括号表达式） 2. 指令（以v-开头）

1.2.2. 插值语法

1. 功能:用于解析标签体内容

2. 语法: {{xxx}} ，xxxx会作为js表达式解析

1.2.3. 指令语法

1.3. 数据绑定

1.3.1. 单向数据绑定

1. 语法：v-bind:href ="xxx" 或简写为 :href

2. 特点：数据只能从data流向页面

1.3.2. 双向数据绑定

1. 语法：v-mode:value="xxx" 或简写为 v-model="xxx"

2. 特点：数据不仅能从data流向页面，还能从页面流向data

1.4. MVVM模型

1. M：模型(Model) ：对应data中的数据

2. V：视图(View) ：模板

3. VM：视图模型(ViewModel) ：Vue实例对象

1.5. 事件处理

1.5.1. 绑定监听 1. v-on:xxx="fun"

2. @xxx="fun"

3. @xxx="fun(参数)"

4. 默认事件形参:event

5. 隐含属性对象:$event

1.5.2. 事件修饰符

1. .prevent : 阻止事件的默认行为 event.preventDefault()

2. .stop : 停止事件冒泡event.stopPropagation()

1.6 计算属性与监视

1.6.1 计算属性-computed

1. 要显示的数据不存在，要通过计算得来。

2. 在computed对象中定义计算属性。

3. 在页面中使用{{方法名}}来显示计算的结果。

1.6.2. 监视属性-watch

1. 通过通过vm对象的$watch()或watch配置来监视指定的属性

2. 当属性变化时,回调函数自动调用,在函数内部进行计算

1.7. class 与 style 绑定

1.7.1. 理解

1. 在应用界面中,某个(些)元素的样式是变化的

2. class/style 绑定就是专门用来实现动态样式效果的技术

1.7.2. class 绑定

1. :class='xxx'

2. 表达式是字符串: 'classA'

3. 表达式是对象: {classA:isA, classB: isB}

4. 表达式是数组: ['classA', 'classB']

1.7.3. style 绑定

1. :style="{ color: activeColor, fontSize: fontSize + 'px' }"

2. 其中activeColor/fontSize 是data属性

1.8. 条件渲染

1.8.1. 条件渲染指令

1. v-if 与v-else

2. v-show

1.8.2. 比较v-if 与v-show

1. 如果需要频繁切换v-show较好

2. 当条件不成立时,v-if的所有子节点不会解析(项目中使用)

1.9. 列表渲染

1.9.1. 列表显示指令

遍历数组:v-for / index 遍历对象:v-for / key

1.10. 过滤器

1.10.1. 理解过滤器

1. 功能:对要显示的数据进行特定格式化后再显示

2. 注意:并没有改变原本的数据,是产生新的对应的数据

1.11 内置指令与自定义指令

1.11.1. 常用内置指令

1. v-text : 更新元素的 textContent

<div v-text="message"></div>

2. v-html : 更新元素的 innerHTML

<div v-html="rawHtml"></div>

3. v-if : 如果为true, 当前标签才会输出到页面

4. v-else: 如果为false, 当前标签才会输出到页面

5. v-show : 通过控制display样式来控制显示/隐藏

<div v-show="isVisible">显示或隐藏</div>

6. v-for : 遍历数组/对象

<li v-for="(item, index) in items" :key="item.id">
  {{ index }} - {{ item.text }}
</li>

7. v-on : 绑定事件监听,一般简写为@

<button v-on:click="handleClick">点击</button>
<!-- 简写形式 -->
<button @click="handleClick">简写点击</button>

8. v-bind : 动态绑定一个或多个属性，或一个组件 prop 到表达式，可以省略v-bind

<img v-bind:src="imageSrc">
<!-- 简写形式 -->
<img :src="imageSrc">

9. v-model : 在表单控件或者组件上创建双向数据绑定。

<input v-model="message" placeholder="编辑我">

10. v-cloak :保持在元素上直到关联实例结束编译，通常与 CSS 规则配合使用。

<div v-cloak>
  {{ message }}
</div>

11.v-pre:跳过这个元素和它的子元素的编译过程。

<span v-pre>{{ 这里的内容不会被编译 }}</span>

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

1.12. Vue 实例生命周期

1.12.1 vue 生命周期分析

1. 初始化显示 * beforeCreate() * created() * beforeMount() * mounted()

2.更新状态:this.xxx = value * beforeUpdate() * updated()

3. 销毁vue实例:vm.$destory() * beforeDestory() * destoryed()

第2章：Vue组件化编程

2.1 模块与组件、模块化与组件化

2.1.1. 模块

1. 理解:向外提供特定功能的js程序,一般就是一个js文件

2. 为什么: js文件很多很复杂

3. 作用:复用js,简化js的编写,提高js运行效率

2.1.2. 组件

1. 理解:用来实现局部(特定)功能效果的代码集合(html/css/js/image…..)

2. 为什么:一个界面的功能很复杂

3. 作用:复用编码,简化项目编码,提高运行效率

2.1.3. 模块化

当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用。

2.1.4. 组件化

当应用中的功能都是多组件的方式来编写的,那这个应用就是一个组件化的应用,。

2.2. 非单文件组件

1. 模板编写没有提示

2. 没有构建过程,无法将ES6转换成ES5

3. 不支持组件的CSS

4. 真正开发中几乎不用

2.3. 单文件组件

2.3.1. 一个.vue 文件的组成(3个部分)

1. 模板页面页面模板

`<template>`

包含组件的 HTML 结构。
只能有一个根元素（如 <div>）。
支持 Vue 的模板语法（如 {{ }}、v-if、v-for 等）。

<template/>

2. JS模块对象

`<script>`

定义组件的 JavaScript 逻辑。
默认导出 Vue 组件选项（如 data、methods、props 等）。
可以使用 ES6 模块语法（export default）。

<script/>

3. 样式

`<style>`

定义组件的 CSS 样式。
支持预处理器（如 scss、less），需通过 lang 属性指定（例如 <style lang="scss">）。
可以通过 scoped 属性实现样式局部作用域（例如 <style scoped>）。

`<style/>`

2.3.2. 基本使用

1. 引入组件 2. 映射成标签 3. 使用组件标签