devbox
我家自动化
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Vue官方文档代码大全

作者：我家自动化 | 2024-04-23 17:30:26

赞

踩

vue官方文档

01、vue实例

1、数据与方法
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  7. </head>
  8. <body>
  9. <div id="app">
  10.     {{a}}
  11. </div>
  12. <script type="text/javascript">
  13.     let data = {a: 1}
  14.     /*将data对象绑定到vm中*/
  15.     let vm = new Vue({
  16.         el: "#app",
  17.         data: {
  18.             /*这种方式是传入键值对-->JSON对象*/
  19.             message111: "hello,vue"
  20.         },
  21.         /*这种方式是传入JSON对象*/
  22.         data,
  23.     });
  24.     vm.a = 222
  25.     data.a = 333
  26.  
  27.     /*从vm中获取实例的方法，也就是说明通过$可以获取实例对象*/
  28.     alert(vm.$data === data)// => true
  29.     alert(vm.$el === document.getElementById("app"))// => true
  30. </script>
  31. </body>
  32. </html>
2、实例生命周期钩子
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  9. <script>
  10.     /*每个vue实例在被创建时都要经历一系列的初始化过程。例如：需要设置数据监听
  11.     * 编译模板，将实例new vue挂在到DOM，el:#app并在数据变化时更新DOM*/
  12.     /*
  13.     * create钩子函数可以用来在一个实例被创建之后执行代码
  14.     * mounted
  15.     * updated
  16.     * destroyed
  17.     * */
  18.     new Vue({
  19.         data: {
  20.             message: "hello"
  21.         },
  22.         create: function (){
  23.           console.log("执行create钩子函数"+this.message)
  24.         }
  25.     })
  26. </script>
  27. </body>
  28. </html>

02、模板方法

1、插值-文本
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     {{message}}
  10. </div>
  11. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  12. <script>
  13.     let vm = new Vue({
  14.         el: "#app",
  15.         data: {
  16.             message: "hello"
  17.         }
  18.     })
  19. </script>
  20. </body>
  21. </html>
2、插值-原始HTML
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <p>Using mustaches</p>
  10.     <p>Using v-html directive</p>
  11.     <p v-html="rowHtml"></p>
  12. </div>
  13. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  14. <script>
  15.     let vm = new Vue({
  16.         el: "#app",
  17.         data: {
  18.             message: "hello"
  19.         },
  20.         methods: {
  21.             rowHtml: function (){
  22.                 console.log("hello")
  23.             }
  24.         }
  25.     })
  26. </script>
  27. </body>
  28. </html>
3、插值-attribute
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <div v-bind:id="dynamicId"/>
  10.     <button v-bind:disabled="isButtonDisable"/>
  11. </div>
  12. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  13. <script>
  14.     let vm = new Vue({
  15.         el: "#app",
  16.         data: {
  17.             dynamicId: "test"
  18.         },
  19.         /*计算属性，使用的时候不带括号*/
  20.         computed: {
  21.             isButtonDisable: function (){
  22.                 return false;
  23.             }
  24.         }
  25.     })
  26. </script>
  27. </body>
  28. </html>
4、插值-JavaScript
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--JavaScript表达式-->
  10.     {{!booleanTrue}}<br/>
  11.     {{message.split(" ").reverse()}}
  12. </div>
  13. <!--迄今为止 ，我们一直绑定简单得到property键值，但实际上，对于所有的数据绑定，vue都提供了完全额的JavaScript表达式支持-->
  14. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  15. <script>
  16.     let vm = new Vue({
  17.         el: "#app",
  18.         data: {
  19.             booleanTrue: true,
  20.             message: "hello wwj"
  21.         }
  22.     })
  23. </script>
  24. </body>
  25. </html>
5、指令-参数
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--href是参数，告知v-bind指令将该元素的href属性与表达式URL的值绑定-->
  10.     <a v-bind:href="url"></a>
  11.     <a v-on:click="doSomething()" v-bind:href="url">点我啊</a>
  12. </div>
  13. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  14. <script>
  15.     let vm = new Vue({
  16.         el: "#app",
  17.         data: {
  18.           url: "https://www.baidu.com/"
  19.         },
  20.         methods: {
  21.             doSomething: function (){
  22.                 alert("DOM绑定点击事件")
  23.             }
  24.         }
  25.     })
  26. </script>
  27. </body>
  28. </html>
6、指令-动态参数
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--相当于v-bind:click-->
  10.     <a v-bind:[attributeName2]="doSomething" v-bind:[attributeName1]="url">吊我啊</a>
  11.     <p>{{attributeName1}}</p>
  12. </div>
  13. <!--从2.60开始，可以用方括号括起来的JavaScript表达式作为一个指令的参数-->
  14. <!--对动态参数的要求：
  15.     动态参数预期会求出一个字符串，异常情况下为null，其他非字符串类型的值都会触发一个警告
  16.     空格、引号放在attribute中是无效的
  17.     避免使用大小写来区别键值，因为浏览器会将attribute全部转换成小写-->
  18. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  19. <script>
  20.     let vm = new Vue({
  21.         el: "#app",
  22.         data: {
  23.             url: "https://www.baidu.com/",
  24.             attributeName1: "href",
  25.             attributeName2: "click"
  26.         },
  27.         methods: {
  28.             doSomething: function (){
  29.                 alert("DOM绑定点击事件")
  30.             }
  31.         }
  32.     })
  33. </script>
  34. </body>
  35. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <a v-on:[attributeName2]="doSomething()" v-bind:[attributeName1]="url">点我啊</a>
  10. </div>
  11. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  12. <script>
  13.     let vm = new Vue({
  14.         el: "#app",
  15.         data: {
  16.             url: "https://www.baidu.com/",
  17.             attributeName1: "href",
  18.             attributeName2: "click"
  19.         },
  20.         methods: {
  21.             doSomething: function (){
  22.                 alert("DOM绑定点击事件")
  23.             }
  24.         }
  25.     })
  26. </script>
  27. </body>
  28. </html>
7、指令-修饰符
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <form v-on:submit.prevent="onsubmit">
  10.  
  11.     </form>
  12. </div>
  13. <!--修饰符是以半角句号“.”，指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如
  14. .prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault()-->
  15. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  16. <script>
  17.     let vm = new Vue({
  18.         el: "#app",
  19.     })
  20. </script>
  21. </body>
  22. </html>
8、缩写-v-bind
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!-- 完整语法 -->
  10.     <a v-bind:href="url" v-on:click="doThis()">点我啊</a>
  11.  
  12.     <!-- 缩写 -->
  13.     <a :href="url">点我啊</a>
  14.  
  15.     <!-- 动态参数的缩写 (2.6.0+) -->
  16.     <a :[key]="key"> 点我啊 </a>
  17. </div>
  18. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  19. <script>
  20.     let vm = new Vue({
  21.         el: "#app",
  22.         data: {
  23.             key: "href",
  24.             url: "https://www.baidu.com"
  25.         },
  26.         computed: {
  27.             doThis: function (){
  28.                 alert("恭喜你")
  29.             }
  30.         }
  31.     })
  32. </script>
  33. </body>
  34. </html>
