理理Vue细节(推荐)

 1. 动态属性名:可使用表达式来设置动态属性名或方法名:

<!-- 属性name -->
<a :[name]="url"> ... </a>
<!-- 计算属性sss和s -->
<img :[sss]="/img/test.png"/>
<!-- 方法change1和change2 -->
<img :[change1()]="change2()"/>

data: {
  name: 'href',
  sss: 'src'
}

注意:要避免空格和引号等,且需要小写,可使用计算属性来应对复杂表达式,都需要使用[]

2. computed/methods/watch

computed可使用get/set

 computed: {
    top() {
      return 'top'
    },
    name: {
      get () {
        return this.name
      },
      set (val) {
        this.name = val
      }
    }
  }

computed可缓存,但不可传参,会根据data中的属性变化而变化,即是根据响应式依赖来变化,而Date不是响应式依赖,即不会变化;method则每次都会进行计算,但可传参。

watch用于处理异步或开销较大的操作,如输入搜索时。

3. style绑定

  1. 直接对象或变量对象
  2. 计算属性
  3. 直接style或style对象
<!-- 属性名可加引号也可不加,属性小驼峰 -->
<div :style="{ 'color': 'red', fontSize: fontSize + 'px' }">样式3</div>
  1. 数组结合三目/数组结合对象
data: {
 isActive: true,
 activeClass: 'active'
}
<!-- 使用数组时变量和字符串需要通过引号来区分 -->
<div :class="[isActive ? activeClass : '', 'errorClass']"></div>
<!-- 使用对象时类名不加引号可表示变量也可表示字符串 -->
<div :class="[{ active: isActive }, 'errorClass']"></div>

 4. v-if条件渲染

可使用template包裹元素,template会被当成不可见的包裹元素

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

多条件判断

<div v-if="type === 'A'">
 A
</div>
<div v-else-if="type === 'B'">
 B
</div>
<div v-else-if="type === 'C'">
 C
</div>
<div v-else>
 Not A/B/C
</div>

5. key

添加key防止vue重复利用不想被重复利用的元素,如下的input如果不添加key,则vue会重复使用key,进而input的value值在切换后还会被保留,因为vue仅仅替换了placeholder

<template v-if="loginType === 'username'">
 <label>Username</label>
 <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
 <label>Email</label>
 <input placeholder="Enter your email address" key="email-input">
</template>

6. v-if和v-show

v-if是组件的销毁和重建,如果初始条件为false,则什么都不做,直到变为真,所以切换开销高,运行条件很少改变时适用
v-show是display:none和block之间的CSS切换,基于渲染,不管初始条件如何都会渲染,所以初始渲染开销高,切换频率高时适用

7. v-for

  1. 可使用in或者of
  2. 也可遍历对象:v-for="(value, key, index) in obj"
  3. 可根据template渲染多个组合元素:
<ul>
 <template v-for="item in items">
  <li>{{ item.msg }}</li>
  <li class="divider"></li>
 </template>
</ul>

8. v-for和v-if

v-for优先级更高,所以v-if会重复运行于每个v-for循环中,所以尽量不要一起使用,可先使用计算属性对数据进行过滤再遍历。

9. 更改响应式数据

  1. Vue.set(object, key, value)
  2. this.$set(object, key, value)
  3. this.items.splice(index, 1, newValue)
  4. 批量添加属性:
// 不要直接Object.assign(this.items, {age: 18}
this.items = Object.assign({}, this.items, {
 age: 18,
 favoriteColor: 'Vue Green'
})

10. 事件修饰符

  1. .passive:滚动的默认事件会立即出发,即告诉浏览器不想阻止默认事件的触发,可提升移动端性能
<div :scroll.passive="onScroll">...</div>
  1. .capture:添加事件监听器时使用事件捕获模式,即元素自身触发的事件先在此处理,然后才交由内部元素进行处理
  2. .self:只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的
  3. .once:点击事件只会触发一次
  4. 键盘修饰符:<input v-on:keyup.enter="submit">

11. v-model

选择框

<!-- 单选框时,picked为字符串 "a",不是布尔值 -->
<input type="radio" value="a" v-model="picked">

<!-- 多选框时,toggle默认值设为字符串或布尔值时得到布尔值,设为数组时得到的是value值-->
<input type="checkbox" value="b" v-model="toggle">

<!-- 当选中第一个选项时,selected为字符串value的值 "abc" -->
<select v-model="selected">
 <option value="abc">ABC</option>
</select>

修饰符.lazy:在change时而非input时更新 <input v-model.lazy="msg" >

注:change事件是在input失去焦点时触发,即用于单选、多选框和选择框,而input事件是在value值变化时触发,但脚本改变value值时不会触发,即用于text和textarea

修饰符.number:输入值转为数值

修饰符.trim:过滤收尾空白字符

12. Prop

使用v-bind="obj"会将对象的每个属性都作为一个独立的prop传入进去,所以接受时也需要逐个属性接收。

<test v-bind="obj"></test>

props虽然是单向数据流,但对于引用类型,子组件还是可以改变父组件的状态。

props会在组件实例创建之前进行验证,所以实例的属性再default或validator中是不可用的。

13. 自定义事件

自定义事件需要注意事件名为小写或-分隔,因为$emit('BaseEvent')虽然事件名不会变,但在html中该事件名会被转化为小写,不会监听到。

14. slot

具名插槽

<base-layout>
 <template v-slot:header>
  <h1>Here might be a page title</h1>
 </template>
<!-- 默认插槽也可不用加上template和v-slot -->
 <template v-slot:default>
  <p>A paragraph for the main content.</p>
  <p>And another one.</p>
 </template>
 <template v-slot:footer>
  <p>Here's some contact info</p>
 </template>
</base-layout>

作用域插槽

<!-- current-user组件 -->
<span>
 <slot :user="user">
  {{ user.lastName }}
 </slot>
</span>

<!-- 父级组件通过自定义名称访问子级作用域 -->
<current-user>
 <template v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
 </template>
</current-user>

<!-- 支持缩写和解构 -->
<current-user>
 <template #default="{ user = { firstName: Gust } }">
  {{ user.firstName }}
 </template>
</current-user>

15. 组件通信

  1. vuex/eventBus
  2. prop/$emit
  3. $children/$parent
  4. provide/inject
  5. $refs
// 父或祖先级
provide: function () {
 return {
  getMap: this.getMap
 }
}

// 后代级
inject: ['getMap']

 16. scope

scoped 属性会自动添加一个唯一的属性 (比如 data-v-21e5b78) 为组件内 CSS 指定作用域,编译的时候 .list-container:hover 会被编译成类似 .list-container[data-v-21e5b78]:hover

17. 路由

区分:this.$router指路由器,this.$route指当前路由

通配符:捕获所有路由或 404 Not found路由

 // 含通配符的路由都要放在最后,因为优先级由定义顺序决定
{
 // 会匹配所有路径
 path: '*'
}
{
 // 会匹配以 `/user-` 开头的任意路径
 path: '/user-*'
}

当使用一个通配符时,$route.params内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分:

// 给出一个路由 { path: '/user-*' }
this.$router.push('/user-admin')
this.$route.params.pathMatch // 'admin'
// 给出一个路由 { path: '*' }
this.$router.push('/non-existing')
this.$route.params.pathMatch // '/non-existing'

点击 <router-link :to="..."> 等同于调用 router.push(...)方法,因为<router-link>会在内部调用该方法,进而在history栈添加一个新的记录

使用了push时,如果提供的path不完整,则params会被忽略,需要提供路由的 name 或手写完整的带有参数的 path:

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` })     // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

router.push/router.replace/router.go 效仿于 window.history.pushState/window.history.replaceState/window.history.go

命名视图:router-view可设置名字,如果router-view没有设置名字,那么默认为 default

<router-view></router-view>
<router-view name="a"></router-view>
<router-view name="b"></router-view>

const router = new VueRouter({
 routes: [
  {
   path: '/',
   components: {
    default: Foo,
    a: Bar,
    b: Baz
   }
  }
 ]
})

路由使用props:可将路由参数设置为组件属性

const User = {
 props: ['id'],
 template: '<div>User {{ id }}</div>'
}
// 通过布尔值设置
const router = new VueRouter({
 routes: [
  { path: '/user/:id', component: User, props: true },

  // 对于包含命名视图的路由,你必须分别为每个命名视图添加 `props` 选项:
  {
   path: '/user/:id',
   components: { default: User, sidebar: Sidebar },
   props: { default: true, sidebar: false }
  }
 ]
})

// 通过函数设置query
// URL /search?q=vue 会将 {name: 'vue'} 作为属性传递给 SearchUser 组件
const router = new VueRouter({
 routes: [
  { path: '/search', component: SearchUser, props: (route) => ({ name: route.query.q }) }
 ]
})

beforeRouteEnter:可使用beforeRouteEnter来提前获取接口数据,同时需要在next后才能访问到实例:

beforeRouteEnter(to, from, next) {
 axios('/text.json').then(res => {
  next(vm => {
   vm.datas = res
  })
 })
}

路由设置有参数时,如果跳转页面后再通过返回键返回时,路由会保留有参数,如果通过push跳转返回,则不会保留该参数,这在第三方调用模块传参时需要注意。

18. loader

Vue Loader编译单文件的template块时,会将所有遇到的URL资源转为webpack模块请求:

// <img src="../image.png">将会被编译成为:
createElement('img', {
 attrs: {
  src: require('../image.png') // 现在这是一个模块的请求了
 }
})

资源URL转换规则

  1. 如果是绝对路径,例如 /images/foo.png),则会原样保留。
  2. 如果路径以.开头,将会被看作相对的模块依赖,并按照你的本地文件系统上的目录结构进行解析。
  3. 如果路径以~开头,其后的部分将会被看作模块依赖。
  4. 如果路径以 @ 开头,也会被看作模块依赖。

以上所述是小编给大家介绍的Vue细节详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • vue打包相关细节整理(小结)

    项目在dev环境下运行没有问题,打包之后就各种报错一下来整理一下遇到的问题 1.打包好的网页无法访问static目录的资源 原因是下载官方的cli时,默认设置是根据绝对路径来定位资源目录的,这样就非常方便在dev环境下进行本地调试,但是在打包部署之后,就需要通过相对路径来访问静态资源了,修改方法很简单,在config/index.js文件文件中,定位到 把assetsPublicPath的value改成'./',修改之后,打包生成的文件,对资源的引用路径会在路径前面加上'./',这样就可以找到对

  • 详解VUE 定义全局变量的几种实现方式

    最近在学习VUE.js 中间涉及到JS全局变量,与其说是VUE的全局变量,不如说是模块化JS开发的全局变量. 1.全局变量专用模块 就是以一个特定模块来组织管理这些全局量,需要引用的地方导入该模块便好. 全局变量专用模块 Global.vue <script type="text/javascript"> const colorList = [ '#F9F900', '#6FB7B7', '#9999CC', '#B766AD', '#B87070', '#FF8F59'

  • 详解Vue 动态添加模板的几种方法

    以下方法只适用于 Vue1.0 版本,推荐系数由高到低排列. 通常我们会在组件里的 template 属性定义模板,或者是在 *.vue 文件里的 template 标签里写模板.但是有时候会需要动态生成模板的需求,例如让用户自定义组件模板,或者设置组件的布局. 例如要做一个类 select 的组件,用户传入 options 数据,通过 value prop 获取选中值,最基本的原型如下. Vue.component('XSelect', { template: ` <div class="

  • 详解VueJs前后端分离跨域问题

    使用vue-cli搭建的vue项目 可以使用在项目内设置代理(proxyTable)的方式来解决跨域问题 设置配置项的目录在config下的index.js,主要通过配置proxyTable项,设置代理指向你的后台地址 dev: { env: require('./dev.env'), port: 8085, autoOpenBrowser: true, assetsSubDirectory: 'static', assetsPublicPath: '/', proxyTable: { '/ag

  • vue学习笔记之指令v-text && v-html && v-bind详解

    一 : 指令的概念: 指令是vue自定义的以v-开头的自定义属性.每个不同的属性都有各自不同的意义和功能 二 : 指令的语法: v-指令名 = "表达式判断或者是业务模型中属性名或者事件名" 三 : 具体指令 1. v-text 作用 : 操作元素中的纯文本 快捷方式 : {{}} 栗子1 简写形式:将v-text=""换成{{}} <div id="app"> {{ message }} </div> var app =

  • Vue 进阶教程之v-model详解

    Vue 官网教程上关于 v-model 的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下, 并介绍 Vue 2.2  v-model改进的地方,然后穿插的再说点 Vue 的小知识. 在 Vue 中,有许多方法和 Angular 相似,这主要是因为 Angular 是 Vue 早期开发的灵感来源.然而,Augular 中存在许多问题,在 Vue 中已经得到解决. v-model 用在 input 元素上时 v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model,但

  • 深入理解vue中的$set

    在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新.如下代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue $set</title> <scri

  • vue 组件使用中的一些细节点

    细节一 基础例子 运行结果: 以上大家都懂,这边就不多说,回到代码里,有时候我们需要 tbody 里面每一行是一个子组件,那我们代码可以怎么写呢?我们可以这样写,定义一个全局组件,如下: 然后我们在 body 里面可以这么调用: 运行结果: 可以看到 row 是有打印出来了,但它实际上里面没有任务内容,那我们的问题出在哪呢?回到代码我们发现我们在创建 vue 实例的时候没有指定要挂载的点,所以我们通过 el 来指定 vue 接管的 Dom ,如下: 运行结果: 感觉上没有问题,但真的是这样吗?我

  • 如何在 Vue.js 中使用第三方js库

    在诸多 Vue.js 应用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 库. 但随着项目越来越复杂, 可能会采取组件化和模块化的方式来组织代码, 还可能要使应用支持不同环境下的服务端渲染. 除非你找到了一个简单而又健壮的方式来引入这些库供不同的组件和模块使用, 不然, 这些第三方库的管理会给你带来一些麻烦. 本文将介绍一些在 Vue.js 中使用第三方库的方式. 全局变量 在项目中添加第三方库的最简单方式是讲其作为一个全局变量, 挂载到

  • Vue.js中兄弟组件之间互相传值实例

    兄弟组件之间互相传值,需要建立一个"中转站"(新的vue实例),并且需要主动触发. 实例上的$on方法来接受监听. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件传值</title> <script src="vue.js"></script

随机推荐