【Vue】Vue.js笔记--Day1

我不是女神ヾ 2022-02-23 05:38 243阅读 0赞

### 1. 什么是Vue.js ###

1.  目前最火的两大框架之一，另一个框架为React，不同的是React可以开发App，Vue.就是需要借助于Weex。
2.  是前端三大主流框架之一，还有一个框架为Angular.js。
3.  Vue.js是一套用于构建用户界面的框架，只关注视图层
4.  能够让用户不再操作DOM元素，解放用户双手，有恒多的事件去关注业务逻辑。

### 2. MVC和MVVM的区别 ###

MVC:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjU5Nzc3_size_16_color_FFFFFF_t_70]MVVM：  
![在这里插入图片描述][20190406132221708.png]  
![在这里插入图片描述][20190406132242435.png]

### 3. Vue的学习 ###

#### 1. 第一个hello world ####

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue的基本代码</title>
    	<script src="./vue.js"></script>
    </head>
    <body>
    	
    	<div id="app">
    		<p>{
       {msg}}</p>
    	</div>
    
    	<script>
    	//创建一个Vue的实例
    	//new出来的这个vm对象，就是我们MVVM中的VM调度者
    		new  Vue({
    			el:'#app',
    		//这里的data就是MVVM中的M ，专门用来保存每个页面的数据
    			data:{
    				msg:'欢迎学习Vue'
    			}
    		})
    	</script>
    
    </body>
    </html>

### 2. vue基本属性方法 ###

<!DOCTYPE html>
    <html>
    <head>
    	<title>v-clock的学习</title>
    	<script src="./vue.js"></script>
    	<style>
    		[v-cloak]{
    			display:none;
    		}
    	</style>
    </head>
    <body>
    	
    	<div id="app">
    		
    		<p v-cloak>{
       {msg}}</p>
    		
    		
    		<h5 v-text="msg"></h5>
    		<div v-html="msg2">90789098</div>
    		
    		
    		<input type="button" value="这是一个按钮" :title="mytitle + '132132'" 
    		@click="show"/>
    	</div>
    
    
    	<script>
    		new Vue({
    			el:'#app',
    			data:{
    				msg:'123',
    				msg2:'<h1>我是一个H1标题</h1>',
    				mytitle:'这是一个title'
    			},
    			//这个methods属性中定义了当前Vue实例所有可用的方法
    			methods:{
    				show:function(){
    					alert("hello")
    				}
    			}
    		})
    	</script>
    </body>
    </html>