9、缩写-v-on
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!-- 完整语法 -->
  10.     <a v-on:click="doSomething">...</a>
  11.  
  12.     <!-- 缩写 -->
  13.     <a @click="doSomething">...</a>
  14.  
  15.     <!-- 动态参数的缩写 (2.6.0+) -->
  16.     <a @[event]="doSomething"> ... </a>
  17. </div>
  18. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  19. <script>
  20.     let vm = new Vue({
  21.         el: "#app",
  22.         data: {
  23.             event: "click"
  24.         }
  25.     })
  26. </script>
  27. </body>
  28. </html>

03、计算属性和侦听器

1、计算属性
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--JavaScript表达式-->
  10. <!--    {{message.split(" ").reverse()}}-->
  11.     <!--通过计算属性实现-->
  12.     {{ message1 }}
  13. </div>
  14. <!--模板内的表达式非常遍历，但是设计它们的初衷是用于简单的运算的。
  15. 在模板内使用太多的逻辑会让模板过于笨重且难以维护，看上面的表达式便可看出
  16. 想想模板中有很多这种表达式，那么将非常难以维护，这时候计算属性便出场了，
  17. 该属性具备了计算属性，也就是逻辑处理能力，就像函数一样，不过我们使用的时候把它当做属性对待-->
  18. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  19. <script>
  20.     let vm = new Vue({
  21.         el: "#app",
  22.         data: {
  23.             message: "hello vue"
  24.         },
  25.         computed: {
  26.             message1: function (){
  27.                 return this.message.split(" ").reverse()
  28.             }
  29.         }
  30.     })
  31. </script>
  32. </body>
  33. </html>
2、计算属性缓存VS方法
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     计算属性翻转字符串：{{message3}}<br/>
  10.     通过方法翻转字符串：{{message()}}
  11. </div>
  12. <!--计算属性和方法的不同
  13.     计算属性是基于他们的响应式依赖进行缓存的，只有相关依赖的值变化时才会重新求值显然这样的好处便是提高了响应的效率
  14.     而通过方法，每次调用都需要执行，显然在一定程度上会降低响应的消息-->
  15. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  16. <script>
  17.     let vm = new Vue({
  18.         el: "#app",
  19.         data: {
  20.             message1: "hello vue",
  21.             message2: "hello vue"
  22.         },
  23.         computed: {
  24.             message3: function (){
  25.                 return this.message1.split(" ").reverse()
  26.             }
  27.         },
  28.         methods: {
  29.             message: function (){
  30.                 return this.message2.split(" ").reverse()
  31.             }
  32.         }
  33.     })
  34. </script>
  35. </body>
  36. </html>
3、计算属性VS侦听器
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     {{fullName}}
  10. </div>
  11. <!--vue提供了一种更通用的方式来观察和响应vue实例上的数据变动：侦听属性。
  12. 当一些数据需要随着其他数据变动而变化时，很容易滥用watch-->
  13. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  14. <script>
  15.     let vm = new Vue({
  16.         el: "#app",
  17.         data: {
  18.             firstName: "Foo",
  19.             lastName: "Bar",
  20.             fullName: "Foo Bar"
  21.         },
  22.         /*侦听数据的方式检查数据的变动*/
  23.         watch: {
  24.             firstName: function (val) {
  25.                 this.fullName = val + ' ' + this.lastName
  26.             },
  27.             lastName: function (val) {
  28.                 this.fullName = this.firstName + ' ' + val
  29.             }
  30.         },
  31.         /*计算属性的方式检查数据的变动*/
  32.         computed: {
  33.             fullName: function (){
  34.                 return this.firstName + ' ' + this.lastName
  35.             }
  36.         }
  37.     })
  38. </script>
  39. </body>
  40. </html>
4、计算属性的setter
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     {{fullName}}
  10. </div>
  11. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  12. <script>
  13.     let vm = new Vue({
  14.         el: "#app",
  15.         data: {
  16.             message: "hello vue",
  17.             firstName: "Foo",
  18.             lastName: "Bar",
  19.             fullName: "Foo Bar"
  20.         },
  21.         computed: {
  22.             fullName: {
  23.                 get: function (){
  24.                     return this.firstName+" "+this.lastName
  25.                 },
  26.                 set: function (newValue){
  27.                     let names = newValue.split(" ")
  28.                     this.firstName = names[0]
  29.                     this.lastName = names[names.length-1]
  30.                 }
  31.             }
  32.         }
  33.     })
  34. </script>
  35. </body>
  36. </html>
5、侦听器
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <p>
  10.         Ask a yes/no question:
  11.         <input v-model="question">
  12.     </p>
  13.     <p>{{ answer }}</p>
  14. </div>
  15. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  16. <script>
  17.     let vm = new Vue({
  18.         el: "#app",
  19.         data: {
  20.             question: '',
  21.             answer: 'I cannot give you an answer until you ask q question'
  22.         },
  23.         watch: {
  24.             question: function (newQuestion,oldQuestion){
  25.                 this.answer = "waiting for you to stop typing"
  26.                 this.debouncedGetAnswer()
  27.             },
  28.             created: function () {
  29.                 // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
  30.                 // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
  31.                 // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
  32.                 // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
  33.                 // 请参考：https://lodash.com/docs#debounce
  34.                 this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
  35.             },
  36.         },
  37.         methods: {
  38.             getAnswer: function () {
  39.                 if (this.question.indexOf('?') === -1) {
  40.                     this.answer = 'Questions usually contain a question mark. ;-)'
  41.                     return
  42.                 }
  43.                 this.answer = 'Thinking...'
  44.                 const vm = this;
  45.                 axios.get('https://yesno.wtf/api')
  46.                     .then(function (response) {
  47.                         vm.answer = _.capitalize(response.data.answer)
  48.                     })
  49.                     .catch(function (error) {
  50.                         vm.answer = 'Error! Could not reach the API. ' + error
  51.                     })
  52.             }
  53.         }
  54.     })
  55. </script>
  56. </body>
  57. </html>

04、Class与Style

1、绑定HTML-对象语法
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--该class的存在与否取决与数据property isActive的取值-->
  10.     <div v-bind:class="{active: isActive}">大王叫我来巡山</div>
  11.     <!--可以给class传入多个参数达到切换class的作用-->
  12.     <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">师娘叫我去买衣服</div>
  13.     <!--将这些参数封装在一个对象中-->
  14.     <div v-bind:class="classObject">师娘叫我去买衣服</div>
  15.     <!--也可以通过计算属性给class赋值-->
  16.     <div v-bind:class="classObject">师娘叫我去买衣服</div>
  17. </div>
  18. <!--可以传给v-bind:class一个对象，以动态地转换class-->
  19. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  20. <script>
  21.     let vm = new Vue({
  22.         el: "#app",
  23.         data: {
  24.             isActive: true,
  25.             hasError: false,
  26.             classObject: {
  27.                 active: true,
  28.                 'text-danger': false
  29.             }
  30.         },
  31.         computed: {
  32.             classObject: function (){
  33.                 return {
  34.                     active: this.isActive && !this.error,
  35.                     'text-danger': this.error && this.error.type === 'fatal'
  36.                 }
  37.             }
  38.         }
  39.     })
  40. </script>
  41. </body>
  42. </html>
