• vue模板语法（上集）

    为什么要用Vue模板语法

    Vue模板语法是Vue.js框架的一部分，使用它有以下几个优点：

    1. 简化了HTML代码编写：Vue模板语法支持简化HTML标签和属性的写法，使得代码更加简洁易读，提高开发效率。
    2. 数据绑定：Vue模板语法支持数据双向绑定，可以将数据自动更新到对应的DOM元素，从而避免了手动操作DOM的麻烦。
    3. 条件渲染：Vue模板语法支持条件渲染，可以根据特定条件来渲染特定的内容，从而提升用户体验。
    4. 循环渲染：Vue模板语法支持循环渲染，可以根据特定的数据进行循环渲染相同结构的元素，从而避免了重复编写代码的麻烦。 综上所述，Vue模板语法简化了HTML代码编写，提供了数据绑定、条件渲染、循环渲染等功能，使得Vue.js开发更加高效、可维护和易于扩展。

    插值

    插值不仅可以显示数据和JavaScript表达式，还可以显示Vue.js指令、事件和组件等内容，可以帮助开发者更加方便地操作数据和DOM元素，提高开发效率和代码可读性。

    需要注意的是，Vue模板语法插值只是一种数据绑定的方式，插值中的内容必须是一些安全的文本，不能够包含HTML标签或其他恶意代码，否则会出现安全问题。对于需要渲染HTML标签的内容，应该使用Vue.js提供的v-html指令

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    6. 			<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 		<title>插值title>
    8. 		
    9. 		<style type="text/css">
    10. 			.f30{
    11. 				font-size:30px;
    12. 			}
    13. 		style>
    14. 	head>
    15. 	<body>
    16. 		
    17. 		<div id="app">
    18. 			<p>文本p>
    19. 			{{msg}}
    20. 			<p>html解析p>
    21. 			{{msg2}}<br>
    22. 			<b :class="msg3"  v-html="msg2">b>
    23. 			<p>表达式p>
    24. 			{{mun+1}}
    25. 			{{warn.substr(0,2)}}
    26. 			<input v-model="ok" />
    27. 			{{ok?'成功了':'失败了'}}
    28. 		div>	
    29. 				
    30. 		<script type="text/javascript">
    31. 		new Vue({
    32. 			el:"#app",
    33. 			data(){
    34. 				return{
    35. 					msg:'hello  小B 你相信光吗？',
    36. 					msg2:'hello 小B',
    37. 					msg3:'f30',
    38. 					num:6,
    39. 					warn:'听到我的招换了吗？',
    40. 					ok:true
    41. 					};
    42. 			}
    43. 		});
    44. 		
    45. 		script>
    46. 	
    47. 	body>
    48. html>

    指令

     上述只是常用的一些指令，Vue.js还提供了很多强大的指令和功能，可以根据实际需要选择合适的指令使用。同时需要注意的是，在使用Vue指令时需要遵守Vue的规范，正确使用Vue指令才能发挥出它的优点，提高开发效率和代码质量。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    6. 			<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 		<title>指令title>
    8. 		
    9. 	head>
    10. 	<body>
    11. 		<div id="app">
    12. 			<p>v-if/v-else-if/v-elsep>
    13. 		<input v-model="score"/><br />
    14. 		<b v-if="score < 60">不及格b>
    15. 		<b v-else-if="score>60 && score< 70">及格b>
    16. 		<b v-else-if="score>70 && score< 80">一般b>
    17. 		<b v-else-if="score>80 && score< 90">良好b>
    18. 		<b v-else="">优秀b>
    19. 		
    20. 		<p>v-showp>
    21. 		v-if 与v-show的区别？<br>
    22. 		<b v-if="isShow">展示b>
    23. 		<b v-show="isShow">展示b>
    24. 		<p>v-forp>
    25. 		<i v-for="a in arr">{{a}}  i>
    26. 		<i v-for="i,u in users">{{u.name}}  {{i}}i>
    27. 		<select>
    28. 			<option v-for ="h in hobby" :value="h.id">{{h.name}}option>
    29. 		select>
    30. 		
    31. 		<div id=""  v-for="h in hobby">
    32. 			<input type="checkbox" name="hobby" :value="h.id"/>{{h.name}}
    33. 		div>
    34. 		<p>动态参数p>
    35. 		<input v-model="evname" />
    36. 		<button v-on:[evname]="test">点我button>
    37. 		div>
    38. 		<script type="text/javascript">
    39. 		new Vue({
    40. 			el:"#app",
    41. 			data(){
    42. 				return{
    43. 					score:69,
    44. 					isShow:false,
    45. 					arr: [1,2,3,4],
    46. 					users:[{
    47. 						name:'lb',id:1
    48. 					},{
    49. 						name:'lx',id:2
    50. 					},{
    51. 						name:'lz',id:3
    52. 					},{
    53. 						name:'lw',id:4
    54. 					}],
    55. 					hobby:[{
    56. 						name:'洗脚',id:1
    57. 						},{
    58. 							name:'洗脚',id:2
    59. 						},{
    60. 							name:'洗脚',id:3
    61. 						},{
    62. 							name:'SPA',id:4
    63. 					}],
    64. 					evname:'click'
    65. 					};
    66. 			},
    67. 			methods:{
    68. 				test(){
    69. 					//单机事件，
    70. 					alert('点我试试!!! ');
    71. 				}
    72. 			}
    73. 		});
    74. 		
    75. 		script>
    76. 	body>
    77. html>

    过滤器

    Vue.js的过滤器是一个强大的功能，可以让我们轻松地处理模板中的数据，提高代码的可读性和可维护性。同时需要注意的是，过滤器只适合于简单的数据格式化和处理，如果需要进行复杂的数据操作，应该使用计算属性或方法。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    6. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 		<script src="date.js" type="text/javascript" charset="UTF-8">script>
    8. 		<title>过滤器title>
    9. 	head>
    10. 	<body>
    11. 		<div id="app">
    12. 			<p>局部过滤器基本应用p>
    13. 			{{msg}}<br />
    14. 			{{msg |filterA}}
    15. 			<p>局部过滤器串行应用p>
    16. 			{{msg}}<br />
    17. 			{{msg |filterA |filterB}}
    18. 			<p>局部过滤器传参p>
    19. 			{{msg | filterC(3,10)}}<br />
    20. 			<p>全局过滤器p>
    21. 			{{time}}<br />
    22. 			{{time | fmtDateFilter}}
    23.  
    24. 		div>
    25. 		<script type="text/javascript">
    26. 			Vue.filter('fmtDateFilter', function(value) {
    27. 				//value表示要过滤的内容
    28. 				return fmtDate(value);
    29. 			});
    30. 			new Vue({
    31. 				el: "#app",
    32. 				filters: {
    33. 					'filterA': function(v) {
    34. 						return v.substring(0, 6)
    35. 					},
    36. 					'filterB': function(v) {
    37. 						return v.substring(2, 5)
    38. 					},
    39. 					'filterC': function(v, begin, end) {
    40. 						return v.substring(begin, end);
    41. 					}
    42. 				},
    43. 				data() {
    44. 					return {
    45. 						msg: '想死了',
    46. 						time: new Date()
    47. 					}
    48. 				},
    49. 				methods: {
    50. 					test() {
    51. 						alert('点我试试！！！');
    52. 					}
    53. 				}
    54. 			});
    55. 		script>
    56. 	body>
    57. html>

    排座

    1. html>
    2. <html>
    3. 	<head>
    4. 		<title>排座title>
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 	head>
    7. 	<body>
    8. 		<div id="app">
    9. 			<h2>排座h2>
    10. 			<input type="text" v-model="seatInput1">
    11. 			<input type="text" v-model="seatInput2">
    12. 			<input type="text" v-model="seatInput3">
    13. 			<hr>
    14. 			<h3>用户:h3>
    15. 			<ul>
    16. 				
    17. 				<li v-for="user in filteredUsers" :key="user.id">{{ user.name }}li>
    18. 			ul>
    19. 			<hr>
    20. 		div>
    21.  
    22. 		<script>
    23. 			new Vue({
    24. 				el: '#app',
    25. 				data: {
    26. 					seatInput1: '',
    27. 					seatInput2: '',
    28. 					seatInput3: '',
    29. 					users: [{
    30. 							id: 1,
    31. 							name: '刘鑫'
    32. 						},
    33. 						{
    34. 							id: 2,
    35. 							name: '刘文'
    36. 						},
    37. 						{
    38. 							id: 3,
    39. 							name: '刘兵'
    40. 						},
    41. 						{
    42. 							id: 4,
    43. 							name: '刘志'
    44. 						},
    45. 						{
    46. 							id: 5,
    47. 							name: '大B'
    48. 						}
    49. 					]
    50. 				},
    51. 				/* 定义一个filteredUsers计算属性 */
    52. 				computed: {
    53. 				/* 使用filter方法来过滤users数组中的元素。filter方法接受一个回调函数作为参数，
    54. 				该回调函数会对数组中的每个元素进行判断，并返回一个新的数组，其中包含满足条件的元素。 */
    55. 				filteredUsers() {
    56. 					return this.users.filter(
    57. 					/* 使用=>箭头函数的语法来定义一个匿名函数。这个匿名函数接受一个参数user，
    58. 					表示users数组中的每个元素。 */
    59. 				user => {
    60. 				/* 使用逻辑运算符&&来判断user.name是否不等于seatInput1、seatInput2和seatInput3的值。
    61. 				如果满足这个条件，说明user.name不等于任何一个输入框的值，那么这个元素就会被保留在过滤后
    62. 				的数组中。 */
    63. 					return user.name !== this.seatInput1 &&
    64. 						user.name !== this.seatInput2 &&
    65. 						user.name !== this.seatInput3
    66. 							});
    67. 					}
    68. 				}
    69. 			});
    70. 		script>
    71. 	body>
    72. html>

    计算属性监听属性 

    计算属性

    Vue.js的计算属性是一个非常有用的功能，它可以提高代码的可读性和可维护性，同时也可以实现复杂的数据计算和处理。如果需要进行非响应式的数据操作，建议使用methods方法。

    监听属性 

    在上面的例子中，我们定义了一个数据属性message，并且使用watch选项来监听该数据属性的变化。当该数据属性发生变化时，会触发watch中对应的函数，实现对数据属性变化的响应。

    需要注意的是，使用watch选项来监听数据属性的变化时，需要在Vue实例中显式地定义响应式的数据属性，并且需要将计算属性转为响应式的数据属性，以便在watch选项中进行监听。

    总的来说，Vue.js的监听属性功能可以帮助我们实现对数据属性的变化响应，可以在实际开发过程中提高代码的可读性和可维护性。

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js">script>
    6. 			<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    7. 		<title>计算属性监听属性title>
    8. 		<style type="text/css">
    9. 			.f30{
    10. 				font-size: 30px;
    11. 			}
    12. 		style>
    13. 	head>
    14. 	<body>
    15. 		<div id="app">
    16. 			<p>计算机属性p>
    17. 			单价:<input v-model="price" />
    18. 			数量:<input v-model="num" />
    19. 			小计: {{count}}
    20. 			<p>监听属性p>
    21. 			千米: <input v-model="km" /><br />
    22. 			米：<input v-model="m" />
    23. 		div>
    24. 		<script>
    25. 			new Vue({
    26. 				el:'#app',
    27. 				data(){
    28. 					return{
    29. 						price:79,
    30. 						num:1,
    31. 						m:1000,
    32. 						km:1
    33. 					};
    34. 					},
    35. 					computed:{
    36. 						count:function(){
    37. 							return this.price * this.num;
    38. 						
    39. 					}
    40. 				},
    41. 				watch:{
    42. 					km:function(v){
    43. 					//v指的是被监听的属性，是km
    44. 						this.m =parseInt(v) * 1000;
    45. 					},
    46. 					m:function(v){
    47. 					//v指的是被监听的属性，是m
    48. 						this.km = parseInt(v)/1000;
    49. 					}
    50. 				}
    51. 			});
    52. 			
    53. 			
    54. 		script>
    55. 	body>
    56. html>

     今天就分享到这了谢谢各位的支持，谢谢大家！

  • 相关阅读:
    mysql的基本用法
    车辆网络安全开发
    VUE（混入mixin、计算属性computed、监听watch）
    屏幕不清晰，可能是你的设置不正确
    前端的页面代码
    SpringCloud + SpringGateway 解决Get请求传参为特殊字符导致400无法通过网关转发的问题
    学透shell 带你写常用的100个 shell 脚本(一)定时删除过期文件
    Nginx-动静分离与 URLRwrite
    基于电动汽车的带时间窗的路径优化(Python&Matlab代码实现）
    CSS文本样式详解
  • 原文地址：https://blog.csdn.net/djssubddbj/article/details/133018342