vue散碎知识点学习

迷南。 2022-01-28 08:45 316阅读 0赞

# 1. vue散碎知识点学习 #

## 1.1. 特点 ##

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

## 1.2. Vue.js学习资源 ##

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

## 1.3. Vue实例对象 ##

1.  `var my = new Vue({`
2.  `el: '#app',`
3.  `template: '<div>{ {}}</div>',`
4.  `data:{`
5.  `fruit: 'apple'`
6.  `}`
7.  `})`

## 1.4. 绑定事件 ##

1.  `//绑定键盘按下enter事件`
2.  `v-on:keydown.enter=""`
3.   
4.  `v-on缩写@`
5.   
6.  `:class="{odd:index%2}" 判断odd什么时候需要显示出来`
7.   
8.  `v-bind:缩写:`
9.   
10. `//修改数组`
11. `Vue.set(this.list, 1, {`
12. `name: 'pinaapple',`
13. `price: 256`
14. `})`
15.  
16. `this.$emit("xxx") 子组件提交事件，父组件可以监听`
17.  
18. `watch：{`
19.  
20. `}`
21. `用来监听数据变化`

## 1.5. 父子组件 ##

1.  `子组件调用父方法`
2.   
3.  `父组件 @my-event="getMyEvent"绑定方法 监听事件`
4.  `子组件 触发方法，传入参数`
5.  `methods: {`
6.  `emitMyEvent(){`
7.  `this.$emit('my-event', this.hello)`
8.  `}`
9.  `}`
10.  
11. `父组件调用子方法`
12. `父组件`
13. `componentA number='12' @my-event="getMyEvent">`
14. `<p slot="header">header</p>//插槽`
15. `<p slot="footer">footer</p>`
16. `</componentA>`
17.  
18. `子组件`
19. `<div>{ {number}}</div>`
20. `<slot name="header">no header</slot>`
21. `<slot name="footer">no footer</slot>`
22.  
23. `props: {`
24. `number:[Number,String]`
25. `}`
26.  
27. `动态绑定组件`
28. `<p :is="currentView"></p>`
29.  
30. `import ComA from './components/a'`
31. `components: {`
32. `ComA`
33. `},`
34. `data:{`
35. `currentView: 'com-a'`
36. `}`
37.

## 1.6. 缓存 ##

1.  `<keep-alive></keep-alvie>包裹`

## 1.7. 元素过度 ##

1.  相同元素key区分
2.  transition动画

## 1.8. 工具推荐 ##

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

## 1.9. 路由 ##

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

1.  `main.js`
2.  `routes: [`
3.  `{`
4.  `path: '/apple/:color',`
5.  `component: Apple`
6.  `},{`
7.  `path: '/banana',`
8.  `component: Banana`
9.  `}`
10. `]`
11.  
12. `Apple.vue`
13. `methods: {`
14. `getParams(){`
15. `console.log(this.$route.params)`
16. `}`
17. `}`

## 1.10. vue实例 ##

1.  `// $watch 是一个实例方法`
2.  `vm.$watch('a', function (newValue, oldValue) {`
3.  ``// 这个回调将在 `vm.a` 改变后调用``
4.  `})`
5.   
6.  `<span v-once>这个将不会改变: { { msg }}</span>`
7.   
8.  `v-bind缩写`
9.  ``
10. `<a v-bind:href="url">...</a>`
11.  
12. ``
13. `<a :href="url">...</a>`
14.  
15. `v-on缩写`
16. ``
17. `<a v-on:click="doSomething">...</a>`
18.  
19. ``
20. `<a @click="doSomething">...</a>`

## 1.11. 计算属性vs侦听属性 ##

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

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

## 1.12. class与Style绑定 ##

### 1.12.1. 对象语法 ###

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

### 1.12.2. 数组语法 ###

1.  `<div v-bind:class="[activeClass, errorClass]"></div>`
2.   
3.  `data: {`
4.  `activeClass: 'active',`
5.  `errorClass: 'text-danger'`
6.  `}`
7.   
8.  `渲染为：`
9.  `<div class="active text-danger"></div>`
10.  
11. `可以用三元表达式`
12. `<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>`

## 1.13. 条件渲染 ##

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

1.  `<h1 v-if="awesome">Vue is awesome!</h1>`
2.  `<h1 v-else>Oh no ??</h1>`
3.   
4.  `<div v-if="type === 'A'">`
5.  `A`
6.  `</div>`
7.  `<div v-else-if="type === 'B'">`
8.  `B`
9.  `</div>`
10. `<div v-else-if="type === 'C'">`
11. `C`
12. `</div>`
13. `<div v-else>`
14. `Not A/B/C`
15. `</div>`

