• Vue（模板语法1）

    目录

    一、插值

    1.1 文本

    1.2 Html

    1.3 属性

    1.4 表达式

    1.5 class绑定

    1.6 style绑定

    二、指令

    2.1v-if|v-else|v-else-if

    2.2  v-show

    2.3 v-for

    三、过滤器

    四、计算属性&监听属性

    计算属性

    监听属性

    五、动态参数

    一、插值

    1.1 文本

    {{msg}}

    1. <p>文本p>
    2. <h2>{{msg}}h2>
    3. <script type="text/javascript">
    4. 		new Vue({
    5. 			el: '#app',
    6. 			data() {
    7. 				return {
    8. 					msg: 'hellow!!!',
    9. 				};
    10. 			}
    11. 		})
    12. 	script>

     

    1.2 Html

     使用v-html指令用于输出html代码

    1. <p>html串p>
    2. <div v-html="htmlstr">div>
    3. <script type="text/javascript">
    4. 		// 绑定边界	ES6具体体现
    5. 		new Vue({
    6. 			el: '#app',
    7. 			data() {
    8. 				return {
    9. 					htmlstr:'
      这是一个html片段
      ',
    10. 				};
    11. 			}
    12. 		})
    13. 	script>

     

    1.3 属性

      HTML属性中的值应使用v-bind指令

    1. <p>vue中的属性 v-bind属性绑定p>
    3. <a v-bind:href="hrefstr">百度a>
    4. <input v-bind:value="valuestr"/>
    5. <script type="text/javascript">
    6. 		new Vue({
    7. 			el: '#app',
    8. 			data() {
    9. 				return {
    10. 					hrefstr:'http://www.baidu.com',
    11. 					valuestr:'22223',
    12. 					
    13. 				};
    14. 			}
    15. 		})
    16. 	script>

    1.4 表达式

     Vue提供了完全的JavaScript表达式支持

    1. <p>表达式 Vue中可以对变量进行二次处理p>
    2. {{str.substring(0,4).toUpperCase()}}<br>
    3. 			
    4. 张三:{{number+1}}<br>
    5. 			
    6. {{ok  ? '1' : '0'}}<br>
    7. 			
    8. <span :id="'goods_id_'+idstr">书籍信息span><br>
    9. <script type="text/javascript">
    10. 		new Vue({
    11. 			el: '#app',
    12. 			data() {
    13. 				return {
    14. 					str:'Java是最牛的语言',
    15. 					number:90,
    16. 					ok:true,
    17. 					idstr:66,
    18. 				};
    19. 			}
    20. 		})
    21. 	script>

    span标签id已自动生成

    1.5 class绑定

    1. <p>class绑定p>
    2. <span :class="classStr">文本内容span>
    3. <script type="text/javascript">
    4. 		new Vue({
    5. 			el: '#app',
    6. 			data() {
    7. 				return {
    8. 					classStr:'a',
    9. 				};
    10. 			}
    11. 		})
    12. 	script>

    1.6 style绑定

    1. <p>style绑定p>
    2. <span :style="styleStr">文本内容span>
    3. styleStr:'color:yellow;'

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7. 		<style>
    8. 			.a{
    9. 				color: red;
    10. 			}
    11. 		style>
    12. 	head>
    13. 	<body>
    14. 		
    15. 		<div id="app">
    16. 			<p>文本p>
    17. 			<h2>{{msg}}h2>
    18. 			
    19. 			<p>html串p>
    20. 			<div v-html="htmlstr">div>
    21. 			
    22. 			<p>vue中的属性 v-bind属性绑定p>
    23. 			
    24. 			<a v-bind:href="hrefstr">百度a>
    25. 			<input v-bind:value="valuestr"/>
    26. 			
    27. 			<p>表达式 Vue中可以对变量进行二次处理p>
    28. 			{{str.substring(0,4).toUpperCase()}}<br>
    29. 			
    30. 			张三:{{number+1}}<br>
    31. 			
    32. 			{{ok  ? '1' : '0'}}<br>
    33. 			
    34. 			<span :id="'goods_id_'+idstr">书籍信息span><br>
    35. 			
    36. 			<p>class绑定p>
    37. 			<span :class="classStr">文本内容span>
    38. 			
    39. 			<p>style绑定p>
    40. 			<span :style="styleStr">文本内容span>
    41. 		div>
    42. 	body>
    43. 	<script type="text/javascript">
    44. 		new Vue({
    45. 			el: '#app',
    46. 			data() {
    47. 				return {
    48. 					msg: 'hellow!!!',
    49. 					htmlstr:'
      这是一个html片段
      ',
    50. 					hrefstr:'http://www.baidu.com',
    51. 					valuestr:'22223',
    52. 					str:'Java是最牛的语言',
    53. 					number:90,
    54. 					ok:true,
    55. 					idstr:66,
    56. 					classStr:'a',
    57. 					styleStr:'color:yellow;'
    58. 				};
    59. 			}
    60. 		})
    61. 	script>
    62. html>

    二、指令

     指的是带有“v-”前缀的特殊属性

    2.1v-if|v-else|v-else-if

    1.             <p>v-if|v-else|v-else-ifp>
    2. 			请输入分数：<input v-model="score"/>
    3. 			对应的结果：
    4. 			<div v-if="score>80">优秀div>
    5. 			<div v-else-if="score>60">良好div>
    6. 			<div  v-else="score<60">差评div>
    7.             <script type="text/javascript">
    8. 		        new Vue({
    9. 			        el: '#app',
    10. 			            data() {
    11. 				            return {
    12. 				        	score:0,
    13. 			        }
    14. 		        })
    15. 	        script>

    2.2  v-show

    1. <p>v-showp>
    2. 请输入结果：<input v-model="showflag"/>	
    3. <span v-show="showflag">show:展示与否span>
    4. <span v-if="showflag">if:展示与否span>
    5. showflag:false,

    与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none" 

     v-show与v-if相比v-showhtml代码可以显示出来，而v-if显示不出来,只不过v-show用display隐藏了起来

    2.3 v-for

    类似JS的遍历，

     遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

     遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

    1. <p>v-forp>
    2. <select>
    3. <option v-for="h in hobby" :valu="h.id">{{h.name}}option>
    4. select>
    5. hobby:[
    6. 						{id:"1",name:"洗头"},
    7. 						{id:"2",name:"按摩"},
    8. 						{id:"3",name:"足浴"}
    9. 					],

    {{h.name}}文本不能写到标签外，如这样写的话必须在外面套一个div标签

    1. <div v-for="h in hobby">
    2. 			<input  :value="h.id" type="checkbox"/>{{h.name}}
    3. 			div>

     

    三、过滤器

    全局过滤器

    Vue.filter('filterName', function (value) {

     // value 表示要过滤的内容

    });

    局部过滤器

    new Vue({

     filters:{'filterName':function(value){}}

    });

    vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

    {{ name | capitalize }}

    注1：过滤器函数接受表达式的值作为第一个参数

    注2：过滤器可以串联     

    {{ message | filterA | filterB }}

    注3：过滤器是JavaScript函数，因此可以接受参数：

    {{ message | filterA('arg1', arg2) }}

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script>
    6. 		<title>title>
    7. 	head>
    8. 	<body>
    9. 		<div id="app">
    10. 			{{msg|strSplit|strSplit2}}
    11. 			
    12. 			
    13. 			{{msg|strSplit3(2,5)}}
    14. 			{{msg|strSplit3(1,4)}}
    15. 		div>
    16. 	body>
    17. 	<script type="text/javascript">
    18. 		Vue.filter('strSplit', function(value){
    19. 			console.log(value);
    20. 			return value.substring(0,5);
    21. 		})
    22. 		Vue.filter('strSplit2', function(value){
    23. 			console.log(value);
    24. 			return value.substring(3,5);
    25. 		})
    26. 		Vue.filter('strSplit3', function(value,a,b){
    27. 			console.log(value);
    28. 			return value.substring(a,b);
    29. 		})
    30. 		new Vue({
    31. 			el: '#app',
    32. 			data() {
    33. 				return {
    34. 					msg:'hello vue!!!'
    35. 				} 
    36. 			}
    37. 		})
    38. 	script>
    39. html>

    四、计算属性&监听属性

    计算属性

    计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新 computed:{}

    1. <p>计算属性:单方面影响p>
    2. 			请输入第一个数：<input v-model="x" /><br>
    3. 			请输入第二个数：<input v-model="y" /><br>
    4. 			结果：{{addFlag}}
    5.  
    6. data() {
    7. 				return {
    8. 					x: 0,
    9. 					y: 0,
    10. 					km:0,
    11. 					m:0
    12. 				}
    13. 			},
    14. 			computed: {
    15. 				//计算属性
    16. 				addFlag: function() {
    17. 					return parseInt(this.x) + parseInt(this.y);
    18. 				}
    19. 			},

    计算属性是当方面的影响 

     

    监听属性

     监听属性 watch，我们可以通过 watch 来响应数据的变化

       watch:{}

    1. <p>监听属性:相互影响 p>
    2. 			请输入千米：<input v-model="km" /><br>
    3. 			请输入米：<input v-model="m" /><br>
    4.  
    5. watch:{
    6. 				km:function(v){
    7. 					// 冒号之前对应的是被监听的属性,v指的是被监听属性的值
    8. 					// 当v对应的值发生变化的时候,会执行这个function这个方法
    9. 					// v代表是千米
    10. 					 this.m = parseInt(v)*1000;
    11. 				},
    12. 				m:function(v){
    13. 					 this.km = parseInt(v)/1000;
    14. 				}
    15. 			}

    监听属性是相互影响 

    五、动态参数

    可以用方括号括起来的JavaScript表达式作为一个指令的参数

       ...

      同样地，你可以使用动态参数为一个动态的事件名绑定处理函数

       ...

    注意：动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

    测试结果：

     当我们把click改成evname

     

     当我们将click改成dblclick，我们需要将按钮点击两次才有弹窗效果

    今天的Vue模板语法分享到此~~~~

  • 相关阅读:
    Django数据库查询集数据(Queryset)转化为json,查询value和value_list的用法,json.loads和json.dumps
    2022年Java后端面试题，备战秋招，查缺补漏，吃透16套专题技术栈
    小白学java
    开启新的旅途啦～
    XUbuntu22.04之如何找到.so库所在的软件包?(二百一十六)
    凯云科技软件测评中心顺利通过CNAS和DILAC资质认定地址变更
    Logstash8.4在Linux系统上的安装以及配置Tomcat日志(ELK安装part2)
    基于SSM的车辆租赁管理系统
    javaWeb蛋糕商城（前后台）
    这套笔记可以解决90%以上的Java面试
  • 原文地址：https://blog.csdn.net/qq_65345936/article/details/126669516