Vue入门示例（二）

迈不过友情╰ 2021-08-19 12:43 316阅读 0赞

**目录**

08\_v-show.html

09\_event\_keyboard.html

10\_v-bind.html

11\_v-bind\_1.html

12\_filter.html

--------------------

## 08\_v-show.html ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>v-show</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    		<script>
    			window.onload = () => {
    				let vm = new Vue({
    					el : '#sikiedu',
    					data : {
    						flag : true,
    						num : 0
    					},
    					methods : {
    						
    					}
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<div id="sikiedu">
    			<button @click="flag = !flag">click</button><br />
    			
    			<button @click="num = 1">--1--</button>
    			<button @click="num = 2">--2--</button>
    			<button @click="num = -1">--负1--</button>
    			<h2 v-if="num === 1">我要吃饭</h2>
    			<h2 v-else-if="num === 2">我要学习</h2>
    			<h2 v-else>我要玩游戏</h2>
    			
    			<br />
    			<h1 v-show="flag">欢迎来到siki学院 1</h1>
    			<h1 v-if="flag">欢迎来到siki学院 2</h1>
    		</div>
    	</body>
    </html>

![20190914225043193.gif][]

## 09\_event\_keyboard.html ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>v-event_keyboard</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    		<script>
    			Vue.config.keyCodes = {
    				"F4" : 115, //F4的keycode是115
    				up : [87, 38] //w的keycode是38，up箭头符号的keycode是87
    			}
    			window.onload = () => {
    				let vm = new Vue({
    					el : '#sikiedu',
    					data : {
    					
    					},
    					methods : {
    						show (e) {
    							console.log(e);
    						},
    						onEnter (e) {
    							if(e.keyCode == 13){
    								console.log("按下回车 提交了 onEnter,这是原生js的实现方式");
    							}
    						},
    						newOnEnter1(){
    							console.log("按下回车 提交了 newOnEnter1,这是vue提供的方式");
    						},
    						newOnEnter2(){
    							console.log("按下回车 提交了 newOnEnter2，这是vue提供的内置按键别名");
    						},
    						onKeyAUp(){
    							console.log("抬起键盘 的 a");
    						},
    						onF4(){
    							console.log("按下F4键了");
    						},
    						onUpDown(){
    							console.log("按下W或者up箭头符号 前进");
    						}
    					}
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<div id="sikiedu">
    			<input type="text" placeholder="监测按键事件" @keydown="show($event)"/>
    			<input type="text" placeholder="原生js 输入后按回车提交" @keydown="onEnter($event)"/>
    			<input type="text" placeholder="vue 输入后按回车提交" @keydown.13="newOnEnter1"/>
    			<input type="text" placeholder="vue 输入后按回车提交" @keydown.enter="newOnEnter2"/>
    			<input type="text" placeholder="抬起键盘 A" @keyup.a="onKeyAUp"/>
    			<input type="text" placeholder="按下F4键" @keydown.F4="onF4"/>
    			<input type="text" placeholder="按下W或者up箭头符号 前进" @keydown.up="onUpDown"/>
    		</div>
    	</body>
    </html>

![20190914233020630.png][]

![20190914233056908.png][]

## 10\_v-bind.html ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>v-bind</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    		<script>
    			window.onload = () => {
    				let vm = new Vue({
    					el : '#sikiedu',
    					data : {
    						imgUrl : 'https://cn.vuejs.org/images/logo.png',
    						myWidth : "200px",
    						myHeight : "240px",
    						fileName : "logo.png"
    					},
    					methods : {
    						
    					}
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<div id="sikiedu">
    			<img v-bind:src="imgUrl" />
    			<img :src="imgUrl" :width="myWidth"  :height="myHeight"/>
    			<img :src="'../res/images/' + fileName" :width="myWidth"  :height="myHeight"/>
    		</div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

## 11\_v-bind\_1.html ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>v-bind_1</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    		<script>
    			window.onload = () => {
    				let vm = new Vue({
    					el : '#sikiedu',
    					data : {
    						fontColor : 'myColor',
    						fontBackgroundColor : 'myBackgounrdColor',
    						flag : true,
    						fontSize : 'myFontSize',
    //						黄色 (255,255,0)
    						colorA : {color : 'rgb(255,255,0)'}, 
    						colorB : {backgroundColor : 'rgb(65, 184, 131)'}
    					},
    					methods : {
    						
    					}
    				});
    			}
    		</script>
    		<style type="text/css">
    			.myColor{
    				color: rgb(255,23,140); /*红色*/
    				text-align: center;
    			}
    			.myBackgounrdColor{
    				background: rgb(65, 184, 131); /*绿色*/
    			}
    			.myFontSize{
    				font-size: 50px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="sikiedu">
    			<h3 class="myColor">Vue</h3>
    			<h3 :class="fontColor">Vue</h3> 		
    			<h3 :class="[fontColor, fontBackgroundColor]">Vue</h3> 	
    			
    			<h3 :style="[colorA, colorB]">Vue</h3>
    			
    			<h3 :class="{myColor : flag, myBackgounrdColor : !flag}">Vue</h3>
    			
    			<h3 :class="[fontSize, {myColor : flag, myBackgounrdColor : flag}]">Vue</h3>
    		</div>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]

## 12\_filter.html ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>v-filter</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    		<script>
    			Vue.filter('strSplit', function(value, start, end){
    				if(!value){
    					return '';
    				}
    				return value.toString().slice(start, end);
    			});
    			window.onload = () => {
    				let vm = new Vue({
    					el : '#sikiedu',
    					data : {
    						msg : '',
    						msg1 : ''
    					},
    					methods : {
    						
    					},
    					filters : {
    						UpperCase(value){
    							if(!value){
    								return '';
    							}
    							return value.toString().toUpperCase();
    						}
    					}
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<div id="sikiedu">
    			<input type="text" v-model="msg" /><br />
    			小写转大写：{
       {msg | UpperCase}}<br />
    			
    			<input type="text" v-model="msg1" /><br />
    			字符串截取：{
       {msg1 | strSplit(1, 3)}}<br />
    		</div>
    	</body>
    </html>

![2019091510011375.png][]

**[Vue入门示例（一）][Vue]**

**[用Vue实现的Demo-商品管理][Vue_Demo-]**

[20190914225043193.gif]: /images/20210725/c4c3a750de1d48f8a668680ec73d54af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/ace1debd34e7461d8fe78cad6dba8ce7.png
[20190914233020630.png]: /images/20210725/82dbb5977b4c4d0cb813fff945195761.png
[20190914233056908.png]: /images/20210725/acb60ccc07b24c13bc4f57fafc18606d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/5612feb25ce040d890e1ec96ab97a738.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: /images/20210725/25ba4b6b95af4284824f94716689d31d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: /images/20210725/4886627dff7242b281eaad8b5c1b64fa.png
[2019091510011375.png]: /images/20210725/5d137e9578994e00afc731d13ebd40fe.png
[Vue]: https://blog.csdn.net/qq_40323256/article/details/100828825
[Vue_Demo-]: https://blog.csdn.net/qq_40323256/article/details/100848964