Vue笔记
Vue简介
组件思想
Vue Instance
Every Vue application starts by creating a new Vue instance with the Vue function:
var vm = new Vue({ |
When you create a Vue instance, you pass in an options object.
A Vue application consists of a root Vue instance created with new Vue, optionally organized into a tree of nested, reusable components. For example, a todo app’s component tree might look like this:
Root Instance |
all Vue components are also Vue instances, and so accept the same options object (except for a few root-specific options).
Directives
|
|
v-for |
一、to render a list of items 1. based on an array(v-for=”tem in items” 或v-for=”(item, index) in items” ) 2. based on object ( v-for="value in object" 或v-for="(value, key) in object" 或v-for="(value, key, index) in object") 二、 key 三、数组: 1. push,pop,shift,unshift,splice,sort,reverse 2. filter, concat, slice 3. vm.items[indexOfItem]=newValue 替换方法:Vue.set或vm.items.splice或 vm.$set vm.items.length = newLength 替换方法:use
四、对象 Vue.set(vm.userProfile, 'age', 27)或vm.$set(vm.userProfile, 'age', 27) |
|
|
|
|
|
|
|
|
|
|
|
|
Directives are special attributes with the v- prefix. Directive attribute values are expected to be a single JavaScript expression (with the exception of v-for, which will be discussed later). A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes. Let’s review the example we saw in the introduction:
<p v-if="seen">Now you see me</p> |
Here, the v-if directive would remove/insert the <p> element based on the truthiness of the value of the expression seen.
Arguments
Some directives can take an “argument”, denoted by a colon after the directive name. For example, the v-bind directive is used to reactively update an HTML attribute:
<a v-bind:href="url"> ... </a> |
Here href is the argument, which tells the v-bind directive to bind the element’shref attribute to the value of the expression url.
Another example is the v-on directive, which listens to DOM events:
<a v-on:click="doSomething"> ... </a> |
Here the argument is the event name to listen to. We will talk about event handling in more detail too.
Modifiers
Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the .prevent
modifier tells the v-on
directive to call event.preventDefault()
on the triggered event:
<form v-on:submit.prevent="onSubmit"> ... </form> |
You’ll see other examples of modifiers later, for v-on
and for v-model
, when we explore those features.
Directives——特别关注之v-bind
v-bind——特别关注之:class
v-bind——特别关注之:style
Directives——特别关注之v-on
处理事件的指令是v-on:click,可简写成@click。接受参数如下:handleClick(book.name)
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="vue.js"></script>
- </head>
- <body>
- <div id="app">
- 10. <span v-show="show" :title="message">你将看到提示</span>
- 11. <ol>
- 12. <li @click="handleClick(book.name)" v-for="book in books" :title="book.id + ' ' + book.name" v-html="book.name"></li>
- 13. </ol>
14. </div>
- 15.
16. <script>
- 17. var vm = new Vue({
- 18. el: '#app',
- 19. data: {
- 20. show: true,
- 21. message: 'Hello world.' + new Date().toLocaleString(),
- 22. books: [
- 23. {id:1, name:'Learning vue'},
- 24. {id:2, name:'hard vue'},
- 25. {id:3, name:'deep in vue'}
- 26. ]
- 27. },
- 28. methods: {
- 29. handleClick: function (bookName) {
- 30. console.log(bookName + ' clicked.')
- 31. }
- 32. }
- 33. });
34. </script>
35. </body>
36. </html>
computed property
组件
组件分为全局组件和局部组件。组件通过props来交换数据,通过$emit来触发事件
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="vue.js"></script>
- </head>
- <body>
- <div id="app">
- 10. <ul>
- 11. <my-li :key='book.id' @click='doclick(book)' v-for="book in books" :item="book"></my-li>
- 12. </ul>
13. </div>
14. <script>
- 15. Vue.component('my-li', {
- 16. props: ['item'],
- 17. methods: {
- 18. innerclick: function () {
- 19. this.$emit('click')
- 20. }
- 21. },
- 22. template: '<li @click="innerclick">{{item.name}}</li>'
- 23. })
- 24.
- 25. var vm = new Vue({
- 26. el: '#app',
- 27. data: {
- 28. books: [
- 29. {id: 1, name: 'learning vue'},
- 30. {id: 2, name: 'deep in vue'},
- 31. {id: 3, name: 'free vue'}
- 32. ]
- 33. },
- 34. methods: {
- 35. doclick: function (b) {
- 36. console.log('do click ' + b.name)
- 37. }
- 38. }
- 39. });
40. </script>
41. </body>
42. </html>
生命周期
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Title</title>
- <script src="vue.js"></script>
- </head>
- <body>
- <div id="app">
- 10. <span v-show="show" :title="message">你将看到提示</span>
- 11. <ol>
- 12. <li @click="handleClick(book.name)" v-for="book in books" :title="book.id + ' ' + book.name"
- 13. v-html="book.name"></li>
- 14. </ol>
- 15. 通过组件来显示<br/>
- 16. <ol>
- 17. <book-item v-for="item in books" :book="item" :key="item.id"></book-item>
- 18. </ol>
19. </div>
- 20.
21. <script>
- 22. Vue.component('book-item', {
- 23. props: ['book'],
- 24. template: '<li>{{book.name}}</li>'
- 25. })
- 26.
- 27. var vm = new Vue({
- 28. el: '#app',
- 29. data: {
- 30. show: true,
- 31. message: 'Hello world.' + new Date().toLocaleString(),
- 32. books: [
- 33. {id: 1, name: 'Learning vue'},
- 34. {id: 2, name: 'hard vue'},
- 35. {id: 3, name: 'deep in vue'}
- 36. ]
- 37. },
- 38. methods: {
- 39. handleClick: function (bookName) {
- 40. console.log(bookName + ' clicked.')
- 41. }
- 42. },
- 43. beforeCreate: function () {
- 44. console.log('beforeCreate')
- 45. console.log(this.books)
- 46. console.log(this.$el)
- 47. },
- 48. created: function(){
- 49. console.log('created')
- 50. console.log(this.books)
- 51. console.log(this.$el)
- 52. },
- 53. beforeMount: function(){
- 54. console.log('beforeMount')
- 55. console.log(this.books)
- 56. console.log(this.$el)
- 57. },
- 58. mounted: function(){
- 59. console.log('mounted')
- 60. console.log(this.books)
- 61. console.log(this.$el)
- 62. },
- 63. beforeUpdate: function(){
- 64. console.log('beforeUpdate')
- 65. console.log(this.books)
- 66. console.log(this.$el)
- 67. },
- 68. updated: function(){
- 69. console.log('updated')
- 70. console.log(this.books)
- 71. console.log(this.$el)
- 72. },
- 73. beforeDestroy: function () {
- 74. console.log('beforeDestroy')
- 75. },
- 76. destroyed: function () {
- 77. console.log('destroyed');
- 78. }
- 79. });
- 80.
- 81. console.log(vm.$el === document.getElementById('app'))
- 82.
- 83. vm.$watch('show', function (nv,ov) {
- 84. console.log('show值改变了:from ' + ov + ' to ' + nv);
- 85. })
86. </script>
87. </body>
88. </html>
Template Syntax
HTML-based template是声明式的,所以有很多奇怪的以v-开头的咚咚,vue compiler看见这些咚咚就把它给编译一下,转成render()函数。就跟jsp转成servlet一样。
额外奖励
Object.keys()
Object.assign()