2、绑定HTML-数组用法
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--可以把数组传给v-bind:class，以应用一个class列表-->
  10.     <div v-bind:class="[activeClass, errorClass]"></div>
  11.     <!--上面的样式将会被渲染成下面这样-->
  12.     <div class="active text-danger"></div>
  13. </div>
  14. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  15. <script>
  16.     let vm = new Vue({
  17.         el: "#app",
  18.         data: {
  19.             activeClass: "active",
  20.             errorClass: "text-danger"
  21.         }
  22.     })
  23. </script>
  24. </body>
  25. </html>
3、绑定HTML-用在组件上
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--可以添加一些class-->
  10.     <my-component class="boo too"></my-component>
  11.     <!--可以带数据绑定class-->
  12.     <my-component v-bind:class="xoo"></my-component>
  13. </div>
  14. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  15. <script>
  16.     Vue.component("my-component",{
  17.         template: '<p class="foo bar">自定义组件</p>'
  18.     })
  19.     let vm = new Vue({
  20.         el: "#app",
  21.         data: {
  22.             xoo: "too"
  23.         }
  24.     })
  25.  
  26. </script>
  27. </body>
  28. </html>
4、绑定内联样式-对象语法
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <div v-bind:style="{color: 'red',fontSize: '18px'}">将样式直接通过大括号绑定</div>
  10.     <div v-bind:style="styleObject">将样式通过data对象进行绑定</div>
  11. </div>
  12. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  13. <script>
  14.     let vm = new Vue({
  15.         el: "#app",
  16.         data: {
  17.             styleObject: {
  18.                 color: "red",
  19.                 fontSize: "18px"
  20.             }
  21.         }
  22.     })
  23. </script>
  24. </body>
  25. </html>
5、绑定内联样式-数组语法
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <div v-bind:style="[baseStyles,overridingStyles]">样式通过数组绑定样式</div>
  10. </div>
  11. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  12. <script>
  13.     let vm = new Vue({
  14.         el: "#app",
  15.         data: {
  16.             baseStyles: {
  17.                 color: 'red',
  18.                 fontSize: '18px'
  19.             },
  20.             overridingStyles: {
  21.                 color: 'red',
  22.                 fontSize: '18px'
  23.             }
  24.         }
  25.     })
  26. </script>
  27. </body>
  28. </html>
6、绑定内联样式-自动添加前缀
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.  
  10. </div>
  11. <!--当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。-->
  12. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  13. <script>
  14.     let vm = new Vue({
  15.         el: "#app",
  16.         data: {
  17.             message: "hello vue"
  18.         }
  19.     })
  20. </script>
  21. </body>
  22. </html>
7、绑定内联样式-多重值
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。-->
  10.     <div v-bind:style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">测绘师</div>
  11. </div>
  12. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  13. <script>
  14.     let vm = new Vue({
  15.         el: "#app",
  16.         data: {
  17.             message: "hello vue"
  18.         }
  19.     })
  20. </script>
  21. </body>
  22. </html>

05、条件渲染

1、v-if：template
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--v-if控制一个DOM标签-->
  10.     <h1 v-if="awesome">Vue is awesome!</h1>
  11.     <!--v-if通过template包含多个标签控制-->
  12.     <template v-if="ok">
  13.         <h1>Title</h1>
  14.         <p>Paragraph 1</p>
  15.         <p>Paragraph 2</p>
  16.     </template>
  17.     <!--v-if和v-else-->
  18.     <div v-if="Math.random() > 0.5">Now you see me</div>
  19.     <div v-else>Now you don't</div><br/>
  20.     <!--v-else-if-->
  21.     <div v-if="type === 'A'">A</div>
  22.     <div v-else-if="type === 'B'">B</div>
  23.     <div v-else-if="type === 'C'">C</div>
  24.     <div v-else>Not A/B/C</div>
  25. </div>
  26. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  27. <script>
  28.     let vm = new Vue({
  29.         el: "#app",
  30.         data: {
  31.             awesome: true,
  32.             ok: true,
  33.             type: 'B'
  34.         }
  35.     })
  36. </script>
  37. </body>
  38. </html>
2、v-if：key
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--未管理可重复key之前，两个输入框的值仅需输入一次，且一直都是相同的-->
  10. <!--    <template v-if="loginType === 'username'">-->
  11. <!--        <label>Username</label>-->
  12. <!--        <input placeholder="Enter your username"/>-->
  13. <!--    </template>-->
  14. <!--    <template v-else>-->
  15. <!--        <label>Email</label>-->
  16. <!--        <input placeholder="Enter your email address"/>-->
  17. <!--    </template><br/>-->
  18. <!--    <button v-on:click="convert()"/>-->
  19.  
  20.     <!--管理可重复key之后，两个输入框需要分别输入，输入的值是不同的-->
  21.     <template v-if="loginType === 'username'">
  22.         <label>Username</label>
  23.         <input placeholder="Enter your username" key="username-input">
  24.     </template>
  25.     <template v-else>
  26.         <label>Email</label>
  27.         <input placeholder="Enter your email address" key="email-input">
  28.     </template><br/>
  29.     <button v-on:click="convert()"/>
  30. </div>
  31. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  32. <script>
  33.     let vm = new Vue({
  34.         el: "#app",
  35.         data: {
  36.             loginType: 'username',
  37.             num: true
  38.         },
  39.         methods: {
  40.             convert: function (){
  41.                 this.num = !this.num
  42.                 if (this.num === true){
  43.                     this.loginType = 'username'
  44.                 }else {
  45.                     this.loginType = 'hhhh'
  46.                 }
  47.             }
  48.         }
  49.     })
  50. </script>
  51. </body>
  52. </html>
3、v-show
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.  
  10. </div>
  11. <!--v-show也是用于根据条件展示元素的选项，其用法和v-if大致一样
  12.     不同于v-if的是：v-show的元素始终会被渲染并保留在DOM只能。v-show知识简单地切换元素的CSS property display-->
  13. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  14. <script>
  15.     let vm = new Vue({
  16.         el: "#app",
  17.         data: {
  18.             message: "hello vue"
  19.         }
  20.     })
  21. </script>
  22. </body>
  23. </html>

06、列表渲染

1、v-for数组
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <ul id="app">
  9.     <!--v-bind:key可以复用-->
  10.     <li v-for="item in items" v-bind:key="item.message">
  11.         {{item.message}}
  12.     </li>
  13.     <!--在v-for中，还可以支持第二个参数，即当前的索引,of的效果和in的效果一样-->
  14.     <li v-for="(item, index) of items">
  15.         {{ parentMessage }} - {{ index }} - {{ item.message }}
  16.     </li>
  17. </ul>
  18. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  19. <script>
  20.     let vm = new Vue({
  21.         el: "#app",
  22.         data: {
  23.             items: [
  24.                 { message: 'Foo' },
  25.                 { message: 'Bar' },
  26.                 { message: 'Coo' },
  27.                 { message: 'Xoo' },
  28.             ],
  29.             parentMessage: 'Parent',
  30.         }
  31.     })
  32. </script>
  33. </body>
  34. </html>
