VUE相关知识总结

2018-11-13  本文已影响0人  猫晓封浪

Vue.js特性：渐进式技术栈

  1. 轻量级的框架
  2. 双向数据绑定
  3. 指令
  4. 插件化

Vue实例书写模板：

new Vue({
  el: '#app',
  template: '<h1>hello {{msg}}</h1>',
  data: {
    msg: 'world'
  }
})

生命周期钩子

有很多，具体查看官方文档，经常使用的有：

用法/插值表达式

{{}}中还可以使用 JS 表达式进行简单的运算或三元运算
注：文本插值的形式，其中不能书写表达式，支持单个表达式（var a=6; 是多行表达式，var a; a=6;）,不能使用流控制（如：if 等，使用三元运算符）

过滤器（使用管道符‘|’）

语法：{{ data | filter1 | filter2 }} （可以多次过滤）
用于格式化文本（字母大小写，货币位号符，时间等）
注：还可以传参 {{ data | formatData(a,b) }} 其中第一个参数和第二个参数，分别对应实例中过滤器的第二、三个参数，实例中的第一个参数必须是 data 中数据（ Vue 实例的 filter 属性）

指令和事件：快速完成 DOM 操作、循环渲染、显示和隐藏

Vue 中用到的所有方法都定义到 methods 中

语法糖

在不影响功能的前提下，使用简洁方法实现同样效果
v-bind: ====> : （冒号）
v-on: ====> @

计算属性

小技巧：

  1. 计算属性可以依赖其它计算属性
  2. 不仅可以依赖当前 Vue 实例，还可以依赖其它 Vue 实例

计算属性依赖缓存，当遍历大数组和做大量计算时，应当使用计算属性

v-bind绑定class和style

Vue.js内置指令

基本指令
条件渲染指令
<p v-if='6>3'>1</p>
<p v-else-if='3<6'>2</p>
<p v-else>3</p>
//此时页面显示1

注：当 Vue 在渲染页面时，出于效率考虑，会服用已有元素，只会渲染了变化的元素
解决方法：加 key ，唯一。提供 key 值决定是否复用该元素
Vue检测不到数组的变动：1. 改变数组指定项 Vue.set( app.arr, 1, "car") 2. 改变数组长度 app.arr.splice(1)

方法和事件

如果方法中带有参数，调用没加括号，默认传入原生事件 event
所以：方法中有参数时，调用加括号

修饰符

监听键盘事件 @key.13='' ===> 指定的 keyCode

v-model：用于表单类元素上双向绑定事件

input 和 textarea
注：所显示的值只依赖于所绑定的数据，不再关心初始化时的 value

总结：

修饰符

组件

作用：提高代码复用性（挂载都用变量名标签）

  1. 全局注册：优点：所有实例都可以用；缺点：权限大，容错率低
Vue.component('变量',{
 template: '组件'
})
  1. 局部注册：在 Vue 实例中定义
new Vue({
  el: '#app',
  components: {
    '变量名': {
      template: '组件'
    }
  }
})
  1. Vue 组件模板在某些 html 标签中受限，如：<table> 
<table><tbody is='变量名'></tbody></table>

注意：1. 必须使用小写字母加 ‘-’ 形式命名；2. template 中内容必须被一个 DOM 元素包裹，可嵌套；3. 在组件定义中，除了 template ，还可以有 data、computed、methods；4. 其中 data 在组件中必须是一个方法

父组件向子组件传递数据

  1. 在子组件中使用 props 从父组件接收参数。注：在 props 定义的属性，都可以在组件中直接使用
  2. props 来自父组件，而组件中 data return 的数据是子组件自己的，作用域是组件本身，可以在 template、computed、methods使用
  3. props 的值有两种：一种是字符串数组；一种是对象
  4. 可以使用 v-bind 动态绑定父组件内容
    v-bind 使用与否向子组件传递数据区别：使用 v-bind：会将后边内容转化为可转化的类型；不使用 v-bind：传递数据时，默认字符串

单向数据流：通过 props 传递数据单向，子传父不行

目的：解耦。避免子组件修改父组件状态
两种情景：

命名规则：Vue中使用驼峰

  1. 在组件中的 html 必须使用短横线命名
  2. 在组件中，父组件给子组件数据，必须短横线。在 template 中，必须使用驼峰命名
  3. 在组件中的 data 中，用 this.xxx 引用时，只能是驼峰命名

子组件给父组件传递数据

