本文小編為大家詳細介紹“HTML頁面中如何使用Vue”，內容詳細，步驟清晰，細節處理妥當，希望這篇“HTML頁面中如何使用Vue”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。
Vue是用于構建用戶界面的漸進式JavaScript框架。特色：構建用戶界面—數據變成界面；漸進式—Vue可以自底向上逐層的應用。
Vue有兩種使用方式，一種實在html中直接使用Vue做開發，一種是企業級的單頁面應用。后者是主流的使用方式，真正項目中很少使用前一種方式。前一種方式通過在大家熟悉的HTML環境中使用Vue，大家很容易去了解和熟悉VUE。
1、單頁面應用：使用Vue CLI工具生成腳手架，這是最常見的使用方式
2、傳統多頁面應用：通過script引入Vue.js
首先在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不會去解析等各種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:"<h2>陳小姐 , 做我女朋友吧 !<h2>"
}
});
</script>插值表達式不能作用于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>首先在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><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就是可以取出一些對象格式的數據 , 利用對象名 .屬性名 即可取出這些東西
<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>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”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
