Vue入门示例（一）

╰+攻爆jí腚メ 2021-08-19 13:08 492阅读 0赞

**目录**

01\_hello-vue.html

02\_v-model.html

03\_v-model\_1.html

04\_v-text.html

05\_v-for.html

06\_v-on.html

07\_event.html

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

## 01\_hello-vue.html ##

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>hello-vue</title>
    		<script type="text/javascript" src="../js/vue.js"></script>
    		<script>
    			
    			Vue.config.devtools = false;
    			Vue.config.productionTip = false;//这两行代码可以消除插件提示
    			
    			var app = null;
    			window.onload = function() {
    				app = new Vue({
    					el: '#sikiedu',
    					data: {
    						msg: 'Hello - Vue!'
    					}
    				});
    			}
    		</script>
    	</head>
    
    	<body>
    		<div id="sikiedu">
    			{
       {msg}}
    		</div>
    	</body>
    
    </html>

运行结果：

![20190914152510740.png][]

## 02\_v-model.html ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>v-model</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    		<script>
    			window.onload = () => {
    				new Vue({
    					el : 'div',
    					data : {
    						username : '',
    						num : 123,
    						arr : [11, 22 ,33],
    						user : {
    							name : 'Joey',
    							age : 123
    						}
    					}
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<div>
    			用户名：<input type="text" v-model="username" />
    			{
       {username}}<br />
    			{
       {num}}<br />
    			{
       {arr}}<br />
    			{
       {user}}<br />
    		</div>
    	</body>
    </html>

![2019091415380770.png][]

## 03\_v-model\_1.html ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>v-model</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    		<script>
    			window.onload = () => {
    				new Vue({
    					el : '#sikiedu',
    					data : {
    						checked : false,
    						users : [],
    						selected : '',
    						msg : ''
    					}
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<div id="sikiedu">
    			<div id="checkbox">
    				<input type="checkbox" v-model="checked" />{
       {checked}}
    			</div>
    			<div id="multi-checkbox">
    				<input type="checkbox" value="siki" v-model="users" />siki
    				<input type="checkbox" value="lain" v-model="users" />lain
    				<input type="checkbox" value="joey" v-model="users" />joey
    				<br />
    				选中的老师 : {
       {users}}
    			</div>
    			<div id="select">
    				<select v-model="selected">
    					<option disabled="disabled" value="">请选择</option>
    					<option>JavaEE</option>
    					<option>Unity3D</option>
    					<option>UE4</option>
    					<option>VUE</option>
    				</select>
    				<span>已选择：{
       {selected}}</span>
    			</div>
    			<div id="textarea">
    				<textarea v-model="msg"></textarea>
    				<p style="white-space: pre-line;">{
       {msg}}</p>
    			</div>
    		</div>
    	</body>
    </html>

![20190914154007209.gif][]

## 04\_v-text.html ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>v-text</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    		<script>
    			window.onload = () => {
    				new Vue({
    					el : '#sikiedu',
    					data : {
    						msg : 'siki学院<br>asfd'
    					},
    					created : function(){
    						alert(1);
    					}
    				});
    			}
    		</script>
    		<style type="text/css">
    			[v-cloak]{
    				display: none;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="sikiedu">
    			<input type="text" v-model="msg"/>
    			<h2 v-pre>{
       {msg}}</h2>    
    			<h2 v-cloak>{
       {msg}}</h2>
    			<h2 v-text="msg"></h2>    
    			<h2 v-html="msg"></h2>  
    			<h2 v-html="msg" v-once></h2>
    		</div>
    	</body>
    </html>

![20190914160503508.gif][]

## 05\_v-for.html ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>v-for</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    		<script>
    			window.onload = () => {
    				new Vue({
    					el : '#sikiedu',
    					data : {
    						arr : [11, 22, 33, 44],
    						user : {
    							id : '01',
    							name : 'joey'
    						},
    						users : [
    							{id : '01', name : 'joey'},
    							{id : '04', name : 'xxxx'},
    							{id : '02', name : 'siki'},
    							{id : '03', name : 'lain'}
    						]
    					}
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<div id="sikiedu">
    			<ul>
    				<li v-for="value in arr">{
       {value}}</li><br />
    				<li v-for="(value, key, index) in user">{
       {index}} - {
       {key}} - {
       {value}}</li><br />
    				<li v-for="(value, index) in users">{
       {index}} - {
       {value.id}} - {
       {value.name}}</li>
    			</ul>
    		</div>
    	</body>
    </html>

![20190921160052831.png][]

## 06\_v-on.html ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>v-on</title>
    		<script type="text/javascript" src="../js/vue.js" ></script>
    		<script>
    			window.onload = () => {
    				let vm = new Vue({
    					el : '#sikiedu',
    					data : {
    						result : 0
    					},
    					methods : {
    						show : function(){
    							console.log("show");
    						},
    						add (a, b){
    							console.log("add");
    							console.log(this === vm);
    							this.result += a + b;
    						}
    					}
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<div id="sikiedu">
    			<button v-on:click="show">click!</button>
    			<button @click="show">click!</button>
    			<button v-on:click="add(1, 2)">click add!</button>result : {
       {result}}
    			<button v-on:mouseenter="add(10, 20)">click mouseenter!</button>result : {
       {result}}
    		</div>
    	</body>
    </html>

![20190914182211142.gif][]

## 07\_event.html ##

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>v-event</title>
    		<script type="text/javascript" src="js/vue.js" ></script>
    		<script>
    			window.onload=()=>{
    				var vm=new Vue({
    					el:'#sikiedu',
    					data:{
    						result:0,
    						result_once:0
    					},
    					methods:{
    						show(e){
    							console.log(e);
    							console.log(e.target.innerHTML);
    						},
    						add(a,b){
    							console.log("add");
    							this.result+=a+b;
    						},
    						add_once(a,b){
    							console.log("add_once");
    							this.result_once+=a+b;
    						},
    						showA(){
    							console.log("showA");
    						},
    						showB(){
    							console.log("showB");
    						}
    						
    					}
    				});
    			}
    		</script>
    	</head>
    	<body>
    		<div id="sikiedu">
    			<button @click="show($event)">click A</button><br />
    			<button @click="add(1,2)">click add</button>result:{
       {result}}<br />
    			<button @click.once="add_once(1,2)">click.once add</button>result_once:{
       {result_once}}<br />
    			
    			<div @click="showA()">
    				<div @click="showB()">
    					<button @click="show($event)">事件冒泡</button>
    				</div>
    			</div>
    			
    			
    			<div @click="showA()">
    				<div @click="showB()">
    					<button @click.stop="show($event)">阻止事件冒泡</button>
    				</div>
    			</div>
    			
    			<a href="https://www.baidu.com">链接到baidu.com</a><br />
    			
    			<a href="https://www.baidu.com" @click.prevent>阻止链接到baidu.com</a>
    		</div>
    	</body>
    </html>

运行结果如下：

![20190914223242435.png][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/948d18a39f1c4dd582c53726e0cd419a.png
[20190914152510740.png]: /images/20210725/8255f168cdd24a019d951e7a76696199.png
[2019091415380770.png]: /images/20210725/caeac532cb5341b693312b4243ad5694.png
[20190914154007209.gif]: /images/20210725/cd52adb97e414e4cb05e751e6dba2bbc.png
[20190914160503508.gif]: /images/20210725/3b697362fa71432aaedb43563cc6c6e8.png
[20190921160052831.png]: /images/20210725/b51befa94ac6433f829a5862b70db59c.png
[20190914182211142.gif]: /images/20210725/17d9d7312e40438391933a2550b587fe.png
[20190914223242435.png]: https://img-blog.csdnimg.cn/20190914223242435.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/98329aa0169c4a1f9eced6666dfc8bc6.png
[Vue]: https://blog.csdn.net/qq_40323256/article/details/100838255