Vue2.js 重要知识点一览

Jun 29, 2021 · 3 分钟阅读 · vue frontend

文章目录

1.从 JQuery 库到Vue.js 框架

从 操作DOM 的思维模式切换到 以数据为主

2.安装

1$ npm install --global vue-cli # 全局安装 vue-cli
2$ vue init webpack my-project # 创建一个基于 webpack 模板的新项目
3$ cd my-project
4$ npm install # 安装依赖 加速：--registry https://registry.npm.taobao.org
5$ npm run dev # 运行项目

3.基本指令

1、双花括号

mustache(模板引擎)/interpolation（插值表达式）

语法：

1<any>{{表达式}}</any>

作用：将表达式执行的结果输出当调用元素的innerHTML中；还可以将数据绑定到视图

2、指令-循环指令

基本语法1：

1<any v-for="tmp in array"></any>

基本语法2：

1<any v-for="(value,index) in array"></any>

作用：在遍历array这个集合时，将临时变量保存在tmp中，创建多个any标签

3、指令-选择指令

语法：

1<any v-if="表达式"></any>
2<any v-else-if="表达式"></any>
3<any v-else="表达式"></any>

作用：根据表达式执行结果的真假，来决定是否要将当前的这个元素挂载到DOM树

4、指令-事件绑定

语法：

1<any v-on:eventName="handleEvent"></any>

作用：给指定的元素将handleEvent的方法绑定给指定eventName事件

5、指令-属性绑定

基本语法：

1<any v-bind:myProp="表达式"></any>

补充，支持简写：

1<any :myProp="表达式"></any>

作用：将表达式执行的结果绑定到当前元素的myProp属性

1<img v-bind:src="'img/'+myImg" alt="">

动态样式绑定

1<p :style="{backgroundColor:myBGColor}">动态样式绑定</p>

动态样式类绑定

1<h1 :class="{myRed:false}">动态样式类的绑定</h1>

6、指令-双向数据绑定

方向1：数据绑定到视图方向2：将视图中（表单元素）用户操作的结果绑定到数据

基本语法:

1<表单元素 v-model="变量">
2</表单元素>

4. 组件化

vue.js 有两大法宝，一个是数据驱动，另一个是组件化，那什么叫做组件化，为什么要组件化？
所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。

简单说，组件就像积木一样，可以复用，把各路不同的积木（组件）拼接在一起，构成一个复杂的页面应用程序

1、组件的创建

全局组件: Vue.component(tagName, options) ，例如

1Vue.component('my-component',{
2  template:`
3    <h2>it is a header</h2>
4  `
5})

局部组件: 可以在一个组件内部使用 components 选项做组件的局部注册，例如：

1new Vue({
2   components:{
3     'my-footer':{
4         template:''
5     }
6   }
7})

或

1import HelloWorld from './components/HelloWorld'
2
3export default {
4  components: {
5    HelloWorld
6  }
7}

区别：全局组件是挂载在 Vue.options.components 下，而局部组件是挂载在 vm.$options.components 下，这也是全局注册的组件能被任意使用的原因。

2、组件使用

作为普通的标签去使用
``` html
<my-com></my-com>
```

3、注意事项

(1).组件的id和使用方式 遵循烤串式命名方式：a-b-c 
(2).如果一个组件 要渲染多个元素，将多个元素放在一个顶层标签中，比如div、form
(3).全局组件可以用在id为example的范围内的任何一个组件内部，直接调用可以；但是局部组件只能在父模板中直接调用

5. 自定义指令

创建和使用

 1Vue.directive('change',{
 2bind:function(el,bindings){
 3//首次调用
 4},
 5update:function(el,bindings){
 6//只要是有数据变化，都会调用
 7},
 8unbind:function(){
 9//解绑
10}
11})
12<any v-change="count"></any>

6.过滤器

过滤器是针对一些数据进行筛选、过滤、格式化等相关的处理，变成我们想要的数据

