HTML頁(yè)面中使用Vue示例進(jìn)階（快速學(xué)會(huì)上手Vue）
Vue是用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架。特色：構(gòu)建用戶(hù)界面—數(shù)據(jù)變成界面；漸進(jìn)式—Vue可以自底向上逐層的應(yīng)用。
Vue有兩種使用方式，一種實(shí)在html中直接使用Vue做開(kāi)發(fā)，一種是企業(yè)級(jí)的單頁(yè)面應(yīng)用。后者是主流的使用方式，真正項(xiàng)目中很少使用前一種方式。前一種方式通過(guò)在大家熟悉的HTML環(huán)境中使用Vue，大家很容易去了解和熟悉VUE。
一、Vue框架的兩種使用方式
1、單頁(yè)面應(yīng)用：使用Vue CLI工具生成腳手架，這是最常見(jiàn)的使用方式
2、傳統(tǒng)多頁(yè)面應(yīng)用：通過(guò)script引入Vue.js
二、HTML頁(yè)面中簡(jiǎn)單使用Vue
首先在head中引入vue的文件
然后在body中寫(xiě)上一個(gè)帶有id的div
首先創(chuàng)建一個(gè)new Vue對(duì)象 , 一個(gè)中括號(hào) , 然后創(chuàng)建一個(gè){} , 中間書(shū)寫(xiě)一個(gè)el : #id 選中這個(gè)div , 然后書(shū)寫(xiě)數(shù)據(jù)展示區(qū)域data:{ } 括號(hào)中定義數(shù)據(jù)變量 , 以及變量的值
{{變量名稱(chēng)}}用來(lái)在頁(yè)面上展示數(shù)據(jù)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>快速入門(mén)</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è)級(jí)別的 , 然后你剛才定義的方法名:function(){ }
然后在方法體中 , 寫(xiě)出你要執(zhí)行的語(yǔ)句
另外上面的func(‘哈哈哈’) 這個(gè)哈哈哈就是方法的一個(gè)參數(shù) ,
然后function(msg ){} msg與上文中的哈哈哈對(duì)應(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>
四、鍵盤(pán)事件示例
和上面的點(diǎn)擊事件一樣 ,只不過(guò)是把click 換成了keydown
另外$event 與下文中的event是一個(gè)對(duì)象 , 也就是與我們傳統(tǒng)JS中的event中的對(duì)象是一樣的
然后我們定義一個(gè)變量 , 也就是代表每一個(gè)按鍵的Unicode編碼 , 然后我們可以不讓鍵盤(pán)起作用 , 使用event.preventDefault() 這樣就可以阻止鍵盤(pán)起作用 ;
<body>
<div id="app">
<input type="text" v-on:keydown="fun($event)">
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
meg:"這是一段無(wú)敵的代碼"
},
methods:{
fun:function (event) {
/*event是vue事件對(duì)象 和我們傳統(tǒng)JS中的event對(duì)象是一樣的*/
var keyCode = event.keyCode;
if (keyCode<48||keyCode>57){
//不讓鍵盤(pán)的按鍵起作用
event.preventDefault();
}
alert("我就是喜歡你");
}
}
});
</script>
五、鼠標(biāo)移動(dòng)事件示例
定義事件的操作和上面的操作沒(méi)有什么區(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 所以也就是阻止提交 ,
然后我們?cè)趧?chuàng)建一個(gè)Vue對(duì)象 , 這樣我們就可以對(duì)這個(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ù)組讓我用來(lái)遍歷 , 然后使用v-for即可 , v-for=" ", " "中寫(xiě)上一個(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>
遍歷對(duì)象數(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>
十、遍歷對(duì)象數(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就是可以取出一些對(duì)象格式的數(shù)據(jù) , 利用對(duì)象名 .屬性名 即可取出這些東西
<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:"張無(wú)忌",
password:"1234"
}
}
});
</script>
十二、v-show和v-if示例
show和if其實(shí)沒(méi)有太大區(qū)別 ,可以用來(lái)控制是否顯示內(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頁(yè)面中使用Vue（快速學(xué)會(huì)上手YUE）的文章就介紹到這了,更多相關(guān)HTML中使用Vue內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲(chǔ) key/value 對(duì)的數(shù)據(jù),localStorage 用于長(zhǎng)久保存整個(gè)網(wǎng)站的數(shù)據(jù),保存的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間,直到手動(dòng)去刪除,本文給大家介紹Vue3封裝localStorage-基本使用,感興趣的朋友一起看看吧2023-12-12
vue中的事件加判斷條件如何進(jìn)行選擇性點(diǎn)擊
這篇文章主要介紹了vue中的事件加判斷條件如何進(jìn)行選擇性點(diǎn)擊方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue中引用swiper輪播插件的方法,在需要使用swiper的組件里引入swiper，swiper的初始化放在mounted里。具體實(shí)例代碼大家跟隨腳本之家小編一起看看吧2018-08-08
Vue+Express實(shí)現(xiàn)登錄狀態(tài)權(quán)限驗(yàn)證的示例代碼
這篇文章主要介紹了Vue+Express實(shí)現(xiàn)登錄狀態(tài)權(quán)限驗(yàn)證的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-05-05
vue移動(dòng)端項(xiàng)目渲染pdf步驟及問(wèn)題小結(jié)
這篇文章主要介紹了vue移動(dòng)端項(xiàng)目渲染pdf步驟,vue-pdf的插件在使用的過(guò)程中是連連踩坑的，基本遇到3個(gè)問(wèn)題，分別在文中給大家詳細(xì)介紹，需要的朋友可以參考下2022-08-08
v-if根據(jù)表達(dá)式的真假，切換元素的顯示和隱藏操作DOM元素，這篇文章主要介紹了vue中的v-if基本使用,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Vue基礎(chǔ)語(yǔ)法知識(shí)梳理，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-12-12
這篇文章主要介紹了vue-jsonp的使用及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
插槽在真實(shí)的開(kāi)發(fā)中使用非常的多,比如我們?nèi)ビ靡恍┑谌浇M件庫(kù)的時(shí)候,通常都需要通過(guò)自定義插槽來(lái)實(shí)現(xiàn)內(nèi)容的自定義,本文主要介紹了Vue3使用slot插槽的實(shí)現(xiàn),感興趣的可以了解一下2023-12-12
vue插件mescroll.js實(shí)現(xiàn)移動(dòng)端上拉加載和下拉刷新
這篇文章主要介紹了vue插件mescroll.js實(shí)現(xiàn)移動(dòng)端上拉加載和下拉刷新，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-03-03