zoukankan      html  css  js  c++  java

  • Vue笔记

    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:

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

    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>Title</title>  
    6.     <script src="vue.js"></script>  
    7. </head>  
    8. <body>  
    9. <div id="app">  
    10. 10.     <span v-show="show" :title="message">你将看到提示</span>  
    11. 11.     <ol>  
    12. 12.         <li @click="handleClick(book.name)" v-for="book in books" :title="book.id + ' ' + book.name" v-html="book.name"></li>  
    13. 13.     </ol>  

    14. </div>  

    1. 15.   

    16. <script>  

    1. 17.   var vm = new Vue({  
    2. 18.         el: '#app',  
    3. 19.         data: {  
    4. 20.             show: true,  
    5. 21.             message: 'Hello world.' + new Date().toLocaleString(),  
    6. 22.             books: [  
    7. 23.                 {id:1, name:'Learning vue'},  
    8. 24.                 {id:2, name:'hard vue'},  
    9. 25.                 {id:3, name:'deep in vue'}  
    10. 26.             ]  
    11. 27.         },  
    12. 28.       methods: {  
    13. 29.             handleClick: function (bookName) {  
    14. 30.                 console.log(bookName + ' clicked.')  
    15. 31.             }  
    16. 32.       }  
    17. 33.     });  

    34. </script>  

    35. </body>  

    36. </html>  

    computed property

    组件

    组件分为全局组件和局部组件。组件通过props来交换数据，通过$emit来触发事件

    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>Title</title>  
    6.     <script src="vue.js"></script>  
    7. </head>  
    8. <body>  
    9. <div id="app">  
    10. 10.     <ul>  
    11. 11.         <my-li :key='book.id' @click='doclick(book)' v-for="book in books" :item="book"></my-li>  
    12. 12.     </ul>  

    13. </div>  

    14. <script>  

    1. 15.     Vue.component('my-li', {  
    2. 16.         props: ['item'],  
    3. 17.         methods: {  
    4. 18.             innerclick: function () {  
    5. 19.                 this.$emit('click')  
    6. 20.             }  
    7. 21.         },  
    8. 22.         template: '<li @click="innerclick">{{item.name}}</li>'  
    9. 23.     })  
    10. 24.   
    11. 25.     var vm = new Vue({  
    12. 26.         el: '#app',  
    13. 27.         data: {  
    14. 28.             books: [  
    15. 29.                 {id: 1, name: 'learning vue'},  
    16. 30.                 {id: 2, name: 'deep in vue'},  
    17. 31.                 {id: 3, name: 'free vue'}  
    18. 32.             ]  
    19. 33.         },  
    20. 34.         methods: {  
    21. 35.             doclick: function (b) {  
    22. 36.                 console.log('do click ' + b.name)  
    23. 37.             }  
    24. 38.         }  
    25. 39.     });  

    40. </script>  

    41. </body>  

    42. </html>  

    生命周期

    1. <!DOCTYPE html>  
    2. <html lang="en">  
    3. <head>  
    4.     <meta charset="UTF-8">  
    5.     <title>Title</title>  
    6.     <script src="vue.js"></script>  
    7. </head>  
    8. <body>  
    9. <div id="app">  
    10. 10.     <span v-show="show" :title="message">你将看到提示</span>  
    11. 11.     <ol>  
    12. 12.         <li @click="handleClick(book.name)" v-for="book in books" :title="book.id + ' ' + book.name"  
    13. 13.             v-html="book.name"></li>  
    14. 14.     </ol>  
    15. 15.     通过组件来显示<br/>  
    16. 16.     <ol>  
    17. 17.         <book-item v-for="item in books" :book="item" :key="item.id"></book-item>  
    18. 18.     </ol>  

    19. </div>  

    1. 20.   

    21. <script>  

    1. 22.     Vue.component('book-item', {  
    2. 23.         props: ['book'],  
    3. 24.         template: '<li>{{book.name}}</li>'  
    4. 25.     })  
    5. 26.   
    6. 27.     var vm = new Vue({  
    7. 28.         el: '#app',  
    8. 29.         data: {  
    9. 30.             show: true,  
    10. 31.             message: 'Hello world.' + new Date().toLocaleString(),  
    11. 32.             books: [  
    12. 33.                 {id: 1, name: 'Learning vue'},  
    13. 34.                 {id: 2, name: 'hard vue'},  
    14. 35.                 {id: 3, name: 'deep in vue'}  
    15. 36.             ]  
    16. 37.         },  
    17. 38.         methods: {  
    18. 39.             handleClick: function (bookName) {  
    19. 40.                 console.log(bookName + ' clicked.')  
    20. 41.             }  
    21. 42.         },  
    22. 43.         beforeCreate: function () {  
    23. 44.             console.log('beforeCreate')  
    24. 45.             console.log(this.books)  
    25. 46.             console.log(this.$el)  
    26. 47.         },  
    27. 48.         created: function(){  
    28. 49.             console.log('created')  
    29. 50.             console.log(this.books)  
    30. 51.             console.log(this.$el)  
    31. 52.         },  
    32. 53.         beforeMount: function(){  
    33. 54.             console.log('beforeMount')  
    34. 55.             console.log(this.books)  
    35. 56.             console.log(this.$el)  
    36. 57.         },  
    37. 58.         mounted: function(){  
    38. 59.             console.log('mounted')  
    39. 60.             console.log(this.books)  
    40. 61.             console.log(this.$el)  
    41. 62.         },  
    42. 63.         beforeUpdate: function(){  
    43. 64.             console.log('beforeUpdate')  
    44. 65.             console.log(this.books)  
    45. 66.             console.log(this.$el)  
    46. 67.         },  
    47. 68.         updated: function(){  
    48. 69.             console.log('updated')  
    49. 70.             console.log(this.books)  
    50. 71.             console.log(this.$el)  
    51. 72.         },  
    52. 73.         beforeDestroy: function () {  
    53. 74.             console.log('beforeDestroy')  
    54. 75.         },  
    55. 76.         destroyed: function () {  
    56. 77.             console.log('destroyed');  
    57. 78.         }  
    58. 79.     });  
    59. 80.   
    60. 81.     console.log(vm.$el === document.getElementById('app'))  
    61. 82.   
    62. 83.     vm.$watch('show', function (nv,ov) {  
    63. 84.         console.log('show值改变了：from ' + ov + ' to ' + nv);  
    64. 85.     })  

    86. </script>  

    87. </body>  

    88. </html>  

    Template Syntax

    HTML-based template是声明式的，所以有很多奇怪的以v-开头的咚咚，vue compiler看见这些咚咚就把它给编译一下，转成render()函数。就跟jsp转成servlet一样。

    额外奖励

    Object.keys()

    Object.assign()
  • 相关阅读:
    IntelliJ IDEA部署web程序图文教程
    在linux中配置tomcat
    mysql在linux上重启
    ubuntu安装配置gradle
    使用Spring Boot和Gradle创建AngularJS项目
    Can't create/write to file '/tmp/#sql_3105_0.MYI' (Errcode: 13)
    linux修改文件权限
    怎样使用淘宝npm镜像
    javascript（一）：javascript基本介绍及基本语法
    Sass学习
  • 原文地址：https://www.cnblogs.com/yasepix/p/10118706.html
Copyright © 2011-2022 走看看