2、v-for对象
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <ul id="app" class="demo">
  9.     <!--遍历对象里面的元素-->
  10.     <li v-for="value in object">
  11.         {{ value }}
  12.     </li>
  13.     <hr/>
  14.     <!--遍历对象时可以输出第二参数：键名-->
  15.     <li v-for="(value, name) in object">
  16.         {{name}}：{{ value }}
  17.     </li>
  18.     <hr/>
  19.     <!--遍历对象时可以输出第三参数：索引-->
  20.     <li v-for="(value, name, index) in object">
  21.         {{index}}：{{name}}：{{ value }}
  22.     </li>
  23.  
  24. </ul>
  25. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  26. <script>
  27.     let vm = new Vue({
  28.         el: "#app",
  29.         data: {
  30.             object: {
  31.                 title: 'How to do lists in Vue',
  32.                 author: 'Jane Doe',
  33.                 publishedAt: '2016-04-10'
  34.             }
  35.         }
  36.     })
  37. </script>
  38. </body>
  39. </html>
3、维护状态
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <ul id="app">
  9.     <!--在v-for中，还可以支持第二个参数，即当前的索引,of的效果和in的效果一样-->
  10.     <!--为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，
  11.     你需要为每项提供一个唯一 key attribute：-->
  12.     <li v-for="(item, index) of items" v-bind:key="item.id">
  13.         {{ parentMessage }} - {{ index }} - {{ item.message }}
  14.     </li>
  15. </ul>
  16. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  17. <script>
  18.     let vm = new Vue({
  19.         el: "#app",
  20.         data: {
  21.             items: [
  22.                 { message: 'Foo' },
  23.                 { message: 'Bar' },
  24.                 { message: 'Coo' },
  25.                 { message: 'Xoo' },
  26.             ],
  27.             parentMessage: 'Parent',
  28.         }
  29.     })
  30. </script>
  31. </body>
  32. </html>
4、数组更新检测-变更方法
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--
  9. Vue将被侦听的数据的变更方法进行了包裹，他们也将会触发视图更新
  10.     push()
  11.     pop()
  12.     shift()
  13.     unshift()
  14.     splice()
  15.     sort()
  16.     reverse()
  17.     我们可以打开控制台，然后对前面的例子的items数组尝试调佣更新方法，比如
  18.     app.items.push({message: 'Zar'})表示标识为app对象的items数组属性添加数据message
  19. -->
  20. <div id="app">
  21.     <li v-for="item in items" v-bind:key="item.id">
  22.         {{item.message}}
  23.     </li>
  24.     <button @click='del'>删除数组元素pop</button>
  25. </div>
  26. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  27. <script>
  28.     let vm = new Vue({
  29.         el: "#app",
  30.         data: {
  31.             items: [
  32.                 { message: 'Foo' },
  33.                 { message: 'Bar' },
  34.                 { message: 'Coo' },
  35.                 { message: 'Xoo' },
  36.             ],
  37.             parentMessage: 'Parent',
  38.         },
  39.         methods: {
  40.             del: function () {
  41.                 this.items.pop();
  42.             },
  43.         }
  44.     })
  45. </script>
  46. </body>
  47. </html>
4、数组更新检测-替换数组
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--
  9. 变更方法顾名思义，会变更调用了这些方法的原始数组。相比之下，
  10. 也有非变更方法，例如，filter()、contact()、slice()。
  11. 他们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，
  12. 可以用型数组替换旧数组
  13. -->
  14. <div id="app">
  15.     <li v-for="item in items" v-bind:key="item.id">
  16.         {{item.message}}
  17.     </li>
  18.     <button @click='change'>替换数组filter获取匹配oo的元素</button>
  19. </div>
  20. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  21. <script>
  22.     let vm = new Vue({
  23.         el: "#app",
  24.         data: {
  25.             items: [
  26.                 { message: 'Foo' },
  27.                 { message: 'Bar' },
  28.                 { message: 'Coo' },
  29.                 { message: 'Xoo' },
  30.             ],
  31.             parentMessage: 'Parent',
  32.         },
  33.         methods: {
  34.             change: function () {
  35.                 this.items = this.items.filter(function (item) {
  36.                     return item.message.match(/oo/)
  37.                 })
  38.             },
  39.         }
  40.     })
  41. </script>
  42. </body>
  43. </html>
5、显示过滤或排序后的结果
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--
  9. 有时候，我们想要显示一个数组经过过滤或者排序后的版本，而不实际变更或重置元素数组。
  10. 在这种情况下，可以创建一个计算属性来返回过滤或排序后的数组
  11. -->
  12. <div id="app">
  13.     <!--使用计算属性的方法过滤数组-->
  14.     <li v-for="n in evenNumbers">
  15.         {{ n }}
  16.     </li>
  17.     <hr/>
  18.     <!--计算属性不适用得到情况下(嵌套for循环)-->
  19.     <ul v-for="set in sets">
  20.         <li v-for="m in even(set)">
  21.             {{m}}
  22.         </li>
  23.     </ul>
  24. </div>
  25. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  26. <script>
  27.     let vm = new Vue({
  28.         el: "#app",
  29.         data: {
  30.             numbers: [ 1, 2, 3, 4, 5 ],
  31.             sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
  32.         },
  33.         computed: {
  34.             evenNumbers: function () {
  35.                 return this.numbers.filter(function (number) {
  36.                     return number % 2 === 0
  37.                 })
  38.             }
  39.         },
  40.         methods: {
  41.             even: function (numbers) {
  42.                 return numbers.filter(function (number) {
  43.                     return number % 2 === 0
  44.                 })
  45.             }
  46.         }
  47.     })
  48. </script>
  49. </body>
  50. </html>
6、v-for里使用值范围
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--v-for 也可以接受整数。在这种情况下，它会把模板重复对应次数。-->
  9. <div id="app" class="demo">
  10.     <span v-for="n in 10" :key="n">{{ n }} </span>
  11. </div>
  12. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  13. <script>
  14.     let vm = new Vue({
  15.         el: "#app",
  16.         data: {
  17.             message: "hello vue"
  18.         }
  19.     })
  20. </script>
  21. </body>
  22. </html>
7、template上使用v-for
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <ul>
  10.         <template v-for="item in items">
  11.             <li>{{ item.message }}</li>
  12.         </template>
  13.     </ul>
  14. </div>
  15. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  16. <script>
  17.     let vm = new Vue({
  18.         el: "#app",
  19.         data: {
  20.             message: "hello vue",
  21.             items: [
  22.                 { message: 'Foo' },
  23.                 { message: 'Bar' },
  24.                 { message: 'Coo' },
  25.                 { message: 'Xoo' },
  26.             ],
  27.         }
  28.     })
  29. </script>
  30. </body>
  31. </html>
