HTML頁面中使用Vue示例進階（快速學會上手Vue）
Vue是用于構建用戶界面的漸進式JavaScript框架。特色：構建用戶界面—數(shù)據(jù)變成界面；漸進式—Vue可以自底向上逐層的應用。
Vue有兩種使用方式，一種實在html中直接使用Vue做開發(fā)，一種是企業(yè)級的單頁面應用。后者是主流的使用方式，真正項目中很少使用前一種方式。前一種方式通過在大家熟悉的HTML環(huán)境中使用Vue，大家很容易去了解和熟悉VUE。
一、Vue框架的兩種使用方式
1、單頁面應用：使用Vue CLI工具生成腳手架，這是最常見的使用方式
2、傳統(tǒng)多頁面應用：通過script引入Vue.js
二、HTML頁面中簡單使用Vue
首先在head中引入vue的文件
然后在body中寫上一個帶有id的div
首先創(chuàng)建一個new Vue對象 , 一個中括號 , 然后創(chuàng)建一個{} , 中間書寫一個el : #id 選中這個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>
三、點擊事件示例
首先定義一個button按鈕 , v-on: click=“func”
定義一個methods :{ } 和data是一個級別的 , 然后你剛才定義的方法名:function(){ }
然后在方法體中 , 寫出你要執(zhí)行的語句
另外上面的func(‘哈哈哈’) 這個哈哈哈就是方法的一個參數(shù) ,
然后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是一個對象 , 也就是與我們傳統(tǒng)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事件對象 和我們傳統(tǒng)JS中的event對象是一樣的*/
var keyCode = event.keyCode;
if (keyCode<48||keyCode>57){
//不讓鍵盤的按鍵起作用
event.preventDefault();
}
alert("我就是喜歡你");
}
}
});
</script>
五、鼠標移動事件示例
定義事件的操作和上面的操作沒有什么區(qū)別 , 只是換成了mouseover , 另外一個就是 ,v-on: 可以換成@, 兩者之間是等價的
然后還有一個阻止事件傳播 , 及時這個文件域是定義在div中的 , 所以移動到文件域就相當于移動到了div中 ,所以我們需要在文件域的函數(shù)中阻止事件傳播
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區(qū)域");
},
fun2:function (event) {
alert("這是一個文件域");
event.stopPropagation();
}
}
});
</script>
六、事件修飾符示例
這個就是在提交表單的時候 , 會觸發(fā)一個函數(shù) , 因為后邊加了prevent 所以也就是阻止提交 ,
然后我們在創(chuàng)建一個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示例
兩者之間的區(qū)別就是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中定義一個數(shù)組讓我用來遍歷 , 然后使用v-for即可 , v-for=" ", " "中寫上一個變量并且在哪個數(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其實沒有太大區(qū)別 ,可以用來控制是否顯示內容 ,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內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了解決在el-dialog中無法正確獲取DOM的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
使用Vue.js和MJML創(chuàng)建響應式電子郵件
這篇文章主要介紹了使用Vue.js和MJML創(chuàng)建響應式電子郵件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
最近翻閱了一下vue。發(fā)覺有一個單文件組件之前基本忽視掉了。所以本文就詳細的介紹了vue單文件組件的實現(xiàn)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
詳解.vue文件中監(jiān)聽input輸入事件（oninput）
本篇文章主要介紹了詳解.vue文件中監(jiān)聽input輸入事件（oninput），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了基于vue的短信驗證碼倒計時demo，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了vue js格式化數(shù)字為金額格式代碼，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Tree shaking 是一種通過清除多余代碼方式來優(yōu)化項目打包體積的技術,就是在保持代碼運行結果不變的前提下,去除無用的代碼,本文給大家介紹Vue 3.0中Treeshaking特性是什么,感興趣的朋友一起看看吧2023-10-10
本文主要介紹了vue-router后臺鑒權流程實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
vue的表單數(shù)據(jù)收集案例之基本指令和自定義指令詳解
收集表單數(shù)據(jù)可以使用這個v-model實現(xiàn)這個數(shù)據(jù)的綁定，但是在有些輸入框中，還需要一些其他的指令搭配這個v-model指令結合使用，這篇文章主要介紹了vue的表單數(shù)據(jù)收集，基本指令和自定義指令,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了element-ui封裝一個Table模板組件的示例，幫助大家更好的理解和學習vue框架的使用，感興趣的朋友可以了解下2021-01-01