vue分支结构 循环结构

已于 2024-03-11 10:32:49 修改
阅读量84 收藏
点赞数
分类专栏： 三阶段转载笔记 文章标签： vue.js html
于 2021-09-28 23:13:36 首次发布
原文链接：https://blog.csdn.net/qq_16804847/article/details/119170805
版权

CGB2105-Day06

2021-07-28 09:53:19 2865 收藏 13
分类专栏： 2105 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/qq_16804847/article/details/119170805
版权
2105 专栏收录该内容
17 篇文章 26 订阅
订阅专栏

1. 属性绑定

1.1 入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定</title>
		<style>

		<span class="token comment">/* red 红色 宽度50  高度50 */</span>
		<span class="token punctuation">.</span>red <span class="token punctuation">{<!-- --></span>
			background<span class="token operator">-</span>color<span class="token operator">:</span> red<span class="token punctuation">;</span>
			width<span class="token operator">:</span> <span class="token number">50</span>px<span class="token punctuation">;</span>
			height<span class="token operator">:</span> <span class="token number">50</span>px<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		
		<span class="token punctuation">.</span>blue <span class="token punctuation">{<!-- --></span>
			background<span class="token operator">-</span>color<span class="token operator">:</span> aqua<span class="token punctuation">;</span>
			width<span class="token operator">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
			height<span class="token operator">:</span> <span class="token number">100</span>px<span class="token punctuation">;</span>
		<span class="token punctuation">}</span>
		
	<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span>
<span class="token generics"><span class="token punctuation">&lt;</span>body<span class="token punctuation">&gt;</span></span>
	<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"app"</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> a标签的属性绑定
			需求<span class="token operator">:</span> href中的属性动态赋值
			语法<span class="token operator">:</span> v<span class="token operator">-</span>bind<span class="token operator">:</span>href<span class="token operator">=</span><span class="token string">"VUE中的属性"</span>
		 <span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>a v<span class="token operator">-</span>bind<span class="token operator">:</span>href<span class="token operator">=</span><span class="token string">"url"</span><span class="token operator">&gt;</span>百度<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 简化写法 <span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>a <span class="token operator">:</span>href<span class="token operator">=</span><span class="token string">"url"</span><span class="token operator">&gt;</span>百度<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>hr <span class="token operator">/</span><span class="token operator">&gt;</span>
		
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">2.</span><span class="token keyword">class</span>类型绑定 
			<span class="token keyword">class</span>中可以定义多个样式<span class="token punctuation">.</span>简化程序的调用
			需求<span class="token operator">:</span> 需要动态的为<span class="token keyword">class</span>赋值
			规则<span class="token operator">:</span> <span class="token operator">:</span><span class="token keyword">class</span>是属性的绑定<span class="token punctuation">,</span>绑定之后查找对应的属性
			colorClass<span class="token operator">:</span> <span class="token string">"blue"</span> 之后根据value值 blue 查找对应的CSS样式
			<span class="token number">15</span>上课
		<span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>div <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"colorClass"</span><span class="token operator">&gt;</span>我是<span class="token keyword">class</span>修饰<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
		<span class="token generics"><span class="token punctuation">&lt;</span>hr <span class="token punctuation">&gt;</span></span>
		
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">3.</span> 属性切换 
			    需求<span class="token operator">:</span> 通过按钮控制样式是否展现 属性
				语法<span class="token operator">:</span> <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token punctuation">{<!-- --></span><span class="token keyword">class</span>类型的名称<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">}</span>
		<span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>div <span class="token operator">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"{red: flag}"</span><span class="token operator">&gt;</span>我是<span class="token keyword">class</span>修饰<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>button <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"flag = !flag"</span><span class="token operator">&gt;</span>切换<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
		
	<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		<span class="token keyword">const</span> APP <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				url<span class="token operator">:</span> <span class="token string">"http://www.baidu.com"</span><span class="token punctuation">,</span>
				colorClass<span class="token operator">:</span> <span class="token string">"blue"</span><span class="token punctuation">,</span>
				flag<span class="token operator">:</span> <span class="token boolean">true</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>	
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</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

2 分支结构语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定</title>
		<style>

	<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span>
<span class="token generics"><span class="token punctuation">&lt;</span>body<span class="token punctuation">&gt;</span></span>
	<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"app"</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 分支结构
			语法<span class="token operator">:</span> 
				<span class="token number">1.</span>v<span class="token operator">-</span><span class="token keyword">if</span>   如果为真则展现标签
				<span class="token number">2.</span>v<span class="token operator">-</span><span class="token keyword">else</span><span class="token operator">-</span><span class="token keyword">if</span>  必须与v<span class="token operator">-</span><span class="token keyword">if</span>连用
				<span class="token number">3.</span>v<span class="token operator">-</span><span class="token keyword">else</span> 	 必须与v<span class="token operator">-</span><span class="token keyword">if</span>连用	取反
			案例<span class="token operator">:</span>
				要求<span class="token operator">:</span> 按照用户的考试成绩 评级
					  <span class="token operator">&gt;=</span><span class="token number">90</span>分  优秀
					  <span class="token operator">&gt;=</span><span class="token number">80</span>分  良好
					  <span class="token operator">&gt;=</span><span class="token number">70</span>分  中等
					  <span class="token operator">&gt;=</span><span class="token number">60</span>分  及格
					  否则    不及格
		 <span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token generics"><span class="token punctuation">&lt;</span>h3<span class="token punctuation">&gt;</span></span>评级<span class="token operator">&lt;</span><span class="token operator">/</span>h3<span class="token operator">&gt;</span>
		请录入分数<span class="token operator">:</span> <span class="token operator">&lt;</span>input v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"score"</span> <span class="token operator">/</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>div v<span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"score &gt;= 90 "</span><span class="token operator">&gt;</span>优秀<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>div v<span class="token operator">-</span><span class="token keyword">else</span><span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"score &gt;= 80 "</span><span class="token operator">&gt;</span>良好<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>div v<span class="token operator">-</span><span class="token keyword">else</span><span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"score &gt;= 70 "</span><span class="token operator">&gt;</span>中等<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>div v<span class="token operator">-</span><span class="token keyword">else</span><span class="token operator">-</span><span class="token keyword">if</span><span class="token operator">=</span><span class="token string">"score &gt;= 60 "</span><span class="token operator">&gt;</span>及格<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>div v<span class="token operator">-</span><span class="token keyword">else</span><span class="token operator">&gt;</span>不及格<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
		
	<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		<span class="token keyword">const</span> APP <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				score<span class="token operator">:</span> <span class="token number">70</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>	
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</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 循环结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>循环结构</title>
		<style>

	<span class="token operator">&lt;</span><span class="token operator">/</span>style<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>head<span class="token operator">&gt;</span>
<span class="token generics"><span class="token punctuation">&lt;</span>body<span class="token punctuation">&gt;</span></span>
	<span class="token operator">&lt;</span>div id<span class="token operator">=</span><span class="token string">"app"</span><span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 
			<span class="token number">1.</span>什么时候使用循环
				多次重复的执行同一个操作<span class="token punctuation">.</span>
			<span class="token number">2.</span>什么数据使用循环
				<span class="token number">1.</span>数组
				<span class="token number">2.</span>对象
				<span class="token number">3.</span>数组套对象<span class="token punctuation">(</span>集合<span class="token punctuation">)</span>
		 <span class="token operator">--</span><span class="token operator">&gt;</span>
		 
		 <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span>
				<span class="token number">1.</span> 遍历数据 将数组中的数据在页面中展现
		  <span class="token operator">--</span><span class="token operator">&gt;</span>
		 <span class="token operator">&lt;</span>p v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">"item in array"</span> v<span class="token operator">-</span>text<span class="token operator">=</span><span class="token string">"item"</span><span class="token operator">&gt;</span>
			<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>item<span class="token punctuation">}</span><span class="token punctuation">}</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
		 <span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
		 
		 <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">2.</span> 获取下标  <span class="token number">30</span>上课
			  语法<span class="token operator">:</span> v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">"(遍历的元素,遍历的下标) in array"</span>
		  <span class="token operator">--</span><span class="token operator">&gt;</span>
		 <span class="token operator">&lt;</span>p v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">"(item,index) in array"</span><span class="token operator">&gt;</span>
				下标<span class="token operator">:</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>index<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">~</span><span class="token operator">~</span><span class="token operator">~</span>数据值<span class="token operator">:</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>item<span class="token punctuation">}</span><span class="token punctuation">}</span>
		 <span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
		 <span class="token generics"><span class="token punctuation">&lt;</span>hr <span class="token punctuation">&gt;</span></span>
		 <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">2.</span> 遍历对象 
			v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span>"<span class="token punctuation">(</span>value<span class="token punctuation">,</span>key<span class="token punctuation">,</span>index下标<span class="token punctuation">)</span>
		 <span class="token operator">--</span><span class="token operator">&gt;</span>
		 <span class="token operator">&lt;</span>p v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">"(value,key,index) in user"</span><span class="token operator">&gt;</span>
			 <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>index<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">~</span><span class="token operator">~</span><span class="token operator">~</span><span class="token operator">~</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>key<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">~</span><span class="token operator">~</span><span class="token operator">~</span><span class="token operator">~</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>value<span class="token punctuation">}</span><span class="token punctuation">}</span>
		 <span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
		 
		 <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token number">3.</span> 遍历<span class="token string">"集合"</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
		 <span class="token operator">&lt;</span>p v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">"user in userList"</span><span class="token operator">&gt;</span>
			 ID<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>user<span class="token punctuation">.</span>id<span class="token punctuation">}</span><span class="token punctuation">}</span>
			 <span class="token operator">|</span> name<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>user<span class="token punctuation">.</span>name<span class="token punctuation">}</span><span class="token punctuation">}</span> 
			 <span class="token operator">|</span> age<span class="token operator">:</span><span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>user<span class="token punctuation">.</span>age<span class="token punctuation">}</span><span class="token punctuation">}</span>
			<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token operator">&lt;</span>p v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">"(value,key,index) in user"</span><span class="token operator">&gt;</span>
				 
			 <span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
		 <span class="token operator">&lt;</span><span class="token operator">/</span>p<span class="token operator">&gt;</span>
		 
		 <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 总结<span class="token operator">:</span>
			 <span class="token number">1.</span> 如果遍历数组 参数 <span class="token punctuation">(</span>value<span class="token punctuation">,</span>index<span class="token punctuation">)</span>
			 <span class="token number">2.</span> 如果遍历对象 参数 <span class="token punctuation">(</span>value<span class="token punctuation">,</span>key<span class="token punctuation">,</span>index<span class="token punctuation">)</span>
			 特点<span class="token operator">:</span> 遍历数据在页面中展现
		 <span class="token operator">--</span><span class="token operator">&gt;</span>
		 
	<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		<span class="token keyword">const</span> APP <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				array<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"郭晶晶"</span><span class="token punctuation">,</span><span class="token string">"马龙"</span><span class="token punctuation">,</span><span class="token string">"姚明"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
				user<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
					id<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
					name<span class="token operator">:</span> <span class="token string">"tomcat"</span><span class="token punctuation">,</span>
					age<span class="token operator">:</span> <span class="token number">18</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				userList<span class="token operator">:</span> <span class="token punctuation">[</span>
					<span class="token punctuation">{<!-- --></span>
						id<span class="token operator">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
						name<span class="token operator">:</span> <span class="token string">"tomcat"</span><span class="token punctuation">,</span>
						age<span class="token operator">:</span> <span class="token number">18</span>
					<span class="token punctuation">}</span><span class="token punctuation">,</span>
					<span class="token punctuation">{<!-- --></span>
						id<span class="token operator">:</span> <span class="token number">200</span><span class="token punctuation">,</span>
						name<span class="token operator">:</span> <span class="token string">"mysql"</span><span class="token punctuation">,</span>
						age<span class="token operator">:</span> <span class="token number">20</span>
					<span class="token punctuation">}</span>
				<span class="token punctuation">]</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>	
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</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

4 form表单数据绑定

主要练习: form表单中如何实现双向数据绑定.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用表单属性</title>
	</head>
	<body>
		<h1>本案例练习 表单提交数据时  数据如何与vue进行数据绑定</h1>
		<div id="app">
			<form id="userForm"action="http://www.baidu.com">
				<div>
					<span>
						姓名:
					</span>
					<span>
						<input type="text" name="name" v-model="name"/>
					</span>
				</div>
				<div>
					<span>性别:</span>
					<span>
						<!-- 单选框: name属性必须一致 -->
						<input type="radio" name="gender" value="男" id="man" v-model="gender"/>
						<label for="man">男</label>
						<input type="radio" name="gender" value="女" id="women" v-model="gender"/>
						<label for="women">女</label>
					</span>
				</div>
				<div>
					<span>爱好:</span>
					<input type="checkbox" name="hobbies" value="吃" v-model="hobbies"/>吃
					<input type="checkbox" name="hobbies" value="喝" v-model="hobbies"/>喝
					<input type="checkbox" name="hobbies" value="玩" v-model="hobbies"/>玩
				</div>
				<div>
					<span>职业</span>
					<!-- 如果需要设置为多选 则添加属性 -->
					<select name="occupation" v-model="occupation" multiple="true">
						<option value="工人">工人</option>
						<option value="教师">教师</option>
						<option value="工程师">工程师</option>
					</select>
				</div>
				<div>
					<span>个人简介</span>
					<textarea name="userInfo" style="width: 200px;height: 50px;" v-model="userInfo"></textarea>
				</div>
				<div>
					<!-- 阻止默认提交事件 -->
					<input type="submit"  value="提交" v-on:click.prevent="submitForm"/>
				</div>
			</form>
		</div>

	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 引入JS文件 <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span>	<span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				name<span class="token operator">:</span> <span class="token string">'输入名称'</span><span class="token punctuation">,</span>
				gender<span class="token operator">:</span> <span class="token string">'女'</span><span class="token punctuation">,</span>
				<span class="token comment">//多个数据定义时 应该使用数组</span>
				hobbies<span class="token operator">:</span>	<span class="token punctuation">[</span><span class="token string">'吃'</span><span class="token punctuation">,</span><span class="token string">'喝'</span><span class="token punctuation">,</span><span class="token string">'玩'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
				occupation<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'工人'</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
				userInfo<span class="token operator">:</span> <span class="token string">''</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				<span class="token function">submitForm</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
					<span class="token comment">//数据提交</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"姓名:"</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"性别:"</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>gender<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'爱好:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>hobbies<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'职业:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>occupation<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'用户详情:'</span><span class="token operator">+</span><span class="token keyword">this</span><span class="token punctuation">.</span>userInfo<span class="token punctuation">)</span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'封装好数据之后,可以使用ajax方式实现数据提交'</span><span class="token punctuation">)</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</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

5 表单修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单修饰符</title>
	</head>
	<body>
		<h1>表单修饰符number/trim/lazy</h1>
		<div id="app">
			<!-- 
				语法:
					.number 只能输入数值类型
					.trim   去除左右空格
					.lazy   离焦事件才触发
			 -->
			 <h3>数据展现: {{age}}</h3>
			 年龄: <input type="text" v-model.number="age" />
			 <button @click="addNum">增加</button>
			 <hr />
			 用户输入的长度: {{name.length}} <br>
			 用户名: <input type="text" v-model.trim="name" />	
			 <hr />
			 展现数据lazy~~{{msg}}  <br>
			 <input type="text" v-model.lazy="msg"/>
		</div>

	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 引入JS文件 <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span>	<span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				age<span class="token operator">:</span> <span class="token number">18</span><span class="token punctuation">,</span>
				name<span class="token operator">:</span> <span class="token string">''</span><span class="token punctuation">,</span>
				msg<span class="token operator">:</span> <span class="token string">''</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				<span class="token function">addNum</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
					<span class="token keyword">this</span><span class="token punctuation">.</span>age <span class="token operator">+=</span> <span class="token number">1</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</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

6 计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算属性</title>
	</head>
	<body>
		<h1></h1>
		<div id="app">
			<!-- 需求:
				 将用户的输入内容进行反转
				 API:
					1.字符串转化为数组 拆串 split('')
					2.将数组倒序		.reverse()
					3.将数组转化为字符串 .join('')

			 计算属性功能用法<span class="token operator">:</span>
				<span class="token number">1.</span>插值表达式中应该写简单的算数计算<span class="token punctuation">,</span>如果复杂应该封装
				<span class="token number">2.</span>如果数据操作相同则应该简化过程<span class="token punctuation">.</span>
			 总结<span class="token operator">:</span> 计算属性相对于方法 效率高<span class="token punctuation">(</span>从虚拟DOM中直接获取结果<span class="token punctuation">)</span>
		 <span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token generics"><span class="token punctuation">&lt;</span>h3<span class="token punctuation">&gt;</span></span>数据展现<span class="token operator">:</span><span class="token operator">&lt;</span><span class="token operator">/</span>h3<span class="token operator">&gt;</span> 
		<span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token generics"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span>  <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 方法多次执行<span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token generics"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span>
		<span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token generics"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span>
		<span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token generics"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span>
		<span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>reverseCom<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token generics"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span> <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 计算属性只执行一次<span class="token operator">--</span><span class="token operator">&gt;</span>
		<span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>reverseCom<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token generics"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span>
		<span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>reverseCom<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token generics"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span>
		<span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>reverseCom<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token generics"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span>
		<span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">"text"</span> v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"msg"</span><span class="token operator">/</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 引入JS文件 <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span>	<span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				msg<span class="token operator">:</span> <span class="token string">'abc'</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				<span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
					 console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"方法执行!!!!!"</span><span class="token punctuation">)</span>
					 <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>msg<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			computed<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				<span class="token comment">//key:value  必须添加返回值</span>
				<span class="token function">reverseCom</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
					console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"计算属性!!!!"</span><span class="token punctuation">)</span>
					<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>msg<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span>
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</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