8、v-for与v-if一同使用
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--先判断是否不为空-->
  10.     <ul v-if="items.length">
  11.         <!--遍历数组-->
  12.         <li v-for="todo in items">
  13.             {{ todo.message }}
  14.         </li>
  15.     </ul>
  16.     <!--如果数组为空-->
  17.     <p v-else>No todos left!</p>
  18. </div>
  19. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  20. <script>
  21.     let vm = new Vue({
  22.         el: "#app",
  23.         data: {
  24.             message: "hello vue",
  25.             items: [
  26.                 { message: 'Foo' },
  27.                 { message: 'Bar' },
  28.                 { message: 'Coo' },
  29.                 { message: 'Xoo' },
  30.             ],
  31.         }
  32.     })
  33. </script>
  34. </body>
  35. </html>
9、组件上使用v-for
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <my-component  v-for="(item, index) in items"
  10.                    v-bind:item="item"
  11.                    v-bind:index="index"
  12.                    v-bind:key="item.id">
  13.     </my-component>
  14. </div>
  15. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  16. <script>
  17.     Vue.component("my-component",{
  18.         props: {
  19.           item: '',
  20.           index: '',
  21.         },
  22.         template: "<li>{{index}}--{{item.message}}</li>"
  23.     })
  24.     let vm = new Vue({
  25.         el: "#app",
  26.         data: {
  27.             items: [
  28.                 { message: 'Foo' },
  29.                 { message: 'Bar' },
  30.                 { message: 'Coo' },
  31.                 { message: 'Xoo' },
  32.             ],
  33.         }
  34.     })
  35. </script>
  36. </body>
  37. </html>

07、事件处理

1、监听事件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--
  9. 可以用v-on指令监听DOM事件，并在触发时运行一些JavaScript代码
  10. 然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的，一般是通过绑定事件名称
  11. -->
  12. <div id="app">
  13.     <button v-on:click="counter += 1">Add 1</button>
  14.     <p>The button above has been clicked {{ counter }} times.</p>
  15. </div>
  16. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  17. <script>
  18.     let vm = new Vue({
  19.         el: "#app",
  20.         data: {
  21.             counter: 0
  22.         }
  23.     })
  24. </script>
  25. </body>
  26. </html>
2、事件处理方法
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!-- `greet` 是在下面定义的方法名 -->
  10.     <button v-on:click="greet">Greet</button>
  11. </div>
  12. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  13. <script>
  14.     let vm = new Vue({
  15.         el: "#app",
  16.         data: {
  17.             name: "Jack"
  18.         },
  19.         methods: {
  20.             greet: function (event){
  21.                 // `this` 在方法里指向当前 Vue 实例
  22.                 alert("Hello"+this.name+"!")
  23.                 // `event` 是原生 DOM 事件
  24.                 if (event) {
  25.                     alert(event.target.tagName)
  26.                 }
  27.             }
  28.         }
  29.     })
  30. </script>
  31. </body>
  32. </html>
3、内联处理器中的方法
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--除了直接绑定一个方法，也可以在内联JavaScript语句中传入参数并调用方法-->
  9. <div id="app">
  10.     <button v-on:click="say('hi')">Say hi</button>
  11.     <button v-on:click="say('what')">Say what</button>
  12. </div>
  13. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  14. <script>
  15.     let vm = new Vue({
  16.         el: "#app",
  17.         data: {
  18.             message: "hello vue"
  19.         },
  20.         methods: {
  21.             say: function (message) {
  22.                 alert(message)
  23.             }
  24.         }
  25.     })
  26. </script>
  27. </body>
  28. </html>
3、内联处理器中访问原生DOM事件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--除了直接绑定一个方法，也可以在内联JavaScript语句中传入参数并调用方法-->
  9. <div id="app">
  10.     <button v-on:click="warn('Form cannot be submitted yet.', $event)">
  11.         Submit
  12.     </button>
  13. </div>
  14. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  15. <script>
  16.     let vm = new Vue({
  17.         el: "#app",
  18.         data: {
  19.             message: "hello vue"
  20.         },
  21.         methods: {
  22.             warn: function (message, event) {
  23.                 // 现在我们可以访问原生事件对象
  24.                 if (event) {
  25.                     event.preventDefault()
  26.                     alert(this)
  27.                 }
  28.                 alert(message)
  29.             }
  30.         }
  31.     })
  32. </script>
  33. </body>
  34. </html>
4、事件修饰符
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--
  9. 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
  10. 尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
  11. 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
  12.     .stop
  13.     .prevent
  14.     .capture
  15.     .self
  16.     .once
  17.     .passive
  18.     -->
  19. <div id="app">
  20.     <!--阻止单击事件继续传播-->
  21.     <a v-on:click.stop="doThis"></a>
  22.  
  23.     <!-- 提交事件不再重载页面 -->
  24.     <form v-on:submit.prevent="onSubmit"></form>
  25.  
  26.     <!-- 修饰符可以串联 -->
  27.     <a v-on:click.stop.prevent="doThat"></a>
  28.  
  29.     <!-- 只有修饰符 -->
  30.     <form v-on:submit.prevent></form>
  31.  
  32.     <!-- 添加事件监听器时使用事件捕获模式 -->
  33.     <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
  34.     <div v-on:click.capture="doThis">...</div>
  35.  
  36.     <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
  37.     <!-- 即事件不是从内部元素触发的 -->
  38.     <div v-on:click.self="doThat">...</div>
  39.  
  40.     <!--2.1.4 新增-->
  41.     <!--点击事件将只会触发一次-->
  42.     <a v-on:click.once="doThis"></a>
  43.     <!--2.3.0 新增-->
  44.     <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
  45.     <!-- 而不会等待 `onScroll` 完成  -->
  46.     <!-- 这其中包含 `event.preventDefault()` 的情况 -->
  47.     <div v-on:scroll.passive="onScroll">...</div>
  48. </div>
  49. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  50. <script>
  51.     let vm = new Vue({
  52.         el: "#app",
  53.         data: {
  54.             message: "hello vue"
  55.         }
  56.     })
  57. </script>
  58. </body>
  59. </html>
5、按键修饰符
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--
  9. 在监听键盘事件时，我们经常需要检查 详细的按键是哪个。VUe允许Wiev-on在监听键盘事件时添加按键修饰符：
  10. -->
  11. <div id="app">
  12.     <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
  13.     <input v-on:keyup.enter="submit">
  14.     <!--为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：
  15.         .enter
  16.         .tab
  17.         .delete (捕获“删除”和“退格”键)
  18.         .esc
  19.         .space
  20.         .up
  21.         .down
  22.         .left
  23.         .right
  24.         2.1.0 新增:可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
  25.         .ctrl
  26.         .alt
  27.         .shift
  28.         .meta
  29.     -->
  30.  
  31. </div>
  32. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  33. <script>
  34.     let vm = new Vue({
  35.         el: "#app",
  36.         data: {
  37.             message: "hello vue"
  38.         },
  39.         methods: {
  40.             submit: function (){
  41.                 alert(this)
  42.             }
  43.         }
  44.     })
  45. </script>
  46. </body>
  47. </html>