子组件通过 $emit() 发布订阅模式，父组件订阅该模式：$emit('fn',参数1) 参数1传入父组件函数
$emit() 的代码 实际上会传一个 input 事件， input 后的参数就是传递给 v-model 绑定的属性值
v-model其实是一个语法糖：1. v-bind 绑定一个 value 元素；2. v-on 指令给当前元素绑定 input 事件
要使用 v-model 必须：1. 接收一个 value 属性；2. 在有新的 value 触发 input 事件

非父组件通信：可以使用一个空 Vue 实例作为中转

父： var bus=new Vue()
子A： bus.$emit('变量名',x) 触发A事件
子B： bus.$on('变量名',function(){}) 子B创建的钩子监听

父链：this.$parent
子链：通过给子组件添加 ref 属性增加索引 ref='a' 。this.$refs.c

自定义指令

与组件相同，分为全局注册和局部注册（组件中使用 directives ）

提供的钩子函数：

钩子函数的参数：

render函数

template 可以在 DOM 结构中的 <script> 内，在 JS 文件中 component 使用 template: '#id' 引入。 注： template 下只允许有一个子节点

//createElement函数的三个参数
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签字符串，组件选项对象，或者
  // 解析上述任何一种的一个 async 异步函数。必需参数。
  'div',

  // {Object}
  // 一个包含模板相关属性的数据对象
  // 你可以在 template 中使用这些特性。可选参数。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选参数。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

this.$slots在render函数中

注意：render函数中第二个参数，绑定监听事件时

return createElement('input',{
  on:{
    input:function(event){
      var a=this //此时的this指的是window
    }
  }
})

所以要在 render 函数中指定 Vue 实例，如：

render:function(createElement){
  var self=this //此时的 this 就是 Vue 实例
}

作用域插槽在 render 函数

scope 最好写在 template 标签
scope 后边是 render 函数传来的数据

return createElement('div',this.$scopedSlots.default({
  text:'我是子组件数据' // scope后的数据
}))

函数化组件

标记组件为 functional，当该值为 true 时，意味它是无状态 (没有响应式数据)，无实例 (没有 this 上下文)。
此时， context 转变，作为 render 函数的第二个参数，this.$slots.default 更新为 context.children，之后 this.level 更新为 context.props.level 。

vue-router

  1. 安装 npm install --save vue-router
  2. 引用 import router from 'vue-router' 使用 Vue.use(router)
  3. 配置路由文件，在 Vue 实例中注入
//配置路由文件
new Vue({
  router : [{
    path : '/', //跳转路径
    component : //跳转组件
  }]
})

//在 Vue 实例中注入
new Vue({
  el : '#app',
  router : router,
  component : { App },
  template : '<App></App>'
})
  1. 确定视图加载位置 <router-view></router-view>

vue-router 路由跳转

<router-link to='/'><router-link>

vue-router 传参数

  1. 必须在路由内添加路由的 name
  2. 必须在 path 后添加 :/+传递的参数（配置路由文件）
<router-link :to="{
  name : xxx,
  params : { msg: yyy }
}"></router-link>

读取参数： $route.params.xxx
方式：====/helloworld/xxx

<router-link :to="{
  path : '/helloworld',
  query : { msg: yyy }
}"></router-link>

方式：====/helloworld?name=xxx&msg=yyy （不常用）

Axios

  1. 安装 npm install axios
  2. 引入加载 import axios from 'axios'
  3. 将 axios 全局挂载到 Vue 原型 import Vue from 'vue' Vue.prototype.$http=axios
  4. 发请求 this.$http.get('xxx').then(function(res){}).catch(function(err){console.log(err)})

两种传参形式：

Axios之POST

post 传递数据两种格式：

在 axios 中， post 请求接收的参数必须是 form-data
qs 插件------- qs.stringify

Vuex之store

用来管理状态，共享数据，在各个组件之间管理外部状态

  1. 引入 Vuex ，并 use 方法使用
  2. 创建状态仓库（store，state不能改）
var store=new Vuex.Store({
  state:{xxx:xxx},//状态
  mutations:{}
})
  1. 直接通过 this.$store.state.xxx 拿到全局状态

Vuex相关操作

View ====> actions（非必须，可添加异步）====> mutations ====> state ====> View

注意： actions 提交的是 mutations ，而不是直接变更状态； actions 可以包含异步操作，但 mutation 只能同步操作

mixin

优先使用组件本身的属性

上一篇 下一篇

猜你喜欢

热点阅读