Vue2.js 重要知识点一览

calendar Jun 29, 2021 · 2 分钟 阅读 · vue frontend

1.从 JQuery 库到Vue.js 框架

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

2.安装

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

3.基本指令

1、双花括号
mustache(模板引擎)/interpolation（插值表达式）

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

2、指令-循环指令
基本语法1：

基本语法2：


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

3、指令-选择指令
语法：



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

4、指令-事件绑定
语法：

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

5、指令-属性绑定
基本语法：

补充，支持简写：

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


动态样式绑定

动态样式绑定


动态样式类绑定

动态样式类的绑定


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

基本语法:
<表单元素 v-model="变量">

4. 组件化

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

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

1、组件的创建
  全局组件: Vue.component(tagName, options) ，例如
Vue.component('my-component',{
  template:`
    
it is a header

  `
})
  局部组件: 可以在一个组件内部使用 components 选项做组件的局部注册，例如：
new Vue({
   components:{
     'my-footer':{
         template:''
     }
   }
})
或
import HelloWorld from './components/HelloWorld'

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

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

5. 自定义指令

创建和使用
Vue.directive('change',{
bind:function(el,bindings){
//首次调用
},
update:function(el,bindings){
//只要是有数据变化，都会调用
},
unbind:function(){
//解绑
}
})

6.过滤器

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

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

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

1、过滤器的创建和使用

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

2.使用
{{expression | myFilter}}

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

1.发送
{{expression | myFilter(参数1，参数2)}}

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

7. 生命周期

四个阶段：

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

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

8. 常见属性

1、watch
       1. 表单元素的双向数据绑定
   v-model="myValue"
   2.监听
    watch:{
    myValue:function(newValue,oldValue){
    
    }
    }
2、computed
    计算属于是用于在模板中，搞定复杂的业务逻辑，因为有依赖缓存。
    1.指定计算属性
        computed:{
          myHandle:function(){
           return 数据
          }
        }

    2.调用
        {{myHandle}}

computer、method和watch的区别

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

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

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

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

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

9. 组件间通信

1、父与子通信 （props down）
1).发送


2).接受
到son组件：
Vue.component('son',{
props:['myName'],
template:`

{{myName}}

`
})

2、子与父通信 (events up)
1).绑定
methods:{
handleEvent:function(msg){}
}

2).触发
子组件内部： this.$emit(‘customEvent’,100);、

3、ref(reference 引用/参考 外号)
帮助在父组件中 得到子组件中的数据、方法。
1).指定ref属性

2).根据ref得到子组件实例
this.$refs.mySon

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

5、兄弟组件通信
1).var bus = new Vue();
2).接收方
bus.$on('eventName',function(msg){})
3).发送方
bus.$emit('eventName',123);

10. 路由

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

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

SPA：single page application 单一页面应用程序，只有一个完整的页面；
它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。
工作原理：
1.解析地址栏 
    完整的页面地址、路由地址
2.根据路由地址 从路由词典中找到真正的要加载的页面
3.发起ajax请求 
    请求要加载的页面
4.像指定的容器中 插入加载来的页面

2、路由模块的基本使用

专业术语： 
    router路由器 
    route路由
    routes 路由数组（路由词典）
1.引入vue.js vue-router.js
2.指定一个容器

3.创建业务所需要用到的组件类
        var MyLogin = Vue.component()
4.配置路由词典
 const myRoutes = [
  {path:'',component:MyLogin},
  {path:'/login',component:MyLogin}
 ];

 const myRouter = new VueRouter({
  routes:myRoutes
 })

 new Vue({
   router:myRouter
 })
5.测试
    修改地址栏中的路由地址，测试看加载的组件是否正确

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

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

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

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

this.$router.push
说明：跳转到指定URL，向history栈添加一个新的记录，点击后退会返回至上一个页面
this.$router.push('/index')
this.$router.push({path:'/index'})
this.$router.push({path:'/index',query:{name: '123'}})
this.$router.push({name:'index',params:{name:'123'}})

this.$router.replace
说明：跳转到指定URL，替换history栈中最后一个记录，点击后退会返回至上上一个页面
使用：同push

this.$router.go(n)
说明：类似window.history.go(n)，向前或向后跳转n个页面，n可正（先后跳转）可负（向前跳转）
this.$router.go(1)    //类似history.forward() 
this.$router.go(-1)   //类似history.back()

4、完成参数的传递

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

1.明确发送方和接收方
list --20--> detail
1.配置接收方的路由地址
/detail >> /detail/:index
this.$route.params.index

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

5.跌幅嵌套

在一个路由中，path对应一个component，如果这个component需要根据
不同的url再加载其他的component，称之为路由的嵌套

举例：比如A组件现在需要根据不同的url，加载B组件或者C组件
1.给A组件指定一个容器
  
2.配置路由词典
  {
    path:'/a',
    component:A,
    children:[
      {path:'/b',component:B}
    ]
  }

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

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

11. 其他知识点

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

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

 

参考：https://www.cnblogs.com/qingshandaiyue/p/9052441.html