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