HTML頁面中使用Vue實例進階（快速學會上手Vue）

Posted on by

Vue是用於構建用戶界面的漸進式JavaScript框架。特色：構建用戶界面—數據變成界面；漸進式—Vue可以自底向上逐層的應用。

Vue有兩種使用方式，一種實在html中直接使用Vue做開發，一種是企業級的單頁面應用。後者是主流的使用方式，真正項目中很少使用前一種方式。前一種方式通過在大傢熟悉的HTML環境中使用Vue，大傢很容易去瞭解和熟悉VUE。

Vue框架的兩種使用方式

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

2、傳統多頁面應用：通過script引入Vue.js

HTML頁面中簡單使用Vue

首先在head中引入vue的文件

然後在body中寫上一個帶有id的div

首先創建一個new Vue對象 , 一個中括號 , 然後創建一個{} , 中間書寫一個el : #id 選中這個div , 然後書寫數據展示區域data:{ } 括號中定義數據變量 , 以及變量的值

{{變量名稱}}用來在頁面上展示數據

<!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>

 點擊事件

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

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

然後在方法體中 , 寫出你要執行的語句

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

然後function(msg ){} msg與上文中的哈哈哈對應 , 然後我們把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>

鍵盤事件

和上面的點擊事件一樣 ,隻不過是把click 換成瞭keydown

另外$event 與下文中的event是一個對象 , 也就是與我們傳統JS中的event中的對象是一樣的

然後我們定義一個變量 , 也就是代表每一個按鍵的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事件對象 和我們傳統JS中的event對象是一樣的*/
					var keyCode = event.keyCode;
					if (keyCode<48||keyCode>57){
						//不讓鍵盤的按鍵起作用
						event.preventDefault();
					}
					alert("我就是喜歡你");
				}
			}

		});
	</script>

 鼠標移動事件

定義事件的操作和上面的操作沒有什麼區別 , 隻是換成瞭mouseover , 另外一個就是 ,v-on: 可以換成@, 兩者之間是等價的

然後還有一個阻止事件傳播 , 及時這個文件域是定義在div中的 , 所以移動到文件域就相當於移動到瞭div中 ,所以我們需要在文件域的函數中阻止事件傳播

 event.stopPropagation();

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

 事件修飾符

這個就是在提交表單的時候 , 會觸發一個函數 , 因為後邊加瞭prevent 所以也就是阻止提交 ,

然後我們在創建一個Vue對象 , 這樣我們就可以對這個表單進行控制瞭

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

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

 V-text和V-html

兩者之間的區別就是V-text不會去解析等各種HTML標簽 , 而V-html則會去解析這些東西

<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

插值表達式不能作用於HTML標簽的屬性取值 ,要想給HTML屬性設置變量的值 , 需要使用V-bind

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

V-for

首先在vue中定義一個數組讓我用來遍歷 , 然後使用v-for即可 , v-for=" ", " "中寫上一個變量並且在哪個數組中

<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>

遍歷對象數組

<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就是可以取出一些對象格式的數據 , 利用對象名 .屬性名 即可取出這些東西

<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其實沒有太大區別 ,可以用來控制是否顯示內容 ,true就顯示 ,false就不顯示

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

到此這篇關於HTML頁面中使用Vue（快速學會上手YUE）的文章就介紹到這瞭,更多相關HTML中使用Vue內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：