### 3. 一个简单的跑马灯实例 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="./vue.js"></script>
    	</head>
    	<body>
    		
    		<div id="app">
    			<button @click="lang">开始滚动</button>
    			<button @click="stop">低调</button>
    			<h4>{
       {msg}}</h4>
    			
    		</div>
    		<script>
    			new Vue({
    				el:"#app",
    				data:{
    					msg:'猥琐发育，别浪。。。',
    					intervalId:null
    				},
    				methods:{
    					lang(){
    						
    						if(this.intervalId!=null){
    							return;
    						}
    // 						如果想要获取data上的数据或者是想要调用methods中的方法,
    // 						必须使用this.数据属性名  或   this.方法名来进行访问
    						//开启一个定时器,每0.4秒执行一次操作
    						//=>用来解决this的指向问题,这样函数内部和外部使用的this保持一致
    						this.intervalId = setInterval(() => {
    							var start=this.msg.substring(0,1)
    							var end=this.msg.substring(1)
    							//vm实例会监听自己身上data数据的改变,只要数据已发生变化,就会自动把最新的数据从data上同步到页面中去
    							//程序员只需要关心数据,不需要渲染页面
    							this.msg=end+start
    						},400)
    					},
    					//停止定时器
    					stop(){ 
    						clearInterval(this.intervalId)
    						//每当清除了定时期之后需要重新赋值为null
    						this.intervalId=null
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

### 4. v-on的事件修饰符 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjU5Nzc3_size_16_color_FFFFFF_t_70 1]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="./vue.js"></script>
    		<style>
    			.inner{
    				height:150px;
    				background-color: aqua;
    			}
    			.outer{
    				padding: 40px;
    				background-color: crimson;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div id="app" >
    			
    			
    			
    			
    			
    			
    			
    			
    			
    			
    			
    			
    			
    			
    			
    			
    			
    			<div class="outer" @click="div2Handler">
    			<div class="inner" @click.self="div1Handler">
    				<button @click="btnHandler">戳他</button>
    			</div>
    			</div>
    		</div>
    		
    		
    		<script>
    		//创建一个Vue的实例
    		//new出来的这个vm对象，就是我们MVVM中的VM调度者
    			new  Vue({
    				el:'#app',
    			//这里的data就是MVVM中的M ，专门用来保存每个页面的数据
    				data:{
    					msg:'欢迎学习Vue'
    				},
    				methods:{
    					div1Handler(){
    						console.log('这是出发了inner div的点击事件')
    					},
    					btnHandler(){
    						console.log('这是触发了按钮的点击事件')
    					},
    					linkclick(){
    						console.log('这是触发了跳转的点击事件');
    					},
    					div2Handler(){
    						console.log('c触发outer的点击事件')
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

### 5. v-model双向绑定 ###

我们这里使用v-model双向绑定来写一个计算器类：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script src="./vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<input type="text" v-model="n1" />
    			
    			<select v-model="opt">
    				<option value="+">+</option>
    				<option value="-">-</option>
    				<option value="*">*</option>
    				<option value="/">/</option>
    			</select>
    			
    			<input type="text" v-model="n2"/>
    			<input type="button" value="=" @click="calc"/>
    			<input type="text" v-model="result" />
    		</div>
    		
    		<script>
    			new Vue({
    				el:'#app',
    				data:{
    					n1:0,
    					n2:0,
    					result:0,
    					opt:'*'
    				},
    				methods:{
    					calc(){  //计算器算数的方法
    // 						switch (this.opt){
    // 							case '+':
    // 								this.result=parseInt(this.n1)+parseInt(this.n2)
    // 								break;
    // 							case '-':
    // 								this.result=parseInt(this.n1)-parseInt(this.n2)
    // 								break;
    // 							case '*':
    // 								this.result=parseInt(this.n1)*parseInt(this.n2)
    // 								break;
    // 							case '/':
    // 								if(this.n2!=0){
    // 									this.result=parseInt(this.n1)/parseInt(this.n2)
    // 									break;
    // 								}else{
    // 									console.log("除数不能够为0")
    // 								}
    // 						}
    						//注意:这个方式很投机取巧,正式开发中少用
    						var codeStr='parseInt(this.n1)'+this.opt+'parseInt(this.n2)'
    						this.result=eval(codeStr)
    					}
    				}
    			})
    			
    		</script>
    	</body>
    </html>

### 6. 使用class样式 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjU5Nzc3_size_16_color_FFFFFF_t_70 2]

<!DOCTYPE html>
    <html>
    <head>
    	<script src="./vue.js"></script>
    	<style>
    		.red{
    			color: red;
    		}
    		.thin{
    			font_weight:200;
    		}
    		.italic{
    			font-style: italic;
    		}
    		.active{
    			letter-spacing: 0.5em;
    		}
    	</style>
    </head>
    <body>
    	<div id="root">
    		
    		
    		
    		
    		
    		
    		<h1 :class=classObj>干巴得啊小伙伴们</h1>
    	</div>
    
    	<script>
    		new Vue({
    			el:"#root",
    			data:{
    				flag:false,
    				classObj:{red:true,thin:true,italic:true,active:false}
    			},
    			methods:{
    			}
    		})
    	</script>
    </body>
    </html>

### 7.使用内联样式 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjU5Nzc3_size_16_color_FFFFFF_t_70 3]

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue入门</title>
    	<script src="./vue.js"></script>
    </head>
    <body>
    	<div id="root">
    		
    		<h1 :style="[styleObj,styleObj2]">喵喵喵</h1>
    	</div>
    
    	<script>
    		new Vue({
    			el:"#root",
    			data:{
    				styleObj:{color:'red','font-weight':200},
    				styleObj2:{'font-style':'italic'}
    			},
    			methods:{
    			}
    		})
    	</script>
    </body>
    </html>

### 8. v-for循环四种元素 ###

<!DOCTYPE html>
    <html>
    <head>
    	<script src="./vue.js"></script>
    </head>
    <body>
    	<div id="root">
    		
    		
    		
    		
    		
    		
    		<p v-for="item in 10">这是第{
       {item}}次循环</p>
    	</div>
    
    	<script>
    		new Vue({
    			el:"#root",
    			data:{
    // 				list:[
    // 					{id:1,name:'kaishui'},
    // 					{id:3,name:'hong'},
    // 					{id:0,name:'yoyo'},
    // 					{id:8,name:'qing'}
    // 				]
    // 				user:{
    // 					id:1,
    // 					name:'lalala',
    // 					gender:'nan'
    // 				}
    
    			},
    			methods:{
    			}
    		})
    	</script>
    </body>
    </html>

### 9. v-key的使用 ###

<!DOCTYPE html>
    <html>
    <head>
    	<title>Vue入门</title>
    	<script src="./vue.js"></script>
    </head>
    <body>
    	<div id="root">
    		<div>
    			<label>Id:
    				<input type="text" v-model="id"/>
    			</label>
    			<label>Name:
    				<input type="text" v-model="name" />
    			</label>
    			<button @click="add">添加</button>
    		</div>
    		
    		
    		
    		<p v-for="item in list" :key="item.id">
    			<input type="checkbox" />
    			{
       {item.id}}----{
       {item.name}}</p>
    	</div>
    
    	<script>
    		new Vue({
    			el:"#root",
    			data:{
    				list:[
    					{id:1,name:'李斯'},
    					{id:2,name:'嬴政'},
    					{id:3,name:'赵高'},
    					{id:4,name:'韩非'},
    					{id:5,name:'荀子'}
    				]
    			},
    			methods:{
    				add(){  //添加方法
    					this.list.unshift({id:this.id,name:this.name})
    				}
    			}
    		})
    	</script>
    </body>
    </html>

### 10.v-if 和 v-show 的区别 ###

<!DOCTYPE html>
    <html>
    <head>
    	<script src="./vue.js"></script>
    </head>
    <body>
    	<div id="root">
    		<button @click="flag=!flag" >toggle</button>
    		
    		
    		<h3 v-if=flag>这是用v-if控制的元素</h3>
    		
    		
    		<h3 v-show=flag>这是用v-show控制的元素</h3>
    		
    		
    	</div>
    
    	<script>
    		new Vue({
    			el:"#root",
    			data:{
    				flag:true
    			},
    			methods:{
    // 				toggle(){
    // 					this.flag=!this.flag
    // 				}
    			}
    		})
    	</script>
    </body>
    </html>

最后总结一下：  
如果你对此文有任何疑问，如果你也需要接口项目实战，如果你对软件测试、接口测试、自动化测试、面试经验交流感兴趣欢迎加入：软件测试技术群：**593462778**，群里的免费资料都是笔者十多年测试生涯的精华。还有同行大神一起交流技术哦。

作者：暗潮汹涌  
原创不易，欢迎转载，但未经作者同意请保留此段声明，并在文章页面明显位置给出原文链接。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjU5Nzc3_size_16_color_FFFFFF_t_70]: /images/20220223/e49ff10a64aa4206acb94ff816a4103c.png
[20190406132221708.png]: /images/20220223/bfeacbf7628c43bab8e88563b59e4271.png
[20190406132242435.png]: /images/20220223/14ce4b80c8254f838a48fba881bdc636.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjU5Nzc3_size_16_color_FFFFFF_t_70 1]: /images/20220223/28f5eaa0b4ae4279a8910be2c53cdf16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjU5Nzc3_size_16_color_FFFFFF_t_70 2]: /images/20220223/e636d54abe714239b177aa4b78665b9f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NjU5Nzc3_size_16_color_FFFFFF_t_70 3]: /images/20220223/6b294b16442f4515b51eca2638e4e13c.png