Vue笔记

最新推荐文章于 2022-09-01 08:22:48 发布

weixin_30266829

最新推荐文章于 2022-09-01 08:22:48 发布

阅读量217

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/yasepix/p/10118706.html

版权

Vue笔记

Vue简介

组件思想

Vue Instance

Every Vue application starts by creating a new Vue instance with the Vue function:

var vm = new Vue({
// options
})

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
└─ TodoList
   ├─ TodoItem
   │ ├─ DeleteTodoButton
   │ └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

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 `splice` 四、对象 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:

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:

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:

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

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>

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

转载于:https://www.cnblogs.com/yasepix/p/10118706.html

weixin_30266829

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue笔记

Vue笔记Vue简介组件思想Vue InstanceEvery Vue application starts by creating a newVue instancewith the Vue function:var vm = new Vue({ // options }) ...
复制链接

扫一扫