溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“怎么搭建vue開(kāi)發(fā)環(huán)境”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么搭建vue開(kāi)發(fā)環(huán)境”吧！
初始Vue
搭建Vue開(kāi)發(fā)環(huán)境
創(chuàng)建Vue實(shí)例
Vue模板語(yǔ)法
Vue數(shù)據(jù)綁定
el-data的兩種寫(xiě)法
MVVM模型
Vue數(shù)據(jù)代理
Vue中的事件處理
Vue官網(wǎng)：https://cn.vuejs.org
什么是Vue？
一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架
Vue可以自底向上逐層的應(yīng)用
簡(jiǎn)單應(yīng)用：只需要一個(gè)輕量小巧的核心庫(kù)
復(fù)雜使用：可以引入各式各樣的Vue插件
Vue的特點(diǎn)：
1、組件化模式，提高代碼復(fù)用率，更好維護(hù)代碼
2、聲明式編碼：無(wú)需直接操作DOM，提高開(kāi)發(fā)效率
3、使用虛擬DOM+Diff算法，復(fù)用DOM節(jié)點(diǎn)
1、下載vue.js
2、創(chuàng)建項(xiàng)目并導(dǎo)入idea
3、官網(wǎng)下載：https://github.com/vuejs/devtools/tree/main
并使用Vue.js devtools
注：在此之后你打開(kāi)的網(wǎng)頁(yè)如果是有Vue寫(xiě)的，那頭部的Vue小標(biāo)識(shí)會(huì)變成綠色
以上Vue環(huán)境就搭建ok啦
1、想讓Vue工作,就必須創(chuàng)建一個(gè)Vue實(shí)例 且要傳入一個(gè)配置對(duì)象
2、root容器里的代碼依然符合html規(guī)范 只不過(guò)混入了一些特殊的Vue的語(yǔ)法
3、root容器里的代碼被稱為[Vue模板]
4、Vue實(shí)例和容器是一一對(duì)應(yīng)的
5、真實(shí)開(kāi)發(fā)中只有一個(gè)vue實(shí)例,并且會(huì)配合著組件一起使用
6、{{xxx}}中的xxx要寫(xiě)js表達(dá)式,且xxx可以自動(dòng)讀取到data中的所有屬性
7、一旦data中的數(shù)據(jù)發(fā)生改變,那么頁(yè)面中用到該數(shù)據(jù)的地方也會(huì)自動(dòng)更換
注意區(qū)分js表達(dá)式和js代碼
1、表達(dá)式:一個(gè)表達(dá)式會(huì)生成一個(gè)值 可以放在任何一個(gè)需要值的地方
(1)a (2)a+b (3)demo(1) (4)x===y?‘a(chǎn)':‘b'
2、js代碼(語(yǔ)句)
(1)if(){} (2)for(){}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始Vue</title>
<!--引入Vue開(kāi)發(fā)版-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--準(zhǔn)備容器 為Vue提供模板 把Vue的成果展示-->
<div id="root">
<!--{{js表達(dá)式}} 插值語(yǔ)法-->
<h2>Hello!{{name.toUpperCase()}},{{address}}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。
//創(chuàng)建vue實(shí)例
new Vue({
//el用于當(dāng)前Vue實(shí)例為哪個(gè)容器服務(wù) 值通常為css選擇器字符串
el:'#root',
//data中用于存儲(chǔ)數(shù)據(jù) 數(shù)據(jù)供el所指定的容器去使用,值暫時(shí)寫(xiě)成一個(gè)對(duì)象.
data:{
name:"南風(fēng)知我意",
address:"上海"
}
})
</script>
</body>
</html>運(yùn)行結(jié)果：
Vue模板語(yǔ)法有兩大類(lèi)
1、插值語(yǔ)法:
功能:用于解析標(biāo)簽體內(nèi)容
寫(xiě)法:{{xxx}},xxx是js表達(dá)式,且可以直接讀取到data中的所有屬性
2、指令語(yǔ)法:
功能:用于解析標(biāo)簽(包括:標(biāo)簽屬性、標(biāo)簽體內(nèi)容、綁定事件…)
舉例:v-bind:href=“xxx” 或 簡(jiǎn)寫(xiě)為 :href=“xxx”,xxx同樣要寫(xiě)js表達(dá)式
且可以直接讀取data中的所有屬性
備注:Vue中有很多指令,且形式都是:v-???,此處我們只是拿v-bind舉例
<!--準(zhǔn)備容器-->
<div id="root">
<h2>插值語(yǔ)法</h2>
<h4>你好,{{name}}</h4>
<hr/>
<h2>指令語(yǔ)法</h2>
<!--綁定 url當(dāng)作表達(dá)式-->
<a v-bind:href="school.url.toUpperCase()" x="hello">去{{school.name}}</a>
<a :href="url" x="hello">去{{name2}}</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。
new Vue({
el:'#root',
data:{
name:'南風(fēng)知我意',
school:{
name: 'csdn',
url:'https://blog.csdn.net/weixin_50823456?spm=1000.2115.3001.5343',
}
}
})
</script>運(yùn)行結(jié)果：
Vue中有2種數(shù)據(jù)綁定的方式:
1、單向綁定( v-bind):數(shù)據(jù)只能data流向頁(yè)面
2、雙向綁定( v-model):數(shù)據(jù)不僅能從data流向頁(yè)面 還可以從頁(yè)面流向data
備注:
1、雙向綁定一般都應(yīng)用在表單元素上(如:input、select等)
2、 v-model:value可以簡(jiǎn)寫(xiě)為 v-model,因?yàn)?v-model的默認(rèn)收集的就是value值
<!--準(zhǔn)備一個(gè)容器-->
<div id="root">
<!--普通寫(xiě)法-->
<!-- 單向數(shù)據(jù)綁定:<input type="text" v-bind:value="name"><br>
雙向數(shù)據(jù)綁定:<input type="text" v-model:value="name"><br>-->
<!--簡(jiǎn)寫(xiě)-->
單向數(shù)據(jù)綁定:<input type="text" :value="name"><br>
雙向數(shù)據(jù)綁定:<input type="text" v-model="name"><br>
<!--如下代碼 錯(cuò)誤: v-model只能應(yīng)用在表單類(lèi)元素(輸入類(lèi)元素)上-->
<h3 v-model:x="name">你好啊</h3>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
name:'南風(fēng)知我意'
}
})
</script>運(yùn)行結(jié)果：
data與el的兩種寫(xiě)法
1、el有2種寫(xiě)法
(1)new Vue時(shí)候配置el屬性
(2)先創(chuàng)建Vue實(shí)例,隨后再通過(guò)vm.$mount('#root')指定el的值
2、data有2種寫(xiě)法
(1)對(duì)象式
(2)函數(shù)式
如何選擇:目前哪種寫(xiě)法都可以,以后學(xué)習(xí)到組件時(shí),data必須使用函數(shù)式,否則會(huì)報(bào)錯(cuò)
3、一個(gè)重要原則
由Vue管理的函數(shù),一定不要寫(xiě)箭頭函數(shù),一旦寫(xiě)了箭頭函數(shù) this就不再是Vue實(shí)例了
<!--準(zhǔn)備容器-->
<div id="root">
<h2>你好,{{name}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false
//el的兩種寫(xiě)法
const v=new Vue({
//el:'#root', //第一種寫(xiě)法
data:{
name:'尚硅谷'
}
})
console.log(v)
v.$mount('#root') //第二種寫(xiě)法
//data的兩種寫(xiě)法
const v=new Vue({
el:'#root',
//data的第一種寫(xiě)法 對(duì)象式
/*data:{
name:'尚硅谷'
}*/
//data的第二種寫(xiě)法:函數(shù)式
data(){
console.log('@@@',this) //此處的this是Vue實(shí)例對(duì)象
return{
name:'南風(fēng)知我意'
}
}
})
</script>1、M:模型(Model):data中的數(shù)據(jù)
2、V:視圖(View):模板代碼
3、VM:視圖模型(ViewModel):Vue實(shí)例
觀察發(fā)現(xiàn):
1、data中的所有屬性 在最后都出現(xiàn)在了vm身上
2、vm身上所有的屬性及Vue原型上的所有屬性,在Vue模板中都可以直接使用
<!--準(zhǔn)備容器-->
<div id="root">
<!--view-->
<h2>學(xué)校名稱:{{name}}</h2>
<h2>學(xué)校地址:{{address}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false
const vm=new Vue({ //viewmodel
el:'#root',
data:{
/*model*/
name:'南風(fēng)',
address:'長(zhǎng)沙'
}
})
console.log(vm)
</script>通過(guò)一個(gè)對(duì)象代理對(duì)另一個(gè)對(duì)象中屬性的操作(讀、寫(xiě))
1、Vue中的數(shù)據(jù)代理:
通過(guò)vm對(duì)象來(lái)代理data對(duì)象中的屬性的操作(讀、寫(xiě))
2、Vue中數(shù)據(jù)代理的好處
更加方便的操作data中的數(shù)據(jù)
3、基本原理
通過(guò)Object.defineProperty()把data對(duì)象中所有的屬性添加到vm上
為每一個(gè)添加到vm上的屬性 都指定一個(gè)getter、setter
在getter、setter內(nèi)部去操作(讀、寫(xiě))data中對(duì)應(yīng)的屬性
<!--準(zhǔn)備容器-->
<div id="root">
<!--view-->
<h2>學(xué)校名稱:{{name}}</h2>
<h2>學(xué)校地址:{{address}}</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false //阻止Vue在啟動(dòng)時(shí)生成生產(chǎn)提示
const vm=new Vue({
el:'#root',
data:{
name:'南風(fēng)',
address:'長(zhǎng)沙'
}
})
</script>事件的基本使用:
1、使用v-on:xxx 或 @xxx綁定事件 其中xxx是事件名
2、事件的回調(diào)需要配置在methods對(duì)象中,最終會(huì)在vm上
3、methods中配置的函數(shù),不需要箭頭函數(shù) 否則this就不是vm了
4、methods中配置的函數(shù),都是被Vue所管理的函數(shù),this的指向是vm或組件實(shí)例對(duì)象
5、@click="demo"和@click="demo($event)"效果一致,但后者可以傳參
<!--準(zhǔn)備容器-->
<div id="root">
<h2>歡迎來(lái)到尚硅谷學(xué)習(xí)</h2>
<!--<button v-on:click="showInfo">點(diǎn)我提示信息</button>-->
<button @click="showInfo1">點(diǎn)我提示信息1</button>
<button @click="showInfo2(66,$event)">點(diǎn)我提示信息2</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false //阻止Vue在啟動(dòng)時(shí)生成生產(chǎn)提示
new Vue({
el:'#root',
data: {
name: '尚硅谷'
},
methods:{
showInfo1(event){
/* console.log(event.target.innerHTML)
console.log(this) //此處的this是vm*/
alert("同學(xué)你好1")
},
showInfo2(number,a){
/* console.log(event.target.innerHTML)
console.log(this) //此處的this是vm*/
alert("同學(xué)你好2")
console.log(number,a)
}
}
})
</script>
感謝各位的閱讀，以上就是“怎么搭建vue開(kāi)發(fā)環(huán)境”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么搭建vue開(kāi)發(fā)環(huán)境這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