溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
一、vue是什么
Vue 是一套用于構建用戶界面的 漸進式框架 。
壓縮后僅有17kb
二、vue環境搭建
你直接下載并用 <script> 標簽引入， Vue 會被注冊為一個全局變量。
但在用 Vue 構建大型應用時推薦使用 NPM 安裝。
這里推薦一下是用淘寶的cnpm，非常的快
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后進行安裝
# 全局安裝 vue-cli npm install --g vue-cli # 創建一個基于 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({ //通過構造函數Vue就可以創建一個Vue的根實例，并啟動Vue應用
el: '#app', //指定頁面上一個已經存在的DOM元素來掛載Vue實例
data: { //對象的數據
title: 'hello vue', //通過插值語法{{}}綁定
age: 22 //通過v-model進行雙向數據綁定
},
methods: { //對象的方法
say: function(){
console.log(this.title);
}
},
watch: { //監聽數據的變化
'age': function(newVal, oldVal){
console.log(newVal, oldVal);
}
}
});
四、Vue生命周期
每個Vue 實例創建時，都會經歷一系列的初始化過程，同時也會調用相應的生命周期鉤子，我們可以利用這些鉤子，在合適的時機執行我們的業務邏輯。
大體上的生命周期就是：創建（created)---掛載(mounted)---銷毀(destroy)
Vue 的生命周期鉤子比較常用的有：
• created 實例創建完成后調用，此階段完成了數據的觀測等， 但尚未掛載， $el 還不可用。 需要初始化處理一些數據時會比較有用．
• mounted el 掛載到實例上后調用， 一般我們的第一個業務邏輯會在這里開始。
• beforeDestroy 實例銷毀之前調用。 主要解綁一些使用addEventListener 監聽的事件等。
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>
}
});
完整的一個生命周期圖：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