过滤器的本质就是一个带有参数带有返回值的方法

Vue2.没有内置过滤器，但是支持自定义过滤器。

1、过滤器的创建和使用

1.创建

1Vue.filter(
2'myFilter',
3function(myInput){
4//myInput是在调用过滤器时，管道前表达式执行的结果
5//针对myInput，按照业务需求做处理
6//返回
7return '处理后的结果'
8})

2.使用

1<any>{{expression | myFilter}}</any>

2、如何在调用过滤器时，完成参数的发送和接受

1.发送

1<any>{{expression | myFilter(参数1，参数2)}}</any>

2.接受

1Vue.filter('myFilter',function(myInput，参数1，参数2){
2return '处理后的结果'
3})

7. 生命周期

四个阶段：

create 准备工作 （数据的初始化。。。）
mount 挂载前后针对元素进行操作
update 数据发生变化，
destroy 清理工作 (关闭定时器、集合清空..)

beforeCreate/created
beforeMount/mounted
beforeUpdate/updated
beforeDestroy/destroyed

8. 常见属性

1、watch

1.表单元素的双向数据绑定

1v-model="myValue"

2.监听

1watch:{
2  myValue:function(newValue,oldValue){    
3  }
4}

2、computed

计算属于是用于在模板中，搞定复杂的业务逻辑，因为有依赖缓存。

1.指定计算属性

1computed:{
2  myHandle:function(){
3    return 数据
4  }
5}

2.调用

1    {{myHandle}}

computer、method和watch的区别

computed用于处理复杂的逻辑运算，主要和methods储存方法来进行区分；

methods储存方法，computed储存需要处理的数据值；
methods每次都会调用，computed有缓存机制，只有改变时才执行，性能更佳。

watch顾名思义，用于监听数据变化，其中可以监听的数据来源有三部分：props、data、computed内的数据；
watch提供两个参数（newValue，oldValue），第一个参数是新值，第二个参数保存旧值；

computed是计算属性

支持缓存，只有依赖数据发生改变，才会重新进行计算
不支持异步，当computed内有异步操作时无效，无法监听数据的变化
computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过的数据通过计算得到的
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed
如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

watch是侦听属性

不支持缓存，数据变，直接会触发相应的操作；
watch支持异步；
监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
当一个属性发生变化时，需要执行对应的操作；一对多；

9. 组件间通信

1、父与子通信（props down）

1.发送

1<son myName='zhangsan'>
2</son>

2.接受到son组件：

1Vue.component('son',{
2props:['myName'],
3template:`
4<p>{{myName}}</p>
5`
6})

2、子与父通信 (events up)

1.绑定

1methods:{
2handleEvent:function(msg){}
3}
4<son @customEvent="handleEvent"></son>

2.触发子组件内部：

1this.$emit(‘customEvent’,100);、

3.ref(reference 引用/参考外号)

帮助在父组件中得到子组件中的数据、方法。

1.指定ref属性

1<son ref="mySon"></son>

2.根据ref得到子组件实例

1this.$refs.mySon

4、$parent

this.$parent得到父组件的实例

5、兄弟组件通信

11.var bus = new Vue();
22.接收方
3bus.$on('eventName',function(msg){})
43.发送方
5bus.$emit('eventName',123);

10. 路由

路由模块的本质就是建立起url和页面之间的映射关系

1、SPA的基本概念和工作原理

SPA：single page application 单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。

工作原理：

1.解析地址栏, 完整的页面地址、路由地址

2.根据路由地址从路由词典中找到真正的要加载的页面

3.发起ajax请求, 请求要加载的页面

4.像指定的容器中插入加载来的页面

2、路由模块的基本使用

专业术语：

router路由器
route路由
routes 路由数组（路由词典）

引入vue.js vue-router.js
指定一个容器
创建业务所需要用到的组件类

1var MyLogin = Vue.component()

