vue小白入門教程
一、vue是什么
Vue 是一套用于構(gòu)建用戶界面的 漸進(jìn)式框架 。
壓縮后僅有17kb
二、vue環(huán)境搭建
你直接下載并用 <script> 標(biāo)簽引入， Vue 會被注冊為一個(gè)全局變量。
但在用 Vue 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝。
這里推薦一下是用淘寶的cnpm，非常的快
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后進(jìn)行安裝
# 全局安裝 vue-cli npm install --g vue-cli # 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目 vue init webpack my-project # 安裝依賴，走你 cd my-project npm run dev
三、第一個(gè)vue應(yīng)用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<div>{{title}}</div>
<button @click="say()">單擊事件</button></br>
<div>今年{{age}}</div>
<input v-model="age">
</div>
</body>
</html>
<script src="lib/vue.js"></script>
<script src="js/hello.js"></script>
var app = new Vue({ //通過構(gòu)造函數(shù)Vue就可以創(chuàng)建一個(gè)Vue的根實(shí)例，并啟動(dòng)Vue應(yīng)用
el: '#app', //指定頁面上一個(gè)已經(jīng)存在的DOM元素來掛載Vue實(shí)例
data: { //對象的數(shù)據(jù)
title: 'hello vue', //通過插值語法{{}}綁定
age: 22 //通過v-model進(jìn)行雙向數(shù)據(jù)綁定
},
methods: { //對象的方法
say: function(){
console.log(this.title);
}
},
watch: { //監(jiān)聽數(shù)據(jù)的變化
'age': function(newVal, oldVal){
console.log(newVal, oldVal);
}
}
});
四、Vue生命周期
每個(gè)Vue 實(shí)例創(chuàng)建時(shí)，都會經(jīng)歷一系列的初始化過程，同時(shí)也會調(diào)用相應(yīng)的生命周期鉤子，我們可以利用這些鉤子，在合適的時(shí)機(jī)執(zhí)行我們的業(yè)務(wù)邏輯。
大體上的生命周期就是：創(chuàng)建（created)---掛載(mounted)---銷毀(destroy)
Vue 的生命周期鉤子比較常用的有：
• created 實(shí)例創(chuàng)建完成后調(diào)用，此階段完成了數(shù)據(jù)的觀測等， 但尚未掛載， $el 還不可用。 需要初始化處理一些數(shù)據(jù)時(shí)會比較有用．
• mounted el 掛載到實(shí)例上后調(diào)用， 一般我們的第一個(gè)業(yè)務(wù)邏輯會在這里開始。
• beforeDestroy 實(shí)例銷毀之前調(diào)用。 主要解綁一些使用addEventListener 監(jiān)聽的事件等。
var app =new Vue({
el: '# app',
data: {
a: 2
} ,
created: function () {
console.log(this.a); //2
},
mounted: function () {
console.log(this.el); //<div id =”app”></div>
}
});
完整的一個(gè)生命周期圖：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3+ts重復(fù)參數(shù)提取成方法多處調(diào)用以及字段無值時(shí)不傳字段給后端問題
在進(jìn)行API開發(fā)時(shí),優(yōu)化參數(shù)傳遞是一個(gè)重要的考量,傳統(tǒng)方法中,即使參數(shù)值為空,也會被包含在請求中發(fā)送給后端,這可能會導(dǎo)致不必要的數(shù)據(jù)處理,而優(yōu)化后的方法則只會傳遞那些實(shí)際有值的字段,從而提高數(shù)據(jù)傳輸?shù)挠行院秃蠖颂幚淼男?/div> 2024-10-10
vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)全匹配搜索列表內(nèi)容，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-09-09
我們所熟知的Vue.js也在如何提取公共代碼復(fù)用方面也一直在探索優(yōu)化，本文小編就來和各位聊聊Vue.js代碼復(fù)用的前世今生，希望對大家學(xué)習(xí)Vue有一定的幫助2023-05-05
vue中computed和watch的使用實(shí)例代碼解析
這篇文章主要介紹了vue中computed和watch的綜合運(yùn)用實(shí)例,主要需求是點(diǎn)擊按鈕實(shí)現(xiàn)天氣的切換效果結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-04-04
Vue動(dòng)態(tài)改變css樣式的3種方法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue動(dòng)態(tài)改變css樣式的3種方法,在Vue.js中我們經(jīng)常需要根據(jù)特定的條件或事件來動(dòng)態(tài)地修改CSS樣式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
在Vue.js中,組件間的通信是構(gòu)建復(fù)雜應(yīng)用的關(guān)鍵,但當(dāng)涉及到非父子關(guān)系的組件通信時(shí),傳統(tǒng)的做法就顯得力不從心了,本文將深入探討幾種有效的非父子組件通信方法,并通過具體的代碼示例來幫助讀者理解和應(yīng)用這些技術(shù),需要的朋友可以參考下2024-09-09
Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法
這篇文章主要介紹了Vue3 去除 vue warn 及生產(chǎn)環(huán)境去除console.log的方法，本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-06-06
vue3+js+elementPlus使用富文本編輯器@vueup/vue-quill詳細(xì)教程
富文本編輯器在任何項(xiàng)目中都會用到,下面這篇文章主要給大家介紹了關(guān)于vue3+js+elementPlus使用富文本編輯器@vueup/vue-quill的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
這篇文章主要介紹了elementui中使用el-tree控件懶加載和局部刷新，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
Vuex持久化插件(vuex-persistedstate)解決刷新數(shù)據(jù)消失的問題
這篇文章主要介紹了Vuex持久化插件(vuex-persistedstate)-解決刷新數(shù)據(jù)消失的問題，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04最新評論