7. 数组操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组操作</title>
	</head>
	<body>
		<h1>数组操作</h1>
		<div id="app">

		<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 数组的方法  java中的叫法push<span class="token operator">:</span>入栈 pop弹栈
			<span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 	在结尾追加元素
			<span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>	删除最后一个元素
			<span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span>	删除第一个元素
			<span class="token function">unshift</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 在开头追加元素
			<span class="token function">splice</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 替换数组中的数据 <span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span><span class="token operator">!</span>
			<span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">)</span>	 数据排序
			<span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span> 数组反转
		 <span class="token operator">--</span><span class="token operator">&gt;</span>
		 输入框<span class="token operator">:</span> <span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">"text"</span> v<span class="token operator">-</span>model<span class="token operator">=</span><span class="token string">"msg"</span><span class="token operator">/</span><span class="token operator">&gt;</span><span class="token generics"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span>
		<span class="token operator">&lt;</span>span v<span class="token operator">-</span><span class="token keyword">for</span><span class="token operator">=</span><span class="token string">"(value) in array"</span><span class="token operator">&gt;</span>
			<span class="token punctuation">{<!-- --></span><span class="token punctuation">{<!-- --></span>value<span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
		<span class="token operator">&lt;</span><span class="token operator">/</span>span<span class="token operator">&gt;</span><span class="token generics"><span class="token punctuation">&lt;</span>br<span class="token punctuation">&gt;</span></span>
		<span class="token operator">&lt;</span>button <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"push"</span><span class="token operator">&gt;</span>push<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>button <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"pop"</span><span class="token operator">&gt;</span>pop<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>button <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"shift"</span><span class="token operator">&gt;</span>shift<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>button <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"unshift"</span><span class="token operator">&gt;</span>unshift<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
		<span class="token operator">&lt;</span>button <span class="token annotation punctuation">@click</span><span class="token operator">=</span><span class="token string">"splice"</span><span class="token operator">&gt;</span>替换<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
		
	<span class="token operator">&lt;</span><span class="token operator">/</span>div<span class="token operator">&gt;</span>
	
	<span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 引入JS文件 <span class="token operator">--</span><span class="token operator">&gt;</span>
	<span class="token operator">&lt;</span>script src<span class="token operator">=</span><span class="token string">"../js/vue.js"</span><span class="token operator">&gt;</span><span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
	<span class="token generics"><span class="token punctuation">&lt;</span>script<span class="token punctuation">&gt;</span></span>
		<span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
			el<span class="token operator">:</span>	<span class="token string">"#app"</span><span class="token punctuation">,</span>
			data<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				array<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"a"</span><span class="token punctuation">,</span><span class="token string">"b"</span><span class="token punctuation">,</span><span class="token string">"c"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
				msg<span class="token operator">:</span> <span class="token string">''</span>
			<span class="token punctuation">}</span><span class="token punctuation">,</span>
			methods<span class="token operator">:</span> <span class="token punctuation">{<!-- --></span>
				<span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
					<span class="token keyword">this</span><span class="token punctuation">.</span>array<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>msg<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
					<span class="token comment">//数组数据会自动的更新</span>
					<span class="token keyword">this</span><span class="token punctuation">.</span>array<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
					<span class="token keyword">this</span><span class="token punctuation">.</span>array<span class="token punctuation">.</span><span class="token function">shift</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token function">unshift</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
					<span class="token comment">//在开头追加</span>
					<span class="token keyword">this</span><span class="token punctuation">.</span>array<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>msg<span class="token punctuation">)</span>
				<span class="token punctuation">}</span><span class="token punctuation">,</span>
				<span class="token function">splice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span>
					<span class="token comment">/**
					 * 参数: 3个参数
					 * 		arg1: 操作数据的起始位置 从0开始
					 * 		arg2: 操作的数量     阿拉伯数字
					 * 		arg3: 替换后的数据.可以有多个(可变参数类型)
					 * 案例:
					 * 		1.将第一个元素,替换为msg
					 * 			this.array.splice(0,1,this.msg)
					 * 		2.将前2个元素替换为msg
					 * 			this.array.splice(0,2,this.msg) 前2个替换
					 * 			this.array.splice(0,2,this.msg,this.msg) 前2个替换,补齐2个数据
					 * 		3.将最后一个替换为msg
					 * 			let index = this.array.length - 1;
								this.array.splice(index,1,this.msg)
							4.删除第二个元素
					 */</span>
						<span class="token comment">//如果只有2个参数,则表示删除</span>
						<span class="token keyword">this</span><span class="token punctuation">.</span>array<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">1</span><span class="token punctuation">)</span> 
				<span class="token punctuation">}</span>
			<span class="token punctuation">}</span>
		<span class="token punctuation">}</span><span class="token punctuation">)</span>
	<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>body<span class="token operator">&gt;</span>