配置路由词典

 1 const myRoutes = [
 2  {path:'',component:MyLogin},
 3  {path:'/login',component:MyLogin}
 4 ];
 5
 6 const myRouter = new VueRouter({
 7  routes:myRoutes
 8 })
 9
10 new Vue({
11   router:myRouter
12 })

测试修改地址栏中的路由地址，测试看加载的组件是否正确

注意事项：

先引入vue，再引入插件
一定要指定router-view
route路由 {path:'',component:} routes 路由数组 []
router 路由器:按照指定的路由规则去访问对应的组件 new VueRouter

3、使用路由模块来实现页面跳转的方式

方式1：直接修改地址栏
方式2：js
this.$router.push(‘路由地址’);
方式3：

this.$router.push、replace、go的区别

 1this.$router.push
 2//说明：跳转到指定URL，向history栈添加一个新的记录，点击后退会返回至上一个页面
 3this.$router.push('/index')
 4this.$router.push({path:'/index'})
 5this.$router.push({path:'/index',query:{name: '123'}})
 6this.$router.push({name:'index',params:{name:'123'}})
 7
 8this.$router.replace
 9// 说明：跳转到指定URL，替换history栈中最后一个记录，点击后退会返回至上上一个页面
10使用：同push
11
12this.$router.go(n)
13// 说明：类似window.history.go(n)，向前或向后跳转n个页面，n可正（先后跳转）可负（向前跳转）
14this.$router.go(1)    //类似history.forward() 
15this.$router.go(-1)   //类似history.back()

4、完成参数的传递

在页面之间跳转的时候，在有些场景下，需要同时指定参数

明确发送方和接收方 list --20--> detail

1.配置接收方的路由地址 /detail >> /detail/:index

1this.$route.params.index

2.发送

1routerLink to="/detail/20"
2this.$router.push('/detail/20')

5.跌幅嵌套

在一个路由中，path对应一个component，如果这个component需要根据

不同的url再加载其他的component，称之为路由的嵌套

举例：比如A组件现在需要根据不同的url，加载B组件或者C组件

给A组件指定一个容器
配置路由词典

1  {
2    path:'/a',
3    component:A,
4    children:[
5      {path:'/b',component:B}
6    ]
7  }

需求：现在有两个组件，分别是login/mail,建立SPA。在此基础上，希望mail组件嵌套inbox/outbox/draft

补充：在设置子路由，路由匹配规则依然是适用的，只不过路由地址为空和异常，要携带父组件的路由地址 /mail /mail/draft

11. 其他知识点

$nextTick的使用
vue响应式的改变一个值以后，此时的dom并不会立即更新，如果需要在数据改变以后立即通过dom做一些操作，可以使用$nextTick获得更新后的dom。

Vue 组件中 data 为什么必须是函数
javascipt只有函数构成作用域(注意理解作用域,只有函数的{}构成作用域,对象的{}以及 if(){}都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响

Vue2.js 重要知识点一览

文章目录

1.从 JQuery 库到Vue.js 框架

2.安装

3.基本指令

1、双花括号

2、指令-循环指令

3、指令-选择指令

4、指令-事件绑定

5、指令-属性绑定

6、指令-双向数据绑定

4. 组件化

1、组件的创建

2、组件使用

3、注意事项

5. 自定义指令

6.过滤器

1、过滤器的创建和使用

1.创建

2.使用

2、如何在调用过滤器时，完成参数的发送和接受

1.发送

2.接受

7. 生命周期

8. 常见属性

1、watch

2、computed

9. 组件间通信

1、父与子通信 （props down）

2、子与父通信 (events up)

3.ref(reference 引用/参考 外号)

4、$parent

5、兄弟组件通信

10. 路由

1、SPA的基本概念和工作原理

2、路由模块的基本使用

3、使用路由模块来实现页面跳转的方式

4、完成参数的传递

5.跌幅嵌套

11. 其他知识点

1、父与子通信（props down）

3.ref(reference 引用/参考外号)