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

vue学习02_vue双花括号表达式

作者：知新_RL | 2024-03-01 12:56:15

赞

踩

vue双花括号表达式

12、基本语法

动态载入内容{{}}，这个双花括号是一种语法，叫做mustache语法，可以将vue实例里面的数据动态显示

  1. 这个就是vue的helloworld
  2. 我们看到了双花括号的语法
  3. <!DOCTYPE html>
  4. <html>
  5. 	<head>
  6. 		<meta charset="utf-8">
  7. 		<title>自己</title>
  8. 	</head>
  9. 	<body>
  10. 		<div id="app">
  11. 			<h1>{{message}}</h1>
  12. 		</div>
  13. 		<script src="../js/vue.js"></script>
  14. 		<script>
  15. 		const app = new Vue({
  16. 			el: '#app',
  17. 			data: {
  18. 				message: '你好',
  19. 				
  20. 			},
  21. 			methods: {
  22. 				
  23. 			},
  24. 			created :{
  25. 				
  26. 			},
  27. 			computed:{
  28. 				
  29. 			}
  30. 		});
  31. 		</script>
  32. 	</body>
  33. </html>

浏览器上运行如下

 13、插值

v-once |

v-html,v-text

v-pre  |

v-cloak

14、动态绑定属性

v-bind

属性有class等等等

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 		<style>
  7. 		.red{
  8. 			color: red;
  9. 		}
  10. 		.bbbb{
  11. 			color: antiquewhite;
  12. 		}
  13. 		.div{
  14. 			width: 500px;
  15. 			height: 400px;
  16. 			background-color: tan;
  17. 			 ;
  18. 			
  19. 		}
  20. 		.div2{
  21. 			width: 500px;
  22. 			height: 200px;
  23. 			background-color: peachpuff;
  24. 			 ;
  25. 			
  26. 		}
  27. 		</style>
  28. 	</head>
  29. 	<body>
  30. 		<div id="app">
  31. 			<!--
  32. 			 <h1 :class="{red:true,line:true}">第一名</h1>   class绑定了2个，都为true
  33. 			  <h1 :class="{red:true,line:false}">第一名</h1>   class绑定了1个，red为true
  34. 			  
  35. 			  <button v-on:click="btnclick()">按钮</button>   btnclick() 的（）可以省略
  36. 			 -->
  37. 			<h1 :class="{red:flagg}">第一名</h1>
  38. 			<h1 :class="red">第二名</h1>
  39. 			<h1 :class="red">第三名</h1>
  40. 			<h1 :class="getClass()">国家</h1> 
  41. 			<h1 :class="['aaa','bbb']">我爱吃橘子</h1>   <!--这里是常量，加了引号-->
  42. 				<h1 :class="[aaa,bbb]">我爱吃芒果</h1>     <!--这里是变量，来自data里面-->
  43. 			<button v-on:click="btnclick()">按钮</button>
  44. 			
  45. 			<div :class="div">
  46. 				<ul>
  47. 					<li v-for="(item,index) in fuList" v-on:click="clickco(index)" :class="{red:index === type}">{{item+' '+index}}</li>
  48. 				</ul>
  49. 				<!-- 
  50. 				<h1 :style="{fontSize:'100px'}">style测试</h1>
  51. 				fontSize  就是  font-size:100px
  52. 				-->
  53. 				<h1 :style="{fontSize:'30px'}">style测试1</h1>
  54. 				<h1 :style="{fontSize:size}">style测试2</h1>
  55. 				<h2 :style="{color:color}">style测试3</h2>
  56. 			</div>
  57. 			
  58. 			<div :class="div2">
  59. 				<h2 :style="[astyle,bstyle]">五十六个名族</h2>
  60. 				<h2 v-on:click="getallname()">获取名字{{allname}}</h2>
  61. 				<!--
  62. 				 {{}}还可以写方法
  63. 				 -->
  64. 				<h2 >获取名字2{{getallname()}}</h2>
  65. 				
  66. 				<!-- 
  67. 				用计算属性获取名字
  68. 				-->
  69. 				<h2 >获取名字3{{fullname}}</h2>
  70. 				
  71. 				<!--
  72. 				计算这些书的总价格
  73. 				-->
  74. 				<h2>{{totalPrice}}</h2>
  75. 				<h2>{{totalPrice2}}</h2>
  76. 				<!-- 计算属性的get方法 -->
  77. 				<h2> 计算属性的get方法--{{fullname2}}</h2>
  78. 				
  79. 				
  80. 			</div>
  81. 			
  82. 		</div>
  83. 	
  84. 		<script src="../js/vue.js"></script>
  85. 		
  86. 		<script>
  87. 		
  88. 		const app = new Vue({
  89. 			el:'#app',
  90. 			data:{
  91. 				message:'hello',
  92. 				tid:1,
  93. 				red:'red',
  94. 				flagg:false,
  95. 				aaa:'haha',
  96. 				bbb:'bbbb',
  97. 				div:'div',
  98. 				fuList:['香蕉','苹果','猕猴桃','西瓜'],
  99. 				type:-1,
  100. 				size:'20px',
  101. 				color:'red',
  102. 				astyle:{color: 'red'},
  103. 				bstyle:{fontSize:'20px'},
  104. 				div2:'div2',
  105. 				first:'张',
  106. 				last:'三',
  107. 				allname:null,
  108. 				books:[
  109. 					{id: 110,name: '朝花夕拾',author: '鲁迅',price:11},
  110. 					{id: 111,name: 'vue学习之路必需学的那些',author: '张丹吉',price:21},
  111. 					{id: 112,name: '富爸爸穷爸爸',author: '外国人',price:41},
  112. 					{id: 113,name: '半生缘',author: '张爱玲',price:1},
  113. 				],
  114. 				
  115. 			},
  116. 			// computed计算属性
  117. 			//computed和methods里面都是写方法的，但是computed的方法名字一般不带get这种动词，因为它是计算属性
  118. 			computed:{
  119. 				fullname: function(){
  120. 					return this.first+this.last
  121. 				},
  122. 				//计算属性里面有get和set方法
  123. 				fullname2:{
  124. 					set: function(){
  125. 						
  126. 					},
  127. 					get: function(){
  128. 						return 'aaa'
  129. 					}
  130. 				},
  131. 				totalPrice: function(){
  132. 					let result = 0
  133. 					for(let i = 0;i<this.books.length;i++){
  134. 						result += this.books[i].price
  135. 					}
  136. 					return result
  137. 				},
  138. 				
  139. 				//下面这种写法更简单
  140. 				totalPrice2: function(){
  141. 					let result = 0
  142. 					for(let book of this.books){
  143. 						result += book.price
  144. 					}
  145. 					return result
  146. 				}
  147. 			},
  148. 			methods:{
  149. 				btnclick: function(){
  150. 					this.flagg = !this.flagg
  151. 				},
  152. 				getClass: function(){
  153. 					return {red:true,line:true}
  154. 				},
  155. 				clickco: function(index){
  156. 					console.log("点击了"+index)
  157. 					this.type=index
  158. 					
  159. 				},
  160. 				getallname: function(){
  161. 					this.allname=this.first+this.last
  162. 					console.log(this.allname)
  163. 					return this.first+this.last
  164. 				}
  165. 			}
  166. 		})
  167. 		</script>
  168. 	</body>
  169. </html>