</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

8 知识小结

8.1属性绑定

  1. 属性绑定 v-bind:xxxx 动态为属性赋值
  2. class绑定 如果用户需要切换class 则可以使用该操作
  3. class绑定 数据是否展现 可以通过 {class类型: true/false}

8.2 分支结构

用法: 如果数据为真则展现html标签
语法: v-if/v-else-if/v-else
要求: v-if可以单独使用
另外2个必须与v-if连用

8.3 循环结构

用法: 通过循环 展现标签+数据
语法:
v-for((value,index) in array)
v-for((value,key,index) in obj)
v-for(user in userList) 后续通过user.属性取值

8.4 表单操作

  1. 一般数据进行提交时都会使用表单.
  2. 每个表单几乎都写action. action现在几乎不用(同步操作)
    一般通过 阻止默认行为的方式 禁用action,之后手写点击事件触发后续操作(Ajax)
  3. 用户录入标签体 1.文本框 2.单选 3.多选 4.下拉框 5.文本域
  4. 掌握各个标签的双向数据绑定的写法. 值有多个 使用数组.
  5. 表单修饰符 1.number 2.trim 3.lazy

8.5 计算属性

  1. 复杂的操作如果通过{ {}} 插值表达式封装 比较冗余.
  2. 如果将复杂的操作封装为方法 调用一次执行一次 效率低.
  3. 计算属性:
    1.可以封装复杂操作
    2.内部有缓存机制,只需要计算一次.多次调用 效率高