6、系统修饰键-exact修饰符
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--
  9. .exact修饰符允许你控制由精确的系统修饰符组合触发得到事件
  10. -->
  11. <div id="app">
  12.     <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
  13.     <button v-on:click.ctrl="onClick">即使 Alt 或 Shift 被一同按下时也会触发</button>
  14.  
  15.     <!-- 有且只有 Ctrl 被按下的时候才触发 -->
  16.     <button v-on:click.ctrl.exact="onCtrlClick">有且只有 Ctrl 被按下的时候才触发</button>
  17.  
  18.     <!-- 没有任何系统修饰符被按下的时候才触发 -->
  19.     <button v-on:click.exact="onClick">没有任何系统修饰符被按下的时候才触发</button>
  20. </div>
  21. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  22. <script>
  23.     let vm = new Vue({
  24.         el: "#app",
  25.         data: {
  26.             message: "hello vue"
  27.         },
  28.         methods: {
  29.             onClick: function () {
  30.                 alert(this)
  31.             },
  32.             onCtrlClick: function () {
  33.                 alert(this)
  34.             }
  35.         }
  36.     })
  37. </script>
  38. </body>
  39. </html>
6、系统修饰键-鼠标按钮修饰符
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--
  9. 2.2.0 新增
  10.     .left
  11.     .right
  12.     .middle
  13. 这些修饰符会限制处理函数仅响应特定的鼠标按钮。
  14. -->
  15. <div id="app">
  16.  
  17. </div>
  18. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  19. <script>
  20.     let vm = new Vue({
  21.         el: "#app",
  22.         data: {
  23.             message: "hello vue"
  24.         }
  25.     })
  26. </script>
  27. </body>
  28. </html>
7、为什么在THML中监听事件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--
  9. 为什么在HTML中监听事件
  10. 你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。
  11. 但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，
  12. 它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：
  13.  
  14.     1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
  15.  
  16.     2.因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
  17.  
  18.     3.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
  19. -->
  20. <div id="app">
  21.  
  22. </div>
  23. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  24. <script>
  25.     let vm = new Vue({
  26.         el: "#app",
  27.         data: {
  28.             message: "hello vue"
  29.         }
  30.     })
  31. </script>
  32. </body>
  33. </html>

08、表单输入绑定

1、基本用法-文本框input
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <input v-model="message" placeholder="请输入">
  10.     <p>Message is: {{ message }}</p>
  11. </div>
  12. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  13. <script>
  14.     let vm = new Vue({
  15.         el: "#app",
  16.         data: {
  17.             message: ""
  18.         }
  19.     })
  20. </script>
  21. </body>
  22. </html>
2、基本用法-多行文本testarea
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <span>Multiline message is:</span>
  10.     <p style="white-space: pre-line;">{{message}}</p>
  11.     <br/>
  12.     <textarea v-model="message" placeholder="请输入内容"></textarea>
  13. </div>
  14. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  15. <script>
  16.     let vm = new Vue({
  17.         el: "#app",
  18.         data: {
  19.             message: ""
  20.         }
  21.     })
  22. </script>
  23. </body>
  24. </html>
3、基本用法-复选框CheckBox
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--单个复选框，绑定到布尔值：-->
  10.     <input type="checkbox" id="checkbox" v-model="checked">
  11.     <label for="checkbox">{{ checked }}</label><br/>
  12.  
  13.     <!--多个复选框，绑定到同一个数组：-->
  14.     <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  15.     <label for="jack">Jack</label>
  16.     <input type="checkbox" id="john" value="John" v-model="checkedNames">
  17.     <label for="john">John</label>
  18.     <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  19.     <label for="mike">Mike</label>
  20.     <br>
  21.     <span>Checked names: {{ checkedNames }}</span>
  22. </div>
  23. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  24. <script>
  25.     let vm = new Vue({
  26.         el: "#app",
  27.         data: {
  28.             message: "hello vue",
  29.             checked: '',
  30.             checkedNames: []
  31.         }
  32.     })
  33. </script>
  34. </body>
  35. </html>
4、基本用法-单选框radio
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <input type="radio" id="one" value="One" v-model="picked">
  10.     <input type="radio" id="two" value="two" v-model="picked">
  11.     <input type="radio" id="three" value="three" v-model="picked">
  12.     <input type="radio" id="four" value="four" v-model="picked">
  13.     <br/>
  14.     <span>你的选项是：{{picked}}</span>
  15. </div>
  16. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  17. <script>
  18.     let vm = new Vue({
  19.         el: "#app",
  20.         data: {
  21.             message: "hello vue",
  22.             picked: ''
  23.         }
  24.     })
  25. </script>
  26. </body>
  27. </html>
5、基本用法-选择框selected
  1. 可以用v-model指令在表单input、textarea 及 select元素上创建双向数据绑定。
  2. 它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。
  3. 它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
  4.  
  5. v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。
  6. 你应该通过 JavaScript 在组件的 data 选项中声明初始值。
  7.  
  8. v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
  9. - text 和 textarea 元素使用 value property 和 input 事件；
  10. - checkbox 和 radio 使用 checked property 和 change 事件；
  11. - select 字段将 value 作为 prop 并将 change 作为事件。
  12.  
  13.  
  14. <!DOCTYPE html>
  15. <html lang="en">
  16. <head>
  17.     <meta charset="UTF-8">
  18.     <title>Title</title>
  19. </head>
  20. <body>
  21. <div id="app">
  22.     <!--单选时，绑定一个数据源-->
  23.     <select v-model="selected">
  24.         <option disabled value="">请选择</option>
  25.         <option>A</option>
  26.         <option>B</option>
  27.         <option>C</option>
  28.         <option>D</option>
  29.     </select><br/>
  30.     <span>你的选择是：{{selected}}</span>
  31.     <hr/>
  32.     <!--多选时，绑定一个数组数据源multiple-->
  33.     <select v-model="selectedNums"  multiple>
  34.         <option disabled value="">请选择</option>
  35.         <option>A</option>
  36.         <option>B</option>
  37.         <option>C</option>
  38.         <option>D</option>
  39.     </select><br/>
  40.     <span>你的选择是：{{selectedNums}}</span>
  41. </div>
  42. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  43. <script>
  44.     let vm = new Vue({
  45.         el: "#app",
  46.         data: {
  47.             selected: "",
  48.             selectedNums: []
  49.         }
  50.     })
  51. </script>
  52. </body>
  53. </html>
对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：
6、值绑定-单选框
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!-- 当选中时，`picked` 为字符串 "a" -->
  10.     <input type="radio" v-model="picked" value="a">{{picked}}
  11.  
  12.     <!-- `toggle` 为 true 或 false -->
  13.     <input type="checkbox" v-model="toggle">{{toggle}}
  14.  
  15.     <!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
  16.     <select v-model="selected">
  17.         <option value="abc">ABC</option>
  18.     </select>{{selected}}
  19.  
  20.     <hr/>
  21.     <input type="radio" v-model="pick" v-bind:value="a">
  22.  
  23. </div>
  24. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  25. <script>
  26.     let vm = new Vue({
  27.         el: "#app",
  28.         data: {
  29.             picked: '',
  30.             pick: "",
  31.             selected: '',
  32.             toggle: '',
  33.             a: ''
  34.         }
  35.     })
  36. </script>
  37. </body>
  38. </html>
