HTML頁面中使用Vue示例進(jìn)階（快速學(xué)會(huì)上手Vue）

更新時(shí)間：2023年02月11日 17:25:57 投稿：yin

Vue是用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。特色：構(gòu)建用戶界面—數(shù)據(jù)變成界面；漸進(jìn)式—Vue可以自底向上逐層的應(yīng)用。VUE有兩種使用方式，一種實(shí)在html中直接使用vue做開發(fā)，一種是企業(yè)級的單頁面應(yīng)用。

一、Vue框架的兩種使用方式
二、HTML頁面中簡單使用Vue
三、點(diǎn)擊事件示例
四、鍵盤事件示例
五、鼠標(biāo)移動(dòng)事件示例
六、事件修飾符示例
七、V-text和V-html示例
八、V-bind示例
九、V-for示例
十、遍歷對象數(shù)組示例
十一、V-model示例
十二、v-show和v-if示例

Vue是用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。特色：構(gòu)建用戶界面—數(shù)據(jù)變成界面；漸進(jìn)式—Vue可以自底向上逐層的應(yīng)用。

Vue有兩種使用方式，一種實(shí)在html中直接使用Vue做開發(fā)，一種是企業(yè)級的單頁面應(yīng)用。后者是主流的使用方式，真正項(xiàng)目中很少使用前一種方式。前一種方式通過在大家熟悉的HTML環(huán)境中使用Vue，大家很容易去了解和熟悉VUE。

一、Vue框架的兩種使用方式

1、單頁面應(yīng)用：使用Vue CLI工具生成腳手架，這是最常見的使用方式

2、傳統(tǒng)多頁面應(yīng)用：通過script引入Vue.js

二、HTML頁面中簡單使用Vue

首先在head中引入vue的文件

然后在body中寫上一個(gè)帶有id的div

首先創(chuàng)建一個(gè)new Vue對象 , 一個(gè)中括號 , 然后創(chuàng)建一個(gè){} , 中間書寫一個(gè)el : #id 選中這個(gè)div , 然后書寫數(shù)據(jù)展示區(qū)域data:{ } 括號中定義數(shù)據(jù)變量 , 以及變量的值

{{變量名稱}}用來在頁面上展示數(shù)據(jù)

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <title>快速入門</title>
      <script src="js/vuejs-2.5.16.js"></script>
   </head>
   <body>
      <div id="app">
         {{shuju}}
         {{NUMBER*10}}
         {{falese?"ok":"no"}}
      </div>
   </body>
   <script>
      new Vue(
            {
               el:"#app",
               data:{
                  shuju:"hello 陳小姐",
                  NUMBER: 10,
               }
            }
      );  
   </script>
</html>

三、點(diǎn)擊事件示例

首先定義一個(gè)button按鈕 , v-on: click=“func”

定義一個(gè)methods :{ } 和data是一個(gè)級別的 , 然后你剛才定義的方法名:function(){ }

然后在方法體中 , 寫出你要執(zhí)行的語句

另外上面的func(‘哈哈哈’) 這個(gè)哈哈哈就是方法的一個(gè)參數(shù) ,

然后function(msg ){} msg與上文中的哈哈哈對應(yīng) , 然后我們把msg賦值給messge , 所以message就顯示為哈哈哈了

<body>
		<div id="app">
			{{message}}
			<button v-on:click="func('哈哈哈哈')" id="mybotton">vue的onclick</button>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				message:"hello"
			},
			methods:{
				func:function (msg) {
					alert("陳小姐 , 你愿意做我女朋友嗎?")
					this.message=msg;
				}
			}
		});
	</script>

四、鍵盤事件示例

和上面的點(diǎn)擊事件一樣 ,只不過是把click 換成了keydown

另外$event 與下文中的event是一個(gè)對象 , 也就是與我們傳統(tǒng)JS中的event中的對象是一樣的

然后我們定義一個(gè)變量 , 也就是代表每一個(gè)按鍵的Unicode編碼 , 然后我們可以不讓鍵盤起作用 , 使用event.preventDefault() 這樣就可以阻止鍵盤起作用 ;

<body>
		<div id="app">
			<input type="text" v-on:keydown="fun($event)">
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				meg:"這是一段無敵的代碼"
			},
			methods:{
				fun:function (event) {
					/*event是vue事件對象 和我們傳統(tǒng)JS中的event對象是一樣的*/
					var keyCode = event.keyCode;
					if (keyCode<48||keyCode>57){
						//不讓鍵盤的按鍵起作用
						event.preventDefault();
					}
					alert("我就是喜歡你");
				}
			}

		});
	</script>

五、鼠標(biāo)移動(dòng)事件示例

定義事件的操作和上面的操作沒有什么區(qū)別 , 只是換成了mouseover , 另外一個(gè)就是 ,v-on: 可以換成@, 兩者之間是等價(jià)的

然后還有一個(gè)阻止事件傳播 , 及時(shí)這個(gè)文件域是定義在div中的 , 所以移動(dòng)到文件域就相當(dāng)于移動(dòng)到了div中 ,所以我們需要在文件域的函數(shù)中阻止事件傳播

event.stopPropagation();

<body>
   <div id="app">
      <div v-on:mouseover="fun1" id="div">
         <textarea v-on:mouseover="fun2($event)">這是一個(gè)文件域</textarea>
      </div>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      methods:{
         fun1:function () {
         alert("這是一個(gè)div區(qū)域");
         },
         fun2:function (event) {
         alert("這是一個(gè)文件域");
         event.stopPropagation();
         }
      }
   });
</script>

六、事件修飾符示例

這個(gè)就是在提交表單的時(shí)候 , 會(huì)觸發(fā)一個(gè)函數(shù) , 因?yàn)楹筮吋恿藀revent 所以也就是阻止提交 ,

然后我們在創(chuàng)建一個(gè)Vue對象 , 這樣我們就可以對這個(gè)表單進(jìn)行控制了

<body>
   <div id="app">
      <form @submit.prevent action="http://www.itheima.com" method="get">
         <input type="submit" value="點(diǎn)點(diǎn)我進(jìn)行提交">
      </form>
   </div>
</body>

<script>
   new Vue({
      el:"#app"
   });
</script>

七、V-text和V-html示例

兩者之間的區(qū)別就是V-text不會(huì)去解析等各種HTML標(biāo)簽 , 而V-html則會(huì)去解析這些東西

<body>
   <div id="app">
      <div v-text="message"></div>
      <div v-html="message"></div>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{
         message:"<h1>陳小姐 , 做我女朋友吧 !<h1>"
      }
   });
</script>

八、V-bind示例

插值表達(dá)式不能作用于HTML標(biāo)簽的屬性取值 ,要想給HTML屬性設(shè)置變量的值 , 需要使用V-bind

<body>
   <div id="app">
      <font v-bind:color="c1">我是一個(gè)小逗比</font>
      <hr>
      <font v-bind:color="c2">我是一個(gè)大逗逼</font>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{
         c1:"green",
         c2:"blue"
      }
   });
</script>

九、V-for示例

首先在vue中定義一個(gè)數(shù)組讓我用來遍歷 , 然后使用v-for即可 , v-for=" ", " "中寫上一個(gè)變量并且在哪個(gè)數(shù)組中

<body>
   <div id="app">
      <li v-for="(item) in arr">{{item}}</li>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{
         arr:['陳','小','姐','我','喜','歡','你'],
      }
   });
</script>

遍歷集合

<body>
   <div id="app">
      <li v-for="(k,v) in stu">{{v}}={{k}}</li>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{
         stu:{
            id:1,
            name:"張三豐",
            age:"100",
            height:"173"
         }
      }
   });
</script>

遍歷對象數(shù)組

<body>
   <div id="app">
      <table border="1px">
         <tr>
            <td>ID</td>
            <td>name</td>
            <td>age</td>
         </tr>
         <tr v-for="(stu,index) in stus">
            <td>{{stu.id}}</td>
            <td>{{stu.name}}</td>
            <td>{{stu.age}}</td>
         </tr>
      </table>

   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{
         stus:[
            {id:1, name:"張三豐", age:"100"},
            {id:2, name:"科比", age:"40"},
            {id:3, name:"張帥", age:"25"}
         ]
      }
   });
</script>

十、遍歷對象數(shù)組示例

<body>
   <div id="app">
      <table border="1px">
         <tr>
            <td>ID</td>
            <td>name</td>
            <td>age</td>
         </tr>
         <tr v-for="(stu,index) in stus">
            <td>{{stu.id}}</td>
            <td>{{stu.name}}</td>
            <td>{{stu.age}}</td>
         </tr>
      </table>

   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{
         stus:[
            {id:1, name:"張三豐", age:"100"},
            {id:2, name:"科比", age:"40"},
            {id:3, name:"張帥", age:"25"}
         ]
      }
   });
</script>

十一、V-model示例

v-model就是可以取出一些對象格式的數(shù)據(jù) , 利用對象名 .屬性名即可取出這些東西

<body>
   <div id="app">
      <form action="#" method="post">
         <input type="text" v-model="user.username">
         <br>
         <input type="password" v-model="user.password">
      </form>
   </div>
</body>
<script>
   new Vue({
      el:"#app",
      data:{
         user:{
            username:"張無忌",
            password:"1234"
         }
      }
   });
</script>

十二、v-show和v-if示例

show和if其實(shí)沒有太大區(qū)別 ,可以用來控制是否顯示內(nèi)容 ,true就顯示 ,false就不顯示

<body>
   <div id="app">
      <span v-if="show">你好啊</span>
      <hr>
      <span v-show="show">今天天氣不錯(cuò)</span>
   </div>
</body>
<script>
new Vue({
   el:"#app",
   data:{
      show:true
   }
});
</script>

到此這篇關(guān)于HTML頁面中使用Vue（快速學(xué)會(huì)上手YUE）的文章就介紹到這了,更多相關(guān)HTML中使用Vue內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: