vue小白入門教程

更新時間：2018年04月02日 08:29:36 作者：柴小智

vue是一套用于構(gòu)建用戶界面的漸進式框架，本文通過實例給大家介紹了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è)務(wù)邏輯。

大體上的生命周期就是：創(chuàng)建（created)---掛載(mounted)---銷毀(destroy)

Vue 的生命周期鉤子比較常用的有：

• created 實例創(chuàng)建完成后調(diào)用，此階段完成了數(shù)據(jù)的觀測等，但尚未掛載， $el 還不可用。需要初始化處理一些數(shù)據(jù)時會比較有用．

• mounted el 掛載到實例上后調(diào)用，一般我們的第一個業(yè)務(wù)邏輯會在這里開始。

• 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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue快速入門

相關(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)容
這篇文章主要為大家詳細介紹了vue實現(xiàn)全匹配搜索列表內(nèi)容，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
4種方案帶你探索Vue代碼復用的前世今生
我們所熟知的Vue.js也在如何提取公共代碼復用方面也一直在探索優(yōu)化，本文小編就來和各位聊聊Vue.js代碼復用的前世今生，希望對大家學習Vue有一定的幫助
2023-05-05
vue中computed和watch的使用實例代碼解析
這篇文章主要介紹了vue中computed和watch的綜合運用實例,主要需求是點擊按鈕實現(xiàn)天氣的切換效果結(jié)合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下
2022-04-04
Vue動態(tài)改變css樣式的3種方法總結(jié)
這篇文章主要給大家介紹了關(guān)于Vue動態(tài)改變css樣式的3種方法,在Vue.js中我們經(jīng)常需要根據(jù)特定的條件或事件來動態(tài)地修改CSS樣式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2023-11-11
Vue中非父子組件通信的方法小結(jié)
在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控件懶加載和局部刷新
這篇文章主要介紹了elementui中使用el-tree控件懶加載和局部刷新，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vuex持久化插件(vuex-persistedstate)解決刷新數(shù)據(jù)消失的問題
這篇文章主要介紹了Vuex持久化插件(vuex-persistedstate)-解決刷新數(shù)據(jù)消失的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04