1.  `<template v-if="loginType === 'username'">`
2.  `<label>Username</label>`
3.  `<input placeholder="Enter your username">`
4.  `</template>`
5.  `<template v-else>`
6.  `<label>Email</label>`
7.  `<input placeholder="Enter your email address">`
8.  `</template>`
9.   
10. `两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder`
11.  
12. `Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可`
13.  
14. `<template v-if="loginType === 'username'">`
15. `<label>Username</label>`
16. `<input placeholder="Enter your username" key="username-input">`
17. `</template>`
18. `<template v-else>`
19. `<label>Email</label>`
20. `<input placeholder="Enter your email address" key="email-input">`
21. `</template>`

## 1.14. 数组更新检测 ##

### 1.14.1. 变异方法 ###

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

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

### 1.14.2. 注意事项 ###

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

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

1.  `var vm = new Vue({`
2.  `data: {`
3.  `items: ['a', 'b', 'c']`
4.  `}`
5.  `})`
6.  `vm.items[1] = 'x' // 不是响应性的`
7.  `vm.items.length = 2 // 不是响应性的`
8.   
9.  `为了解决第一类问题，以下两种方式都可以实现和 vm.items[indexOfItem] = newValue 相同的效果，同时也将触发状态更新：`
10. `// Vue.set`
11. `Vue.set(vm.items, indexOfItem, newValue)`
12. `// Array.prototype.splice`
13. `vm.items.splice(indexOfItem, 1, newValue)`
14.  
15. `为了解决第二类问题，你可以使用 splice：`
16. `vm.items.splice(newLength)`

## 1.15. 显示过滤/排序结果 ##

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

## 1.16. 事件修饰符 ##

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

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

1.  ``
2.  `<a v-on:click.stop="doThis"></a>`
3.   
4.  ``
5.  `<form v-on:submit.prevent="onSubmit"></form>`
6.   
7.  ``
8.  `<a v-on:click.stop.prevent="doThat"></a>`
9.   
10. ``
11. `<form v-on:submit.prevent></form>`
12.  
13. ``
14. ``
15. `<div v-on:click.capture="doThis">...</div>`
16.  
17. ``
18. ``
19. `<div v-on:click.self="doThat">...</div>`
20.  
21. ``
22. `<a v-on:click.once="doThis"></a>`

## 1.17. 系统修饰键 ##

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

*  .ctrl
 *  .alt
 *  .shift
 *  .meta

1.  ``
2.  `<input @keyup.alt.67="clear">`
3.   
4.  ``
5.  `<div @click.ctrl="doSomething">Do something</div>`

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

1.  ``
2.  `<button @click.ctrl="onClick">A</button>`
3.   
4.  ``
5.  `<button @click.ctrl.exact="onCtrlClick">A</button>`
6.   
7.  ``
8.  `<button @click.exact="onClick">A</button>`

鼠标按钮修饰符

*  .left
 *  .right
 *  .middle

## 1.18. 表单输入绑定 ##

### 1.18.1. .lazy ###

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

1.  ``
2.  `<input v-model.lazy="msg" >`

### 1.18.2. .number ###

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

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

### 1.18.3. .trim ###

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

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

## 1.19. 自定义指令 ##

1.  ``// 注册一个全局自定义指令 `v-focus` ``
2.  `Vue.directive('focus', {`
3.  `// 当被绑定的元素插入到 DOM 中时……`
4.  `inserted: function (el) {`
5.  `// 聚焦元素`
6.  `el.focus()`
7.  `}`
8.  `})`
9.   
10. `<input v-focus>`

## 1.20. 对象字面量 ##

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

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

1.  `<div v-demo="{ color: 'white', text: 'hello!' }"></div>`
2.   
3.  `Vue.directive('demo', function (el, binding) {`
4.  `console.log(binding.value.color) // => "white"`
5.  `console.log(binding.value.text) // => "hello!"`
6.  `})`

## 1.21. 过滤器 ##

1.  ``
2.  `{ { message | capitalize }}`
3.   
4.  ````
5.  `<div v-bind:id="rawId | formatId"></div>`
6.   
7.  `filters: {`
8.  `capitalize: function (value) {`
9.  `if (!value) return ''`
10. `value = value.toString()`
11. `return value.charAt(0).toUpperCase() + value.slice(1)`
12. `}`
13. `}`
14.  
15. `可以串联`
16. `{ { message | filterA | filterB }}`
17.  
18. `可以接收参数：`
19. `{ { message | filterA('arg1', arg2) }}`

## 1.22. 工具 ##

1.  json-server
2.  cnpm install json-server --save

## 1.23. 注意 ##

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