Vue組件與Vue cli腳手架安裝方法超詳細(xì)講解
計(jì)算屬性
計(jì)算屬性關(guān)鍵字：computed
每次頁面刷新都會重新加載數(shù)據(jù)，而我們有時候退出頁面再返回頁面后希望保持原來選擇商品的價格總價，這是就可以運(yùn)用到計(jì)算屬性：只有涉及到計(jì)算屬性中使用的變量發(fā)生變化它才會重新運(yùn)算
<body>
<div id="app">
<input type="text" v-model="name"> ---》》 {{handleUpper()}}
<hr>
<input type="text" v-model="name2">--->{{upper}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '',
name2: ''
},
methods: {
handleUpper() {
// 只要頁面刷新就會變化
console.log('我執(zhí)行了')
}
},
computed: {
upper() {
console.log('我執(zhí)行了計(jì)算屬性')
}
}
})
</script>
</html>監(jiān)聽屬性
監(jiān)聽屬性關(guān)鍵字：watch
當(dāng)監(jiān)聽的屬性發(fā)生變化時，會自動調(diào)用回調(diào)函數(shù)執(zhí)行相關(guān)操作
<body>
<div id="app">
<span> <button @click="type='人文'">人文</button>|<button @click="type='社科'">社科</button>|<button
@click="type='地理'">地理</button></span>
<br>
{{type}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
type: '人文',
},
watch: {
type(val) {
console.log('向后端加載數(shù)據(jù)了')
}
}
})
</script>
</html>組件介紹和定義
組件的介紹
為了提高代碼的可重用性，減少代碼的重復(fù)開發(fā)，我們可以把代碼封裝到一個自定義標(biāo)簽內(nèi)。以.vue結(jié)尾的文件一般由三部分組成：template、script、style
- 組件導(dǎo)出：export default{}
- 組件導(dǎo)入：import Hello World from“./components/HelloWorld.vue”
組件定義
- 全局組件：全局可以使用，可以用在任意其它組件中
<div id="app">
<h1>全局組件</h1>
<child></child>
</div>
</body>
<script>
// 1 定義全局組件 (必須在一個標(biāo)簽)，組件有自己的數(shù)據(jù)，方法，生周期.....
var obj = {
template: `
<div>
<button>后退</button>
{{ title }}
<button @click="handleClick">前進(jìn)</button>
</div>`,
data() {
return {
title: '標(biāo)題'
}
},
methods: {
handleClick() {
alert('前進(jìn)')
}
},
}
Vue.component('child', obj)
</script>- 局部組件：局部組件只能在定義的位置(組件中)使用
<body>
<div id="app">
<h1>局部組件</h1>
<part></part>
<hr>
</div>
</body>
<script>
var part = {
template: `
<div>
<h1>我是part組件</h1>
{{ name }}
<child3></child3>
</div>`,
data() {
return {
name: 'part'
}
},
components: {
'child3': {
template: `
<div>
<h2>我是lqz組件內(nèi)的組件</h2>
</div>`,
}
}
}
var vm = new Vue({
el: '#app',
data: {},
components: {
part
}
})
</script>父子通信
父傳子
父子組件可以理解為組件中再嵌套一個組件，他們的定義和普通組件是一樣的只是多了一個嵌套；父組件中需要聲明子組件，引入子組件對象
ps：無論是哪種類型的組件每個組件都相當(dāng)于一個完整的vue實(shí)例，組件與組件之間的數(shù)據(jù)是不互通的
- 子組件使用父組件數(shù)據(jù)關(guān)鍵字：props
<div id="app">
<h1>自定義事件實(shí)現(xiàn)父子通信之子傳父</h1>
父組件中的name值為：{{name}}
<hr>
<lqz @myevnet="handleEvent"></lqz>
<hr>
</div>
</body>
<script>
var child= {
template: `
<div>
<h1>我是a組件</h1>
<input type="text" v-model="name"> ---》{{ name }}
<br>
<button @click="handleSend">點(diǎn)我把name傳給父組件</button>
</div>`,
data() {
return {
name: ''
}
},
methods: {
handleSend() {
// alert('我被點(diǎn)了')
// 在這里，觸發(fā)自定義事件的執(zhí)行
this.$emit('myevnet', this.name)
}
}
}
var vm = new Vue({
el: '#app',
data: {
name: '大帥哥'
},
methods: {
handleEvent(name) {
this.name = name
}
},
components: {
child
}
})
</script>子傳父
- 子組件向父組件傳遞必須通過自定義事件來完成
<div id="app">
<!--子組件中監(jiān)聽自定義事件，隨便起名-->
<navbar @myevent="handleClick($event)"></navbar>
</div>
</body>
<script>
Vue.component('navbar', {
template: `
<div>
<button>返回</button>
組件
<button @click="handleEvent">點(diǎn)擊按鈕把子組件數(shù)據(jù)傳遞到父組件</button>
<br>
</div>
`,
data(){
return {
name:'abc'
}
},
methods:{
handleEvent(){
// this.$emit('myevent') //myevent:子組件中監(jiān)聽自定義事件
this.$emit('myevent',100) //100表示傳遞的參數(shù)
}
}
})
var vm = new Vue({
el: '#box',
data: {},
methods:{
handleClick(ev){
console.log('點(diǎn)擊子組件，我會執(zhí)行')
console.log(ev)
}
}
})
</script>ref屬性
可以放在普通標(biāo)簽上，通過this.$refs.自定義的名字取到的是 原生的dom對象
- 使用原生dom操作了(不推薦)
可以放在組件上：通過this.$refs.自定義的名字取到的是 vc對象(組件對象)，
可以之間使用組件對象上的方法和屬性---》子的數(shù)據(jù)給了父親
- 父組件有個方法執(zhí)行，需要傳參數(shù)，傳入子組件的數(shù)據(jù)---》子的數(shù)據(jù)給了父親
- 拿到子對象之間使用父中的數(shù)據(jù)修改----》父傳子
<body>
<div id="app">
<h1>ref屬性放在普通標(biāo)簽上</h1>
<input type="text" ref="myinput" v-model="name">====>{{name}}
<br>
<button @click="handlePrint">點(diǎn)我，打印點(diǎn)東西</button>
<hr>
</div>
</body>
<script>
var abc = {
template: `
<div>
<button>后退</button>
首頁--{{ age }}---{{ show }}
<button @click="handleQJ('大帥哥')">前進(jìn)</button>
</div>`,
data() {
return {
show: true,
age: 19
}
},
methods: {
handleQJ(name) {
alert(name)
}
}
}
var vm = new Vue({
el: '#app',
data: {
name: '大美女'
},
methods: {
handlePrint() {
//this.$refs.myinput 原生dom對象
// this.$refs.myinput.value='xxxxxx'
console.log(this.$refs)
// this.$refs.mylqz.age=999
// this.$refs.mylqz.show = false
// this.$refs.mylqz.handleQJ()
// this.name=this.$refs.mylqz.age
this.$refs.mylqz.handleQJ(this.name)
}
},
components: {
abc
}
})
</script>動態(tài)組件
點(diǎn)擊不同的標(biāo)簽展示不同的組件
<body>
<div id="app">
<div>
<span @click="type='home'">首頁</span>|
<span @click="type='goods'">商品</span>|
<span @click="type='order'">訂單</span>
</div>
<div>
<component :is="type"></component>
</div>
</div>
</body>
<script>
// 1 定義三個全局組件
Vue.component('home', {
template: `
<div>
<h1>首頁</h1>
</div>`,
})
Vue.component('goods', {
template: `
<div>
<h1>商品</h1>
</div>`,
})
Vue.component('order', {
template: `
<div>
<h1>訂單</h1>
</div>`,
})
var vm = new Vue({
el: '#app',
data: {
type: 'home'
},
})
</script>插槽
簡單理解就是組件內(nèi)部留一個或多個的插槽位置，可供組件傳對應(yīng)的模板代碼進(jìn)去。插槽的出現(xiàn)，讓組件變的更加靈活
<body>
<div id="app">
<h1>插槽的使用</h1>
<home>
<img src="美女.jpg" width="200px" height="200px">
</home>
<hr>
<home>
<div>我是div</div>
</home>
<hr>
<goods>
<div slot="bottom">
我是底部
</div>
<a href="" slot=" rel="external nofollow" top">點(diǎn)我看美女</a>
</goods>
</div>
</body>
<script>
// 1 定義三個全局組件
Vue.component('home', {
template: `
<div>
<button>后退</button>
<span>首頁</span>
<button>前進(jìn)</button>
<hr>
<slot></slot>
</div>`,
})
Vue.component('goods', {
template: `
<div>
<slot name="top"></slot>
<hr>
<button>后退</button>
<span>首頁</span>
<button>前進(jìn)</button>
<hr>
<slot name="bottom"></slot>
</div>`,
})
var vm = new Vue({
el: '#app',
data: {
type: 'home'
},
})
</script>vue-cli
Vue-cli是vue官方出品的快速構(gòu)建單頁應(yīng)用的腳手架，能快速的幫我們創(chuàng)建出vue2和vue3項(xiàng)目------->>>目前新一代構(gòu)建工具：Vite創(chuàng)建vue3項(xiàng)目推薦使用ts寫
第一步先安裝nodejs后端語言
- 官網(wǎng)：https://nodejs.org/zh-cn/download/
- 安裝完釋放兩個命令：node、npm等同于python3和pip
- npm下載得去國外速度慢可以直接取淘寶鏡像站下載cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
第二步安裝vue-cli
- 安裝成功會多出一個可執(zhí)行文件 vue
cnpm install -g @vue/cli
- 創(chuàng)建vue項(xiàng)目
vue create 項(xiàng)目名
第三步ide的選擇
- vscode、webstorm：跟pycharm同公司使用比較友好
第四步安裝axios
- 選擇自定義：Manually select features
- 通過上下鍵選擇空格選中或取消：Babel、Router、Vuex其它都不要選
- 選擇版本號：3.x、2.x
- 選擇In package.json來做包管理
到此這篇關(guān)于Vue組件與Vue cli腳手架安裝方法超詳細(xì)講解的文章就介紹到這了,更多相關(guān)Vue組件 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue3?封裝?Element?Plus?Menu?無限級菜單組件功能的詳細(xì)代碼
本文分別使用?SFC（模板方式）和?tsx?方式對?Element?Plus?*el-menu*?組件進(jìn)行二次封裝，實(shí)現(xiàn)配置化的菜單，有了配置化的菜單，后續(xù)便可以根據(jù)路由動態(tài)渲染菜單，對Vue3?無限級菜單組件相關(guān)知識感興趣的朋友一起看看吧2022-09-09
這篇文章主要介紹了詳解Vue中Axios封裝API接口的思路及方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
Vue使用ElemenUI對table的指定列進(jìn)行合算的方法
這篇文章主要介紹了Vue使用ElemenUI對table的指定列進(jìn)行合算的方法,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-03-03
vue實(shí)現(xiàn)圖片下載點(diǎn)擊按鈕彈出本地窗口選擇自定義保存路徑功能
vue前端實(shí)現(xiàn)前端下載,并實(shí)現(xiàn)點(diǎn)擊按鈕彈出本地窗口,選擇自定義保存路徑,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue滑動解鎖組件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
關(guān)于vue-treeselect綁值、回顯等常見問題的總結(jié)
這篇文章主要介紹了關(guān)于vue-treeselect綁值、回顯等常見問題的總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
vue組件 $children,$refs，$parent的使用詳解
本篇文章主要介紹了vue組件 $children,$refs，$parent的使用詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
vue服務(wù)端渲染頁面緩存和組件緩存的實(shí)例詳解
本篇文章給大家?guī)淼膬?nèi)容是關(guān)于vue服務(wù)端渲染頁面緩存和組件緩存的介紹（代碼），有一定的參考價值，有需要的朋友可以參考一下2018-09-09
Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)
本文主要介紹了Element中el-select下拉框?qū)崿F(xiàn)選中圖標(biāo)并回顯圖標(biāo)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
Vue3+elementui plus創(chuàng)建項(xiàng)目的方法
這篇文章主要介紹了Vue3+elementui plus創(chuàng)建項(xiàng)目的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12