-
【Vue】模块基本语法「上篇」
Vue基础语法知识
在这篇文章中，我们将介绍Vue.js的基础语法知识。Vue.js是一种用于构建用户界面的现代JavaScript框架，它采用了MVVM（Model-View-ViewModel）的设计模式。本文将详细讨论以下主题：一、插值
1.1 文本
在Vue中，我们可以使用双大括号{{}}来进行文本插值。例如，{{ message }}可以将message变量的值显示在页面上。
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> <style type="text/css"> .f30{ font-size: 30px; } style> head> <body> <div id="app"> <p>文本p> {{msg}} div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { msg:'hello', }; } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
1.2 v-html
如果需要在页面中渲染HTML代码，可以使用v-html指令。通过将数据属性中的HTML代码绑定到元素上，Vue会将其解析并渲染出来。
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> <style type="text/css"> .f30{ font-size: 30px; } style> head> <body> <div id="app"> <p>文本p> {{msg}} <b :class="msg2" v-html="msg1">b> div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { msg:'hello', msg1:' hello 小b' }; } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
1.3数据双向绑定(v-model)
- 绑定多个复选框
如果需要绑定多个复选框的选中状态，可以将一个数组作为v-model的值，并使用value属性指定每个复选框的值。
- 1
绑定下拉框
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> head> <body> <div id="app"> <P>v-if/v-else-if/v-else/P> <input v-model="score"/><br> <option v-for="h in hobby" :value="h.id">{{h.name}}option> div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { score:69, isShow:false, arr: [1, 2, 3, 4], likes: [{name:'lb',id:1}, {name:'lx',id:2}, {name:'ld',id:3}], hobby:[{name:'洗浴',id:1}, {name:'洗头',id:2}, {name:'大保健',id:3}], evname:'click', }; } ,methoed:{ test(){ alert('点我试试') } } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> head> <body> <div id="app"> <div v-for="h in hobby"> {{h.name}} div> div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { score:69, isShow:false, arr: [1, 2, 3, 4], likes: [{name:'lb',id:1}, {name:'lx',id:2}, {name:'ld',id:3}], hobby:[{name:'洗浴',id:1}, {name:'洗头',id:2}, {name:'大保健',id:3}], evname:'click', }; } ,methoed:{ test(){ alert('点我试试') } } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
二、指令
2.1 v-if|v-else|v-else-if
通过v-if、v-else和v-else-if指令，我们可以根据条件来控制元素的显示和隐藏。根据不同的条件，只会渲染符合条件的元素。
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> head> <body> <div id="app"> <P>v-if/v-else-if/v-else/P> <input v-model="score"/><br> <b v-if="score <60">不及格b> <b v-else-if="score >60 && score <70">及格b> <b v-else-if="score >=70 && score <80">一般b> <b v-else-if="score >=80 && score <90">良好b> <b v-else="">优秀b> <b v-if="isShow">展示b> <b v-show="isShow">展示b> div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { score:69, isShow:false, arr: [1, 2, 3, 4], likes: [{name:'lb',id:1}, {name:'lx',id:2}, {name:'ld',id:3}], hobby:[{name:'洗浴',id:1}, {name:'洗头',id:2}, {name:'大保健',id:3}], evname:'click', }; } ,methoed:{ test(){ alert('点我试试') } } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
2.2 v-show
与v-if类似，v-show指令也可以根据条件来控制元素的显示和隐藏。不同之处在于，使用v-show时，元素始终会被渲染到页面中，只是通过CSS的display属性控制其可见性。
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> head> <body> <div id="app"> <P>v-if/v-else-if/v-else/P> <b v-if="isShow">展示b> <b v-show="isShow">展示b> div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { score:69, isShow:false, arr: [1, 2, 3, 4], likes: [{name:'lb',id:1}, {name:'lx',id:2}, {name:'ld',id:3}], hobby:[{name:'洗浴',id:1}, {name:'洗头',id:2}, {name:'大保健',id:3}], evname:'click', }; } ,methoed:{ test(){ alert('点我试试') } } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
2.3 v-for
通过v-for指令，我们可以遍历数组或对象，并为每个元素生成相应的内容。可以使用v-for="(item, index) in items"的语法，来获取遍历的项和索引。
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> head> <body> <div id="app"> <br> <option v-for="h in hobby" :value="h.id">{{h.name}}option> <div v-for="h in hobby"> {{h.name}} div> div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { score:69, isShow:false, arr: [1, 2, 3, 4], likes: [{name:'lb',id:1}, {name:'lx',id:2}, {name:'ld',id:3}], hobby:[{name:'洗浴',id:1}, {name:'洗头',id:2}, {name:'大保健',id:3}], evname:'click', }; } ,methoed:{ test(){ alert('点我试试') } } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
2.4 动态参数
Vue的指令中，可以使用动态参数来传递变量或表达式。通过使用方括号将指令参数括起来，可以动态地绑定不同的值。
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> head> <body> <div id="app"> div> <input v-model="evname"/> <button v-on:[evname]="test">点我button> div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { score:69, isShow:false, arr: [1, 2, 3, 4], likes: [{name:'lb',id:1}, {name:'lx',id:2}, {name:'ld',id:3}], hobby:[{name:'洗浴',id:1}, {name:'洗头',id:2}, {name:'大保健',id:3}], evname:'click', }; } ,methoed:{ test(){ alert('点我试试') } } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
三、过滤器
3.1 局部过滤器
Vue允许我们定义局部过滤器，用于对数据进行格式化和处理。通过在Vue实例中定义filters对象，我们可以创建自定义的过滤器函数，并在模板中使用。
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> <script src="date.js">script> <script src="jquery.js">script> head> <body> <div id="app"> <P>v-if/v-else-if/v-else/P> {{msg}} <br> {{msg|fa}} <br> {{msg|fa|fb}} <br> {{msg|fc(3,10)}} div> <script type="text/javascript"> Vue.filter('filterName', function (value) { return fmtDate(value) }); new Vue ({ el:'#app', filters:{ 'fa':function(v){ return v.substring(0,6); }, 'fb':function(v){ return v.substring(2,4); }, 'fc':function(v,begin,end){ return v.substring(begin,end); }, }, data(){ return { msg:'你的小狗没有了，你真的该死，本地的大部分。。。', time:new Date(), }; } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
3.2 全局过滤器
除了局部过滤器之外，Vue还提供了全局过滤器的功能。通过在Vue实例的filters属性中定义过滤器函数，可以在整个应用程序范围内使用。
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> <script src="date.js">script> <script src="jquery.js">script> head> <body> <div id="app"> <br> {{time}} {{time|filterName}} div> <script type="text/javascript"> Vue.filter('filterName', function (value) { return fmtDate(value) }); new Vue ({ el:'#app', filters:{ 'fa':function(v){ return v.substring(0,6); }, 'fb':function(v){ return v.substring(2,4); }, 'fc':function(v,begin,end){ return v.substring(begin,end); }, }, data(){ return { msg:'你的小狗没有了，你真的该死，本地的大部分。。。', time:new Date(), }; } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
四、计算属性&监听属性
4.1 计算属性
计算属性是一种利用已有的数据生成新数据的方式。通过在Vue实例中定义计算属性，我们可以根据需要对数据进行处理，并在模板中使用。
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> head> <body> <div id="app"> {{score}} 单价：<input v-model="price"> 数量：<input v-model="num"> 小计{{count}} div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { price:79, num:1, m:1000, km:1 }; }, computed:{ count:function(){ return this.price*this.num; } }, watch:{ km:function(v){ this.m=parseInt(v)*1000; }, m:function(v){ this.km=parseInt(v)/1000; } , } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
4.2 监听属性
当我们需要在数据发生变化时执行一些额外的逻辑时，可以使用监听属性。通过在Vue实例中定义watch属性，我们可以监视数据的变化，并在变化时执行相应的操作。
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js">script> head> <body> <div id="app"> <br> 千米：<input v-model="km"> <br> 米：<input v-model="m"> div> <script type="text/javascript"> new Vue ({ el:'#app', data(){ return { price:79, num:1, m:1000, km:1 }; }, computed:{ count:function(){ return this.price*this.num; } }, watch:{ km:function(v){ this.m=parseInt(v)*1000; }, m:function(v){ this.km=parseInt(v)/1000; } , } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
五、案例实操
5.1 购物车案例
通过以上所学的Vue基础知识，我们可以创建一个简单的购物车页面。在这个案例中，我们将使用插值、指令、过滤器等技术来实现购物车列表的展示、商品数量的增加和减少，以及总价的计算。
DOCTYPE html> <html> <head> <title>购物车title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script> <style> /* 添加样式表 */ body { font-family: Arial, sans-serif; background-color: #f7f7f7; } #app { margin: 20px; } h1 { text-align: center; color: #333; margin-bottom: 20px; } table { border-collapse: collapse; width: 100%; background-color: #fff; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } th, td { padding: 10px; text-align: left; } th { background-color: #f7f7f7; } tr:nth-child(even) { background-color: #f2f2f2; } input[type="number"] { width: 50px; padding: 5px; } button { background-color: #4caf50; color: #fff; border: none; padding: 8px 16px; cursor: pointer; } button:hover { background-color: #45a049; } style> head> <body> <div id="app"> <h1>购物车h1> <table> <thead> <tr> <th>商品th> <th>价格th> <th>数量th> <th>小计th> tr> thead> <tbody> <tr v-for="(item, index) in cartItems"> <td>{{ item.name }}td> <td>{{ item.price }}td> <td> <input type="number" v-model="item.shu" min="0" @input="updateSubtotal(item)"> td> <td>{{ item.subtotal }}td> <td> <button @click="increaseshu(item)">增加button> <button @click="decreaseshu(item)">减少button> td> tr> tbody> <tr> <td colspan="3">总计td> <td>{{ total }}td> tr> table> div> <script> new Vue({ el: '#app', data: { cartItems: [ { name: '娃娃', price: 10, shu: 1, subtotal: 10 }, { name: '小熊', price: 20, shu: 2, subtotal: 40 }, { name: '大熊', price: 30, shu: 3, subtotal: 90 } ] }, computed: { total: function() { return this.cartItems.reduce((sum, item) => sum + item.subtotal, 0); } }, methods: { updateSubtotal: function(item) { item.subtotal = item.price * item.shu; }, increaseshu: function(item) { item.shu++; this.updateSubtotal(item); }, decreaseshu: function(item) { if (item.shu > 0) { item.shu--; this.updateSubtotal(item); } } } }); script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
-
相关阅读:
【Python_Zebra斑马打印机编程学习笔记（五）】基于zebra控制斑马打印机实现自动化打印标贴
论企业数字化和IT组织思考
网络编程Demo：Java的阻塞与非阻塞模式以及Netty
前端监控日志产品
Android音乐播放器（三）轮播图
AI产品经理 | 入行AI大模型的必备知识
Java8新特性Lambda表达式详解
mybatis 多对多对多 字段名一致问题解决
【git常用命令以及工作中都怎么工作】
金仓数据库 KingbaseES 插件参考手册 S (1)
- 原文地址：https://blog.csdn.net/m0_74018330/article/details/133019418