7、值绑定-复选框
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <input
  10.             id="test"
  11.             type="checkbox"
  12.             v-model="toggle"
  13.             true-value="yes"
  14.             false-value="no"
  15.     >
  16.     <span>{{toggle}}</span>
  17. </div>
  18. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  19. <script>
  20.     let vm = new Vue({
  21.         el: "#app",
  22.         data: {
  23.             toggle: ""
  24.         }
  25.     })
  26. </script>
  27. </body>
  28. </html>
8、值绑定-选择框
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <select v-model="selected">
  10.         <!-- 内联对象字面量 -->
  11.         <option v-bind:value="{ number: 123 }">123</option>
  12.     </select>
  13. </div>
  14. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  15. <script>
  16.     let vm = new Vue({
  17.         el: "#app",
  18.         data: {
  19.             selected: ""
  20.         }
  21.     })
  22. </script>
  23. </body>
  24. </html>
9、修饰符-lazy修饰符
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。
  10.     你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：-->
  11.     <!-- 在“change”时而非“input”时更新 -->
  12.     <input v-model.lazy="msg">{{msg}}
  13. </div>
  14. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  15. <script>
  16.     let vm = new Vue({
  17.         el: "#app",
  18.         data: {
  19.             msg: ""
  20.         }
  21.     })
  22. </script>
  23. </body>
  24. </html>
10、修饰符-number修饰符
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--如果想自动将用户的输入值转为数值类型，
  10.     可以给 v-model 添加 number 修饰符：-->
  11.     <input v-model.number="age" type="number">
  12. </div>
  13. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  14. <script>
  15.     let vm = new Vue({
  16.         el: "#app",
  17.         data: {
  18.             age: ""
  19.         }
  20.     })
  21. </script>
  22. </body>
  23. </html>
11、修饰符-trim修饰符
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--如果要自动过滤用户输入的首尾空白字符，
  10.     可以给 v-model 添加 trim 修饰符：-->
  11.     <input v-model.trim="msg">{{msg}}
  12.  
  13. </div>
  14. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  15. <script>
  16.     let vm = new Vue({
  17.         el: "#app",
  18.         data: {
  19.             msg: ""
  20.         }
  21.     })
  22. </script>
  23. </body>
  24. </html>
12、用在组件上
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--HTML 原生的输入元素类型并不总能满足需求。幸好，
  10.     Vue 的组件系统允许你创建具有完全自定义行为且可复用的输入组件。
  11.     这些输入组件甚至可以和 v-model 一起使用！-->
  12. </div>
  13. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  14. <script>
  15.     let vm = new Vue({
  16.         el: "#app",
  17.         data: {
  18.             message: "hello vue"
  19.         }
  20.     })
  21. </script>
  22. </body>
  23. </html>

09、组件基础

1-基本示例
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <!--注意当点击按钮时，每个组件都会各自独立维护它的 count。
  10.     因为你每用一次组件，就会有一个它的新实例被创建-->
  11.     <!--因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，
  12.     例如 data、computed、watch、methods 以及生命周期钩子等。
  13.     仅有的例外是像 el 这样根实例特有的选项。-->
  14.     <button-counter></button-counter>
  15.     <button-counter></button-counter>
  16.     <button-counter></button-counter>
  17. </div>
  18. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  19. <script>
  20.     // 定义一个名为 button-counter 的新组件
  21.     Vue.component('button-counter', {
  22.         data: function () {
  23.             return {
  24.                 count: 0
  25.             }
  26.         },
  27.         template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  28.     })
  29.     let vm = new Vue({
  30.         el: "#app",
  31.         data: {
  32.             message: "hello vue"
  33.         }
  34.     })
  35. </script>
  36. </body>
  37. </html>
2-data必须是一个函数
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <button-counter></button-counter>
  10.     <button-counter></button-counter>
  11.     <button-counter></button-counter>
  12. </div>
  13. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  14. <script>
  15.     // 定义一个名为 button-counter 的新组件
  16.     Vue.component('button-counter', {
  17.         /*在这里我们发现组件虽然是vue实例的复用，但是组件的data是一个函数，
  18.         而不像vue实例提供一个对象，之所以一个组件的data选项必须是一个函数，
  19.         是因为每个实例可以维护一份被返回对象的独立拷贝，如果不是函数的话，
  20.         那么一个组件的数据发生变化，其他复用的数据也会随其发生同步变化*/
  21.         data: function () {
  22.             return {
  23.                 count: 0
  24.             }
  25.         },
  26.         template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  27.     })
  28.     let vm = new Vue({
  29.         el: "#app",
  30.         data: {
  31.             message: "hello vue"
  32.         }
  33.     })
  34. </script>
  35. </body>
  36. </html>
v3-组件的组织
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div>通常一个应用会以一棵嵌套的组件树的形式来组织：</div>
  9. <div>例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。</div>
  10. <div>为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。全局注册的组件可以在应用中的任何组件的模板中使用。</div>
  11.  
  12. </body>
  13. </html>
4-通过Prop向子组件传递数据
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <blog-post title="My journey with Vue"></blog-post>
  10.     <blog-post title="Blogging with Vue"></blog-post>
  11.     <blog-post title="Why Vue is so fun"></blog-post>
  12.     <hr/>
  13.     <!--自定义组件渲染数组-->
  14.     <blog-post
  15.             v-for="post in posts"
  16.             v-bind:key="post.id"
  17.             v-bind:title="post.title"
  18.     ></blog-post>
  19. </div>
  20. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  21. <script>
  22.     // 定义一个名为 button-counter 的新组件
  23.     Vue.component('blog-post', {
  24.         data: function () {
  25.             return {
  26.             }
  27.         },
  28.         props: ['title'],
  29.         template: `<h4>{{ title }}</h4>` })
  30.     let vm = new Vue({
  31.         el: "#app",
  32.         data: {
  33.             posts: [
  34.                 { id: 1, title: 'My journey with Vue' },
  35.                 { id: 2, title: 'Blogging with Vue' },
  36.                 { id: 3, title: 'Why Vue is so fun' }
  37.             ]
  38.         }
  39.     })
  40. </script>
  41. </body>
  42. </html>
5-单个根元素
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="app">
  9.     <blog-post
  10.             v-for="post in posts"
  11.             v-bind:key="post.id"
  12.             v-bind:post="post"
  13.     ></blog-post>
  14. </div>
  15. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  16. <script>
  17.     Vue.component('blog-post', {
  18.         data: {},
  19.         props: ['post'],
  20.         /*如果我们发布的博客有标题，正文，时间，评论等等组件嵌套而成
  21.         * 所以我们需要定义一个嵌套式的组件，由于每一个组件都只能有
  22.         * 一个根元素，所以我们需要在一个根元素div下定义嵌套的模板
  23.         */
  24.         template: `
  25.     <div class="blog-post">
  26.       <h3>{{ post.title }}</h3>
  27.       <div v-html="post.content"></div>
  28.     </div>
  29.   `
  30.     })
  31.     let vm = new Vue({
  32.         el: "#app",
  33.         data: {
  34.             posts: [
  35.                 {
  36.                     title: '学习vue',
  37.                     content: '从官网学习vue'
  38.                 },
  39.                 {
  40.                     title: '学习vue',
  41.                     content: '从官网学习vue'
  42.                 }
  43.             ]
  44.         }
  45.     })
  46. </script>
  47. </body>
  48. </html>
