vue基本用法

骑猪看日落 2022-01-22 02:27 240阅读 0赞

# 一、v-text与v-html.html #

## v-html 可以解析标签，解析样式,v-text不能解析，只能原样输出 ##

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

# 二、v-bind绑定参数 #

## v-bind简写方式 ##

<a v-bind:href="url">...</a>
    
    <a :href="url">...</a>

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

# 三、v-model双向绑定 #

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

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

# 四、v-for #

## 简单用法 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 5]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>v-for   </title>
    		<script type="text/javascript" src="js/vue-v2.6.10.js" ></script>
    	</head>
    	<body>
    		<div id="app">
    			<ol>
    				<li v-for="o in user">{
       {o}}</li>
    			</ol>
    			
    		</div>
    	</body>
    	<script type="text/javascript">
    		new Vue({
    		  el:"#app",
    		  data:{
    		  	user:{
    		  		id:001,
    		  		username:"willaim",
    		  		password:"123",
    		  		sex:"nan",
    		  		age:20
    		  	}
    		  }
             			
    			
    			
    		})
    	</script>
    </html>

## 2.操作对象 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 6]

## 3.操作对象数组 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 8]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>v-for   </title>
    		<script type="text/javascript" src="js/vue-v2.6.10.js" ></script>
    	</head>
    	<body>
    		<div id="app">
    			<ol>
    				<li v-for="o in user">{
       {o}}</li>
    			</ol>
    				
    				<ol>
    				<li v-for="(key,value) in user">{
       {key+"::"+value}}</li>
    			</ol>
    			<table>
    				<tr >
    					<td>id</td>
    					<td>用户名</td>
    					<td>密码</td>
    					<td>性别</td>
    					<td>年龄</td>
    				</tr>
    				<tr v-for="user in userList">
    					<td>{
       {user.id}}</td>
    					<td>{
       {user.username}}</td>
    					<td>{
       {user.password}}</td>
    					<td>{
       {user.sex}}</td>
    					<td>{
       {user.age}}</td>
    				</tr>
    			</table>
    		</div>
    	</body>
    	<script type="text/javascript">
    		new Vue({
    		  el:"#app",
    		  data:{
    		  	user:{
    		  		id:001,
    		  		username:"willaim",
    		  		password:"123",
    		  		sex:"nan",
    		  		age:20
    		  	},
    		  userList:[
    		  	{
    		  		id:001,
    		  		username:"willaim",
    		  		password:"123",
    		  		sex:"nan",
    		  		age:20
    		  	},
    		  	{
    		  		id:002,
    		  		username:"willaim-li",
    		  		password:"456",
    		  		sex:"nan",
    		  		age:22
    		  	}
    		  ]	
    			 },
    		})
    	</script>
    </html>

# 五、v-if与v-show #

v-if：判断是否加载元素  
v-show：展示样式  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 9]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    				<title>v-if和v-show   </title>
    		<script type="text/javascript" src="js/vue-v2.6.10.js" ></script>
    		
    	</head>
    	<body>
    		<div id="app">
    			
    			<font v-if="seen">百度</font>
    			<font v-show="seen">谷歌</font>
    			<input type="button" value="切换" @click="fun1" />
    		</div>
    	</body>
    <script type="text/javascript">
    	new Vue({
    		el:"#app",
    		data:{
    			seen: false
    		},
    		methods:{
    			fun1:function(){
    				this.seen=!this.seen;
    			}
    			
    			
    		}	
    	})
    	
    </script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70]: /images/20220122/be07849ea0a541248b194332611cd209.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 1]: /images/20220122/743b0d5f5e094433af04b7000443eba7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 2]: /images/20220122/a25bd8709cc74eae991b285d9f4399f2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 3]: /images/20220122/91e7f1a1df384c1ebaaae6d668864982.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 4]: /images/20220122/b9f2cc3a4ba34825a641472f8a91b55d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 5]: /images/20220122/965f2ad81c814d1d95e9e0b1b5ebb282.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 6]: /images/20220122/1cf09122816d4ba797a1a622518fdce5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 7]: /images/20220122/f253c1fd9d3745c780385140d78b6ec8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 8]: /images/20220122/68de0ac2384a4fce9345b27f317e5ed1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM5MTc5OTkz_size_16_color_FFFFFF_t_70 9]: /images/20220122/0ddd5e5a748c44d1ba68b6213b7baca3.png