v-bind:   =  ：

：class就是为元素绑定该class

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<div id="app">
  9. 			<h2>{{message}}</h2>
  10. 			<h2>{{fullname}}</h2>
  11. 			<h2>{{getfullname()}}</h2>
  12. 		</div>
  13. 		<script src="../js/vue.js"></script>
  14. 		<script>
  15. 		 const app = new Vue({
  16. 			 el:'#app',
  17. 			 data:{
  18. 				 message:'hello',
  19. 				 firstname:'Kobe',
  20. 				 lastname:'Bryan',
  21. 			 },
  22. 			
  23. 			 methods:{
  24. 				 getfullname: function(){
  25. 					 console.log("getfullname")
  26. 					 return this.firstname+" "+this.lastname
  27. 				 },
  28. 				
  29. 			 },
  30. 			 computed:{
  31. 				 fullname: function(){
  32. 					 return this.firstname+" "+this.lastname
  33. 				 }
  34. 			 				 
  35. 			 },
  36. 		 })
  37. 		</script>
  38. 	</body>
  39. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<script src="../js/vue.js"></script>
  9. 		<script>
  10. 		/* 
  11. 		 注释 Ctrl + shift + /
  12. 		 定义一个对象
  13. 		 const 是常量，指向的对象不可改变，但是里面属性的值可以改
  14. 		 */
  15. 		
  16. 		
  17. 	/* 	const obj ={
  18. 			name:'张三',
  19. 			age:'18',
  20. 			sex:'男'
  21. 		}
  22. 		console.log(obj) */
  23. 		
  24. 		const name ='王五';
  25. 		/* 注意这里要用分号;
  26. 		 ES5的写法
  27. 		 */
  28. 		
  29. 		const age ='18';
  30. 		
  31. 		const obj ={
  32. 			username:name,
  33. 			age:age
  34. 		}
  35. 	
  36. 		console.log("1",obj)
  37. 		
  38. 		const wayes5 = {
  39. 			run : function (){
  40. 				
  41. 			},
  42. 			eat: function(){
  43. 				
  44. 			},
  45. 		}
  46. 		console.log(wayes5)
  47. 		
  48. 		/* 注意这里要用分号;
  49. 		 ES6的写法
  50. 		 */
  51. 		const username = '小燕子'
  52. 		const obj2 ={
  53. 			username,
  54. 			age,
  55. 		}
  56. 		console.log("2",obj2)
  57. 		
  58. 		/* 
  59. 		函数的增强写法 
  60. 		 */
  61. 		const wayes6 = {
  62. 			run(){
  63. 				console.log("这里是es6的写法")
  64. 			}
  65. 		};
  66. 		console.log(wayes6)
  67. 		
  68. 		
  69. 		</script>
  70. 	</body>
  71. </html>
  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="utf-8">
  5. 		<title></title>
  6. 	</head>
  7. 	<body>
  8. 		<div id="app">
  9. 			<h2>{{message}}</h2>
  10. 			<!-- <button v-on:click="message++">+</button>
  11. 			<button v-on:click="message--">-</button> -->
  12. 			<!-- 
  13. 			 ctrl + /  块注释
  14. 			 -->
  15. 			 <button v-on:click="add">+</button>
  16. 			 <button v-on:click="sub">-</button>
  17. 			 
  18. 			 <h2>v-on没有参数</h2>
  19. 			 <!-- 没有参数的时候（）可以写可以不写 -->
  20. 			  <button @click="add()">按钮1</button>
  21. 			  <button @click="sub">按钮2</button>
  22. 				
  23. 			
  24. 			 
  25. 			 <h2>v-on参数</h2>
  26. 			 <button @click="fly(1)">按钮1</button>
  27. 			 <button @click="show1">按钮2</button>
  28. 			<button @click="show(123,$event)">按钮3</button>
  29. 			<button @click="show(name,$event)">按钮4</button>
  30. 			<!-- 
  31. 			 点击按钮，两个都会触发，冒泡
  32. 			 阻止冒泡 @click.stop
  33. 			 阻止默认事件  .prevent
  34. 			 -->
  35. 			<div  @click="divClick()">
  36. 				<button @click.stop="btnClick()">按钮</button>
  37. 				<br />
  38. 				<form action="baidu">
  39. 					<input type="submit" value="sumbit" @click.prevent="sumbitc"/>
  40. 					<!-- 监听键盘松开的事件 -->
  41. 					<input type="text" @keyup="keyUp()" />
  42. 						<input type="text" @keyup.enter="keyUp()" />
  43. 				</form>
  44. 				
  45. 			</div>
  46. 		</div>
  47. 		
  48. 		<script src="../js/vue.js"></script>
  49. 		<script>
  50. 		const app = new Vue({
  51. 			el:'#app',
  52. 			data:{
  53. 				message:0,
  54. 				name:'张三'
  55. 			},
  56. 			// methods里面的方法用，逗号隔开
  57. 			methods: {
  58. 				add(){
  59. 					this.message++
  60. 				},
  61. 				sub(){
  62. 					this.message--
  63. 				},
  64. 				fly(a){
  65. 					console.log("1------------")
  66. 				},
  67. 				show1(event){
  68. 					console.log(event)
  69. 				},
  70. 				show(a,event){
  71. 					console.log(a,event)
  72. 				},
  73. 				divClick(){
  74. 					console.log("divClick")
  75. 				},
  76. 				btnClick(){
  77. 					console.log("btnClick")
  78. 				},
  79. 				sumbitc(){
  80. 					console.log("提交")
  81. 				},
  82. 				keyUp(){
  83. 					console.log("v")
  84. 				}
  85. 				
  86. 			}
  87. 		});
  88. 		</script>
  89. 	</body>
  90. </html>

事件监听

v-on

v-on:click  =  @click  为元素绑定点击的监听函数

v-bind :class = :class

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

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