6-监听子组件事件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="blog-posts-events-demo">
  9.     <div :style="{ fontSize: postFontSize + 'em' }">
  10.         <!-- :post="post"代表组件的post属性等值为post的值-->
  11.         <!--父组件监听一个事件enlarge-text，子组件
  12.         通过调用内建的 $emit 方法并传入事件名称来触发一个事件：-->
  13.         <blog-post
  14.                 v-for="post in posts"
  15.                 v-bind:key="post.id"
  16.                 :post="post"
  17.                 v-on:enlarge-text="postFontSize += 0.1"
  18.         ></blog-post>
  19.     </div>
  20. </div>
  21. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  22. <script>
  23.     Vue.component('blog-post', {
  24.         props: ['post'],
  25.         /*嵌套组件，监听子组件的事件*/
  26.         template: `
  27.     <div class="blog-post">
  28.       <h3>{{ post.title }}</h3>
  29.       <button v-on:click="$emit('enlarge-text')">Enlarge text</button>
  30.       <div v-html="post.content"></div>
  31.     </div>
  32.   `
  33.     })
  34.  
  35.     let vm = new Vue({
  36.         el: '#blog-posts-events-demo',
  37.         data: {
  38.             posts: [
  39.                 {
  40.                     title: '学习vue',
  41.                     content: '从官网学习vue'
  42.                 },
  43.                 {
  44.                     title: '学习vue',
  45.                     content: '从官网学习vue'
  46.                 }
  47.             ],
  48.             postFontSize: 1
  49.         }
  50.     })
  51. </script>
  52. </body>
  53. </html>
7-使用事件抛出一个值
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--
  9. 有的时候用一个事件来抛出一个特定的值是非常有用的。
  10. 例如我们可能想让 <blog-post> 组件决定它的文本要放大多少。
  11. 这时可以使用 $emit 的第二个参数来提供这个值：
  12. -->
  13. <div id="blog-posts-events-demo">
  14.     <div :style="{ fontSize: postFontSize + 'em' }">
  15.       <!--通过 $event 访问到被抛出的这个值-->
  16.         <blog-post
  17.                 v-for="post in posts"
  18.                 v-bind:key="post.id"
  19.                 :post="post"
  20.                 v-on:enlarge-text="postFontSize += $event"
  21.         ></blog-post>
  22.     </div>
  23. </div>
  24. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  25. <script>
  26.     Vue.component('blog-post', {
  27.         props: ['post'],
  28.         /*v-on:click="$emit('enlarge-text', 0.5)"中的0.5与父组件监听的$event对应*/
  29.         template: `
  30.     <div class="blog-post">
  31.       <h3>{{ post.title }}</h3>
  32.       <button v-on:click="$emit('enlarge-text', 0.5)">Enlarge text</button>
  33.       <div v-html="post.content"></div>
  34.     </div>
  35.   `
  36.     })
  37.  
  38.     let vm = new Vue({
  39.         el: '#blog-posts-events-demo',
  40.         data: {
  41.             posts: [
  42.                 {
  43.                     title: '学习vue',
  44.                     content: '从官网学习vue'
  45.                 },
  46.                 {
  47.                     title: '学习vue',
  48.                     content: '从官网学习vue'
  49.                 }
  50.             ],
  51.             postFontSize: 1
  52.         }
  53.     })
  54. </script>
  55. </body>
  56. </html>
8-在组件上使用v-model
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--
  9. 使用方法总结
  10.     首先我们看第12行标签，，通过v-model绑定vue实例数据源的searchText属性，
  11.     这样就等价于将数据源的数据绑定到组件custom-input的value属性上面，从而实现数据双向绑定-->
  12. <div id="app">
  13.     <custom-input v-model="searchText"></custom-input>
  14.     {{searchText}}
  15.     <!--上面的表达式等价于下面这一条-->
  16.     <custom-input v-bind:value="searchText"></custom-input>
  17.     {{searchText}}
  18. </div>
  19. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  20. <script>
  21.  
  22.     Vue.component('custom-input', {
  23.         props: ['value'],
  24.         /*:value这个value是props属性里面的*/
  25.         template: " <input v-bind:value=\"value\" v-on:input=\"$emit('input', $event.target.value)\">"
  26.     })
  27.  
  28.     let vm = new Vue({
  29.         el: "#app",
  30.         data: {
  31.             searchText: ''
  32.         },
  33.         methods: {
  34.         }
  35.     })
  36. </script>
  37. </body>
  38. </html>
9-通过槽分发内容
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--
  9. 和HTML元素一样，我么经常需要向一个组件传递内容，比如下面
  10. -->
  11. <div id="app">
  12.     <alert-box>
  13.         <span>Something bad happened.</span><br/>
  14.     </alert-box>
  15. </div>
  16. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  17. <script>
  18.     // 定义一个名为 button-counter 的新组件
  19.     Vue.component('alert-box', {
  20.         template: `
  21.     <div class="demo-alert-box">
  22.       <strong>Error!</strong><br/>
  23.       <slot></slot>
  24.       <slot></slot>
  25.     </div>
  26.   `})
  27.     let vm = new Vue({
  28.         el: "#app",
  29.         data: {
  30.             message: "hello vue"
  31.         }
  32.     })
  33. </script>
  34. </body>
  35. </html>
10-动态插件
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--动态插件的意思：不同组件之间进行动态切换，比如点击不同分类
  9.     如何实现动态组件：通过在<component>中添加一个特殊元素is attribute来实现-->
  10. <div id="app">
  11.     <button-counter></button-counter>
  12. </div>
  13. <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"  type="text/javascript" charset="utf-8"></script>
  14. <script>
  15.     // 定义一个名为 button-counter 的新组件
  16.     Vue.component('button-counter', {
  17.         data: function () {
  18.             return {
  19.                 count: 0
  20.             }
  21.         },
  22.         template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
  23.     })
  24.     let vm = new Vue({
  25.         el: "#app",
  26.         data: {
  27.             message: "hello vue"
  28.         }
  29.     })
  30. </script>
  31. </body>
  32. </html>
11-解析DOM模板时的注意事项
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <!--
  9. 有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，
  10. 对于哪些元素可以出现在其内部是有严格限制的。而有些元素，
  11. 诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
  12.  
  13. -->
  14. <table>
  15.     <blog-post-row></blog-post-row>
  16. </table>
  17. <!--这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，
  18. 并导致最终渲染结果出错。幸好这个特殊的 is attribute 给了我们一个变通的办法：-->
  19. <table>
  20.     <tr is="blog-post-row"></tr>
  21. </table>
  22. </body>
  23. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/475171
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号