vue散碎知识点学习

老梁

发布于 2019-09-10 18:41:41

2K0

发布于 2019-09-10 18:41:41

文章被收录于专栏：Java工程师成长之路Java工程师成长之路

1. vue散碎知识点学习

1.1. 特点

数据渲染/数据同步
组件化/模块化
其他功能路由，ajax，数据流

1.2. Vue.js学习资源

vuejs中文官网：http://cn.vuejs.org
vuejs源码：https://github.com/vuejs/vue
vuejs官方工具：https://github.com/vuejs

1.3. Vue实例对象

var my = new Vue({
    el: '#app',
    template: '<div>{{}}</div>',
    data:{
        fruit: 'apple'
    }
})

1.4. 绑定事件

//绑定键盘按下enter事件
v-on:keydown.enter=""

v-on缩写@

:class="{odd:index%2}" 判断odd什么时候需要显示出来

v-bind:缩写:

//修改数组
Vue.set(this.list, 1, {
    name: 'pinaapple',
    price: 256
})

this.$emit("xxx") 子组件提交事件，父组件可以监听 

watch：{

}
用来监听数据变化

1.5. 父子组件

子组件调用父方法

父组件 @my-event="getMyEvent"绑定方法 监听事件
子组件 触发方法，传入参数
methods: {
    emitMyEvent(){
      this.$emit('my-event', this.hello)
    }
}

父组件调用子方法
父组件
componentA number='12' @my-event="getMyEvent">
      <p slot="header">header</p>//插槽
      <p slot="footer">footer</p>
    </componentA>

子组件
<div>{{number}}</div>
<slot name="header">no header</slot>
<slot name="footer">no footer</slot>

props: {
    number:[Number,String]
}

动态绑定组件
<p :is="currentView"></p>

import ComA from './components/a'
components: {
    ComA
},
data:{
    currentView: 'com-a'
}

1.6. 缓存

<keep-alive></keep-alvie>包裹

1.7. 元素过度

相同元素key区分
transition动画

1.8. 工具推荐

MobaXterm是ssh,ftp工具，https://mobaxterm.mobatek.net/
FinalShell，可用于mac，http://www.hostbuf.com

1.9. 路由

在路径加参数可以在路由到的组件拿到

main.js
routes: [
    {
      path: '/apple/:color',
      component: Apple
    },{
      path: '/banana',
      component: Banana
    }
  ]

Apple.vue
methods: {
      getParams(){
          console.log(this.$route.params)
      }
  }

1.10. vue实例

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

<span v-once>这个将不会改变: {{ msg }}</span>

v-bind缩写
    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>

    <!-- 缩写 -->
    <a :href="url">...</a>

v-on缩写
    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>

    <!-- 缩写 -->
    <a @click="doSomething">...</a>

1.11. 计算属性vs侦听属性

https://cn.vuejs.org/v2/guide/computed.html

不要滥用watch，有时候可以用computed代替

1.12. class与Style绑定

1.12.1. 对象语法

<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness。

1.12.2. 数组语法

<div v-bind:class="[activeClass, errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染为：
<div class="active text-danger"></div>

可以用三元表达式
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

1.13. 条件渲染

https://cn.vuejs.org/v2/guide/conditional.html

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no ?</h1>

<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>

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

两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder

Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可

<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>

1.14. 数组更新检测

1.14.1. 变异方法

Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

1.14.2. 注意事项

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，你可以使用 splice：
vm.items.splice(newLength)

1.15. 显示过滤/排序结果

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

1.16. 事件修饰符

为了解决方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

.stop
.prevent
.capture
.self
.once
.passive

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

1.17. 系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。（在 Mac 系统键盘上，meta 对应 command 键 (⌘)）

.ctrl
.alt
.shift
.meta

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

鼠标按钮修饰符

.left
.right
.middle

1.18. 表单输入绑定

1.18.1. .lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

1.18.2. .number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

<input v-model.number="age" type="number">

1.18.3. .trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

<input v-model.trim="msg">

1.19. 自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

<input v-focus>

1.20. 对象字面量

https://cn.vuejs.org/v2/guide/custom-directive.html

如果指令需要多个值，可以传入一个 JavaScript 对象字面量。记住，指令函数能够接受所有合法的 JavaScript 表达式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

1.21. 过滤器

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

可以串联
{{ message | filterA | filterB }}

可以接收参数：
{{ message | filterA('arg1', arg2) }}

1.22. 工具

json-server
cnpm install json-server --save

1.23. 注意

记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019-05-22 ，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度