收藏
批改狀態(tài)：合格
老師批語：
1）將vue.js正確引入到項(xiàng)目中。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue導(dǎo)入與實(shí)例化</title> </head> <body> <script src="js/vue.js"></script> <script> //控制臺中查看Vue實(shí)例,看到則表示Vue引入并實(shí)例化成功 console.log(new Vue()); </script> </body> </html>
點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
2）問答:什么是vue.js中的模型對象，本質(zhì)是什么，如果在實(shí)例中聲明的？
答：vue.js中的模型對象，本質(zhì)是javascrip的對象。聲明就是創(chuàng)建一個Vue實(shí)例:new Vue();
3）實(shí)例演示: v-text,v-html變量渲染時的區(qū)別；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>掛載點(diǎn)與變量顯示</title>
</head>
<body>
<!--創(chuàng)建一個掛載點(diǎn)-->
<div id="box">
<!--以插值的方式顯示內(nèi)容-->
{{message1}}
<!--使用模板指令v-text顯示一個變量-->
<p v-text="message1"></p>
<!--如果變量中有html標(biāo)簽-->
<!--v-text指定是將變量內(nèi)容原樣輸出,不會解析文本中的html標(biāo)簽-->
<p v-text="message2"></p>
<!--如果想顯示一個帶有html標(biāo)簽的字符串,需要用v-html指令:類似js中的innerHTML-->
<p v-html="message2"></p>
</div>
<script src="js/vue.js"></script>
<script>
// 創(chuàng)建Vue實(shí)例:用一個對象字面量做為參數(shù)
new Vue({
//綁定掛載點(diǎn)
el: '#box',
//data屬性: 創(chuàng)建數(shù)據(jù)模型:對應(yīng)MVVM設(shè)計(jì)模式中的Model層
data: {
//顯示一個變量
message1: 'Vue.js開發(fā)基礎(chǔ)',
//如果變量的內(nèi)容是一個有html標(biāo)簽的文本
message2: '<h3 style="color:red">php中文網(wǎng)</h3>'
}
});
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
4）屬性綁定v-bind和事件綁定v-on的使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模板,屬性與事件</title>
</head>
<body>
<div>
<!--創(chuàng)建一個掛載點(diǎn)-->
<div id="box">
<!--1.模板綁定-->
<!--<h3>《JavaScript權(quán)威指南》</h3>-->
<!--<h3>{{message}}</h3>-->
<!--模板除了可以寫在掛載點(diǎn)內(nèi),還可以寫到Vue實(shí)例的屬性中-->
<!--下面我們將h3中的內(nèi)容寫到Vue實(shí)例中-->
<!--2.屬性綁定-->
<!--可以給模板標(biāo)簽綁定屬性: v-bind -->
<!--之前是直接用標(biāo)簽寫列的-->
<h3 style="color:red;">{{message}}</h3>
<!--vue實(shí)例也可以接管模板的屬性,并實(shí)現(xiàn)綁定,使用v-bind指令-->
<!--<h3 v-bind:style="style">{{message}}</h3>-->
<!--屬性綁定是常用操作,Vue提供了簡寫指定: 冒號-->
<!--<h3 :style="style">{{message}}</h3>-->
<!--此時,:style的值"style"已經(jīng)不是一個普通字符串了,而是一個表達(dá)式,可以進(jìn)行運(yùn)算,例如字符串拼裝-->
<h3 :style="style + 'font-size:2rem;'">{{message}}</h3>
<!--3.事件綁定-->
<!--還可以給模板綁定事件: v-on:事件名稱="事件方法"-->
<!--事件對應(yīng)的方法必須寫到Vue實(shí)例中的methods屬性中,該屬性也是一個對象-->
<!-- <h3 v-on:click="showDesc">{{message}}</h3> -->
<!--由于給模板添加事件是常用操作,所以Vue提供了一個簡寫語法:@-->
<h3 @click="changeText">{{message}}</h3>
</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
// 綁定掛載點(diǎn)
el: '#box',
// 通過template屬性給掛載點(diǎn)添加模板,它的優(yōu)先級高于掛載點(diǎn)中的模板
// template: '<h3 style="color:red">《JavaScript權(quán)威指南》</h3>'
data: {
message: '《JavaScript權(quán)威指南》',
// 屬性綁定也是寫到data數(shù)據(jù)模型中
style: 'color: blue;'
},
methods: {
changeText: function () {
this.message = "《Vue.js權(quán)威指南》";
}
}
});
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
點(diǎn)擊最下的文字后顯示變成如下：
5）雙向數(shù)據(jù)綁定的原理與實(shí)現(xiàn): v-model指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雙向數(shù)據(jù)綁定</title>
</head>
<body>
<div id="box">
<!--input標(biāo)簽的特點(diǎn):即可顯示內(nèi)容,也可以輸入內(nèi)容/即更新內(nèi)容-->
<!--<input type="text">-->
<!--給input綁定一個屬性,與數(shù)據(jù)模型中的info也進(jìn)行綁定: v-bind:value="info"-->
<!--<input type="text" :value="info">-->
<!--現(xiàn)在我的需求是: 當(dāng)input中的內(nèi)容發(fā)生變化時,對應(yīng)的數(shù)據(jù)模型中的數(shù)據(jù)也會同步發(fā)生變化 -->
<!--顯然:v-bind指令無法完成,vue又提供一個v-model指令,可以實(shí)現(xiàn)模型中的數(shù)據(jù)隨頁面數(shù)據(jù)變化而變化-->
<input type="text" v-model="info">
<!--單向綁定: 頁面中的數(shù)據(jù)內(nèi)容由數(shù)據(jù)模型決定-->
<!--雙向綁定: 模型中的數(shù)據(jù)內(nèi)容由頁面中的數(shù)據(jù)決定-->
<h3>{{info}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#box',
// 數(shù)據(jù)模型
data: {
info: 'html'
}
})
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以上是初始的顯示，輸入文字后顯示如下：
6）觀察者/偵聽器的實(shí)現(xiàn)機(jī)制與實(shí)例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>偵聽器</title>
</head>
<body>
<div id="box">
用戶名:<input type="text" v-model="username"> <br>
<h3>{{length}}</h3>
<h3 v-show="isShow" :style="warning">{{message}}</h3>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#box',
data: {
username: '',
length: 0,
message: '用戶名太短',
isShow: false,
warning: 'color:red'
},
// 偵聽器:實(shí)時監(jiān)測頁面中數(shù)據(jù)的變化,實(shí)時更新數(shù)據(jù)模型中的屬性,并完成指定的動作
watch: {
// Vue是面向數(shù)據(jù)編程,偵聽器當(dāng)然也是面數(shù)據(jù),所以watch中偵聽的屬性必須是頁面中的變量
username: function () {
this.length++;
if (this.length < 6) {
this.isShow = true;
} else {
this.isShow = false;
}
}
}
});
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
以上是初始的顯示；
實(shí)時監(jiān)測輸入的字符數(shù)，小于6時顯示“用戶名太短”
用戶名的字符大于6則不顯示。
總結(jié)：vus.js是前端的新框架，需要多練習(xí)才能熟練運(yùn)用，剛剛?cè)肓藗€門。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號