理理Vue细节(推荐)


Posted in Javascript onApril 16, 2019

 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细节详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js模拟弹出效果代码修正版
Aug 07 Javascript
原生js操作checkbox用document.getElementById实现
Oct 12 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
使用p5.js临摹动态图形
Oct 23 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 #Javascript
js实现删除li标签一行内容
Apr 16 #Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 #Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
Apr 15 #Javascript
你不知道的Vue技巧之--开发一个可以通过方法调用的组件(推荐)
Apr 15 #Javascript
详解JavaScript中的强制类型转换
Apr 15 #Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 #Javascript
You might like
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
mod_php、FastCGI、PHP-FPM等PHP运行方式对比
2015/07/02 PHP
PHP比较运算符的详细介绍
2015/09/29 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP链表操作简单示例
2016/10/15 PHP
php实现算术验证码功能
2018/12/05 PHP
laravel框架学习笔记之组件化开发实现方法
2020/02/01 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
JavaScript经典效果集锦
2010/07/06 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
javascript页面加载完执行事件代码
2014/02/11 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
js实现延时加载Flash的方法
2015/11/26 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
JavaScript正则获取地址栏中参数的方法
2017/03/02 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
JavaScript实现网页留言板功能
2020/11/23 Javascript
Python中shutil模块的学习笔记教程
2017/04/04 Python
在Python中调用Ping命令,批量IP的方法
2019/01/26 Python
Python Tkinter 简单登录界面的实现
2019/06/14 Python
CSS3实现网站商品展示效果图
2020/01/18 HTML / CSS
CSS3 文字动画效果
2020/11/12 HTML / CSS
初始化了一个没有run()方法的线程类,是否会出错?
2014/03/27 面试题
2014三八妇女节活动总结
2014/03/01 职场文书
护士找工作求职信
2014/07/02 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
工作年限证明模板
2015/06/15 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS