Vue2.js 重要知识点一览

文章目录

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是计算属性

  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.发送

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 路由数组(路由词典)
  1. 引入vue.js vue-router.js

  2. 指定一个容器

  3. 创建业务所需要用到的组件类

1var MyLogin = Vue.component()
  1. 配置路由词典
 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 })
  1. 测试 修改地址栏中的路由地址,测试看加载的组件是否正确

注意事项:

  • 先引入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组件

  1. 给A组件指定一个容器

  2. 配置路由词典

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是一个函数时,每个组件实例都有自己的作用域,每个实例相互独立,不会相互影响