Vue 知识点汇总__Vue.js
发布于 4 年前 作者 banyungong 1735 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

1.Hello Vue
创建我们的第一个Vue程序

安装

<div id="app"></div>

const  initApp = new Vue({
  el:'#app', 
  data: { 
    title: 'Hello, Vue' 
  }
})

setTimeout(()=> {
  initApp.title =  'Hello, Word'
},1500) 
2.理解Vue的设计思想
Vue的设计思想就是 数据驱动视图,降低开发频繁去手动更新dom节点,从而达到开发的专一度,
只需要完成数据的合理管控。MVVM的思想也就是model + view + view-model, vm也就是数据与视图更新的桥梁。

3.模版语法

Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 HTML 解析器解析
插值文本
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

范例:设置标题
<template>
  <div class="home">
    <h2> {{ title }} </h2>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      title: '复习课程'
    }
  }
}
</script>

// HTML特性不能用Mustache 语法,应该使用v-bind指令
<div id="app"> 
<!-- 特性、属性值绑定使用v-bind指令 --> 
<h2 v-bind:title="title">...</h2> 
</div>
列表渲染
我们可以用 v-for 指令基于一个数组来渲染一个列表。 
v-for 指令需要使用 item in items 形式的特殊语法,其中 items 是源数据数组,而 item 则是被迭代的数组元素的别名
<template>
  <div class="home">
    <h2> {{ title }} </h2>
    <div class="my-dream-list">
      <div class="item" v-for="item in dreamList"  :key="item"> {{ item }} </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      title: '复习课程',
      dreamList: ['1.抬起头做人','2.低下头做鬼','3.侧着头做爸爸']
    }
  }
}
</script>

表单输入绑定
<input placeholder="新的梦想"  v-model="newDream"/>    
<div  class="new-dream"> {{newDream}} </div>
事件处理
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
<template>
  <div class="home">
    <h2> {{ title }} </h2>
    <div class="my-dream-list">
      <div class="item" v-for="item in dreamList"  :key="item"> {{ item }} </div>
    </div>
    <input placeholder="新的梦想"  v-model="newDream"/>
    <div class="new-dream"> {{newDream}} </div>
    <button @click.stop="addNewDream">点击新增</button>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      title: '复习课程',
      dreamList: ['1.抬起头做人','2.低下头做鬼','3.侧着头做爸爸'],
      newDream: ''
    }
  },
  methods: {
    addNewDream(){
      if(this.newDream){
        this.dreamList.push(`${this.dreamList.length + 1}${this.newDream}`)
        this.newDream = ''
      }
    }
  }
}
</script>

class与style绑定
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。
因为它们都是属性,所以我们可以用 v- bind 处理它们:只需要通过表达式计算出字符串结果即可。
不过,字符串拼接麻烦且易错。因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强。
表达式结果的类型除了字符串之外,还可以是对象或数组。

依赖于  v-bind,v-bind 存在三个关键字
.prop 作为一个 DOM property 绑定而不是作为 attribute 绑定
.camel - (2.1.0+) 将 kebab-case attribute 名转换为 camelCase。(从 2.1.0 开始支持)
.sync (2.3.0+) 语法糖,会扩展成一个更新父组件绑定值的 v-on 侦听器。
计算属性与侦听器
模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。
在模板中放入太多的逻辑会让模板过重且难以维护,此时就可以考虑计算属性和监听器。

两个都是监测变更,然后更新,选择场景如何划分:

1.监听器更通用,理论上计算属性能实现的侦听器也能实现
2.处理数据的场景不同,监听器适合一个数据影响多个数据,计算属性适合一个数据受多个数据影响
3.计算属性有缓存性,计算所得的值如果没有变化不会重复执行监听器适合执行异步操作或较大开销操作的情况

结论:计算属性实现不了的,采用监听器

5.生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 
并在数据变化时更新 DOM 等,称为Vue实例的生命周期。
Vue实例的生命周期过程中会调用一些钩子函数,这些钩子函数提供给开发者在不同阶段做业务处理

beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated
beforeDestroy destroyed errorCaptured

初始化过程调用顺序 beforeCreate --》created --》beforeMount --》mounted
更新过程调用顺序 beforeUpdate --》 updated
ps:父子更新过程 父beforeUpdate --》 子beforeUpdate --》 子updated --》父updated
销毁过程 beforeDestroy --》 destroyed
特殊点:
1.activated keep-alive 缓存组建激活时,出发此钩子函数,可以进行捕获判断是否更新数据
2.deactivated 组建停用时调用 
3.当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

keep-alive 可主要使用与例如转厂动画业务的处理,状态可预期的返回,采用缓存提升体验

6.组件基础

1.独立模块切分
2.组件的复用,类似于早期采用模版渲染时期的公共模版,不同的数据来源,但交与与ui具有通用性

组件中的data必须是一个函数
这就是在组件复用的时候,达到一个独立的数据依赖,等同于工厂模式的开发模式
插槽分发
slot在封装组件中,可以达到一定的自定义设计,提升灵活性
slot注意的一点就是数据的传递,子传递父渲染
```
<template slot="slotName" slot-scope="slotChi">
	<p>{{slotChi.msg}}</p>
</temlate>

// children
<slot name="slotName" :msg="msg">{{msg}}</slot>
```
动态组件
常常在需要切分不同业务场景下,加载不同组件时候的拆分,这里可以长采用require的方式,比面渠道业务代码的冗余加载
<component v-bind:is="currentTabComponent"></component>


computed:{
    currentTabComponent(){
      return this.showStatus ? 'KeepOne' : 'KeepTwo'
   }
 }
组件化理解
定义:组件是可复用的 Vue 实例,准确讲它们是VueComponent的实例,继承自Vue。
优点:从上面案例可以看出组件化可以增加代码的复用性、可维护性和可测试性。
使用场景:什么时候使用组件?以下分类可作为参考:
通用组件:实现最基本的功能,具有通用性、复用性,例如按钮组件、输入框组件、布局组件等。
业务组件:它们完成具体业务,具有一定的复用性,例如登录组件、轮播图组件。
页面组件:组织应用各部分独立内容,需要时在不同页面组件间切换,例如列表页、详情页组件
如何使用组件
	1.定义:Vue.component(),components选项,sfc
	2.分类:有状态组件,functional,abstract
	3.通信:props,$emit()/$on(),provide/inject$children/$parent/$root/$attrs/$listeners
	4.内容分发:<slot>,<template>,v-slot
	5.使用及优化:is,keep-alive,异步组件

*组件配置 => VueComponent实例 => render() => Virtual DOM=> DOM*

7.动画

Vue 提供了 transition 的封装组件,在下列情形中,可以给任何元素和组件添加进入/离开过渡
1.条件渲染 (使用 v-if)
2.条件展示 (使用 v-show)
3.动态组件
4.组件根节点

8.可复用性与组合

minxin,抽离组件内可复用内容,可以包含任意组件选项,minxins 引入时,做extend合并,直接放一个官网案例
var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

9.封装组件

组件封装后,对于多个项目的复用率会大大提升,直接放index.js
import Pagination from '../packages/pagination/index.js';
import Dialog from '../packages/dialog/index.js';
import Autocomplete from '../packages/autocomplete/index.js';

const components = [
  Pagination,
  Dialog,
  Autocomplete,
 ]
 const install = function(Vue, opts = {}) {
 
  components.forEach(component => {
    Vue.component(component.name, component);
  });
};



/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}


export default {
  version: '2.13.2',
  install,  
  Pagination,
  Dialog,
  Autocomplete,
 }
 

入口全局引用,Vue.use 就是在调用 install 方法,如果在组件中按需引入
则是利用components 注册组件实例

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 流清浪 原文链接:https://juejin.im/post/6870315059189383176

回到顶部