8.6 数组操作

push() 	在结尾追加元素
pop()	删除最后一个元素
shift()	删除第一个元素
unshift() 在开头追加元素
splice() 替换数组中的数据 !!!!
sort()	 数据排序
reverse() 数组反转

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

8.7 VUE生命周期(难点!!)

周期:
1.初始化周期
1.beforeCreate vue对象实例化之前(刚开始)
2. created
3. beforeMount
4. Mounted 说明VUE对象实例化成功(DIV渲染完成)
2.修改周期
1. beforeUpdate 用户修改数据之前
2. updated 用户修改数据之后
3.销毁周期
1. beforeDestroy VUE对象销毁前
2. destroyed VUE对象销毁后(最后一步)

** 生命周期函数的作用:
如果需要对VUE对象中的数据进行额外的操作.则使用生命周期函数.
目的: 框架的扩展性更好.(实现定制化) **

在这里插入图片描述

程序员 阿酷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue分支结构
weixin_52629158的博客
05-20 170
双路分支渲染---- v-if v-else ,v-else 元素必须"紧跟"在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。条件渲染指令: v-if v-if v-else v-if v-else-if v-else-if v-else。多路分支渲染---- v-if v-else-if v-else-if v-else。多路分支渲染---- v-if v-else-if v-else-if v-else。1.1.1 单路分支渲染--v-if使用场景。
vue学习笔记-7-分支结构
weixin_42349568的博客
08-24 285
一 ，分支结构v-if 对于分支结构，就是根据表达式的值来有条件地渲染元素。 实例： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> [v-cloak]{ display:none } #app{ width: 20%;
Vue:分支结构
qq_41421033的博客
10-02 1082
分支结构 v-if 使用场景 1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素 2- 进行两个视图之间的切换 <div id="app"> <!-- 判断是否加载，如果为真，就加载，否则不加载--> <span v-if="flag"> 如果flag为true则显示,false不显示! </span> </div> <script> va
Vue入门基础（二）
小hu同学
12-27 1427
本篇文章是接着上一篇文章的，可以先看下 上一篇文章 4.Vue常用特性 4.1 常用特性概览 表单操作 自定义指令 计算属性 过滤器 侦听器 生命周期 4.2 表单操作 1. 基于Vue的表单操作 input 单行文本 textarea 多行文本 select 下拉多选 radio 单选框 checkbox 多选框 1、单行文本 绑定数据 <span>姓名：</span> <span> <input type.
Vue 基础
qq_40132294的博客
05-17 2661
1.<span title="xxxx"></span>标签： 当被span标签包裹时，前端将鼠标放在控件上就能显示出其title属性： 2.v-bind: 将数据绑定为属性值；{{truth}}将数据插入展示。可以缩写为： v-xxx开头的叫Vue指令 效果： 3. v-if：条件判断控制，每次都会重新删除和创建元素（开销较大） v-if=true 效果： v-if=fal......
vue-examples:vue练习
04-01
文件名"vue-examples-master"暗示这可能是一个GitHub项目的主分支，通常这样的项目会包含一个或多个示例应用，每个应用都有完整的目录结构，包括源码、配置文件和可能的测试文件。 下面我们将深入探讨Vue.js的一些...
lkm-vue
02-21
- "lkm-vue-master" 这个文件名可能是项目克隆后的主分支，常见的 Vue 项目结构可能包含 `src`、`public`、`node_modules`、`package.json` 等文件夹和文件。 - - `src` 文件夹通常包含 `App.vue`（主组件）、`...
Vue_ex
03-22
"Vue_ex-master"可能是这个项目的主分支或者主目录，通常在Git仓库中，"master"分支代表了项目的主线。 Vue.js的核心特性包括： 1. **模板语法**：Vue.js使用简洁的HTML扩展来声明数据绑定和DOM指令，如`v-bind`...
vue.js
02-23
模板中的数据绑定和条件/循环结构都是声明式的，降低了学习成本。 5. **插槽和作用域插槽**：Vue.js 提供了插槽机制，允许组件内部定义可替换的部分。作用域插槽则允许父组件向子组件传递内容，并控制子组件内部的...
smart-factory vue 3D工厂 WebGL
最新发布
06-16
1. **Vue.js基础**：包括Vue实例、组件系统、指令、属性绑定、事件处理、计算属性、条件与循环等。 2. **Vue.js高级特性**：如Vuex状态管理、Vue Router路由管理、异步组件、生命周期钩子函数以及自定义指令和插件...
vue.js中使用v-for进行遍历
Lalo的博客
11-17 566
使用v-for遍历数组 <div id="app"> <span v-for="item in list">{{item}}</span> <span v-for="(item , i) in list">{{i}}</span> </div> var vm = new...
vue 使用 span 来修改值 的小坑
热门推荐
yangyinet的专栏
03-22 1万+
前面有个需求，展现很多标签，展现的同时可以对标签进行修改。 使用vue,思路是 用 span 展现标签，点击 span 打开contenteditable ，使其可编辑，编辑完成后，回车完成修改，提交。 最开始可以正常运行，但偶然发现，在修改第一个span时，回车后，不会变还是之前的值。网上找了下，大部分说改input来实现，没有用span这种的方案。 最后处理方式，对dom元素直接进行操...
Vue学习（十三）——分支结构用法
云中、漫步的博客
10-03 805
目录一、v-if二、v-show三、v-show 和 v-if 区别四、v-show和v-if如何选择 一、v-if 作用：过条件判断展示或者隐藏某个元素。或者多个元素。通常搭配 v -else或 v-else-if来使用。 使用场景举例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &lt
vue项目笔记（11）-Git分支代码合并
从零出发
08-10 1574
index-swiper分支上面的代码保存到本地仓库，并提交到线上仓库。 结合vue项目笔记（9），对应博客网址：https://blog.csdn.net/qq_41115965/article/details/81559765 1、在已经进入index-swiper分支的前提下，在终端运行以下命令： git add . git commit -m 'add swiper' git p...
vue分支循环结构
从简的博客
05-16 242
（v-if控制元素是否渲染到页面，v-show控制元素是否显示在页面(已经渲染)） <div id="app"> <div v-if='sorce>=90'>优秀</div> <div v-else-if="sorce>=60&&sorce<90">良好</div> <div v-else>不及格</div> <div v-show="flag"&.
vue 指令 v-if v-else-if v-else
Claroja
01-19 286
<body> <div id="app"> <div v-if='score>=90'>优秀</div> <div v-else-if='score<90&&score>=80'>良好</div> <div v-else-if='score<80&&score>60'>一般</div> <div v-else&
Vue入门指南——分支结构
Potry Code的博客
01-22 2146
目录：一、v-if二、v-else-if & v-else三、v-show四、v-show 和 v-if的区别五、总结 一、v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。 <div id="app"> <!-- 判断是否加载，如果为真，就加载，否则不加载--> <...
vue基础语法之分支循环结构
poppy995的博客
08-02 394
分支循环结构 分支结构 v-if v-eles v-eles-if v-show false 隐藏 true显示 v-if和v-show的区别 `v-if`控制元素是否渲染到页面 v-show控制元素是否显示(已经渲染了页面) v-if适用于操作不是很多的情况 隐藏就是把这个元素删除掉(removeChild) v-show 频繁操作 隐藏就是display:none 循环结构 循环结...
vue git 如何创建合并分支
Jinmy的博客
09-24 1757
0.git checkout index-swiper //如果在当前分支可省略这步 1.git add . //添加当前分支 2.git cmmit -m ' change ' //准备提交并注释 3.git push //上传分支代码 4.git checkout master //切换到主干 5.git  merge origin/index-swiper  //下载线上分支代码合...
Vue项目结构介绍和Vue面试题详解
Vue项目的结构是一个非常重要的方面，它能影响到项目的可维护性和扩展性。在Vue项目中，通常会分为几个主要的文件夹和文件来进行组织和管理。 首先，项目中的build文件夹是用于存放webpack相关配置和脚本的。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值