Vue入門
簡述
摘自百度百科
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計爲可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支持類庫結合使用時，Vue 也完全能夠爲複雜的單頁應用提供驅動
MVVM模式
以前的MVC爲
Model層—View層—Controller層
MVVM層分爲
Model層----View層----ViewModel
Model：它是與應用程序的業務邏輯相關的數據的封裝載體，它是業務領域的對象，Model並不關心會被如何顯示或操作，所以模型也不會包含任何界面顯示相關的邏輯。在web頁面中，大部分Model都是來自Ajax的服務端返回數據或者是全局的配置對象。
View：它專注於界面的顯示和渲染，在Vue中則是包含一堆聲明式Directive和Component的視圖模板。
ViewModel：它是View和Model的粘合體，負責View和Model的交互和協作，它負責給View提供顯示的數據，以及提供了View中Command事件操作Model的途徑；在vue中“Vue對象實例”充當了這個ViewModel的角色；
安裝
首先安裝Node.js
Node.js安裝很簡單
Node.js地址 直接下載傻瓜式安裝即可
然後創建好項目，以本人的Java項目爲例
在終端裏使用命令
npm install vue
這樣就在此次項目中安裝好了vue
也可以進行全局安裝 npm install vue -g
ECMAScript6語法
常用語法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ES6語法</title>
<script>
for (var i = 0; i < 5; i++) {
/*console.log(i);*/
}
/*console.log("讓我康康i有沒有值"+i);*/
/* 塊級元素let 相當於局部變量*/
for (let j=0;j<5;j++){
/*console.log(j);*/
}
/*console.log("讓我康康i有沒有值"+j);*/
/* const代表常量*/
/*const s = 5;
s = 78; //報錯，因爲const定義後就爲常量*/
/* 解構表達式 */
/* 數組解構 */
let arr = [15,56,69];
const [a1,a2,a3] = arr;
console.log(a1,a2,a3);
/* 對象解構 */
let ars = {'name':'不想說',age:18}
let {name,age} = ars;
console.log(name,age);
/* 箭頭函數 */
let product = {
name:'最愛',
eat:function (food) {
alert(this.name+"喫"+food);
},
//箭頭函數
eat1:food=>alert(this.name+"喫"+food),
//簡寫
eat2(food){
alert(this.name+"喫"+food);
}
}
/*product.eat('漢堡');
product.eat1('漢堡');
product.eat2('漢堡');*/
/* 箭頭表達式 + 解構表達式 */
const person = {
name:'山泥若',
age:25,
speak:['疼癢集團','火焰鼠','喂喂喂']
}
function hello(person) {
alert(person.name+"是"+person.speak[0])
}
var hi = ({name,speak}) => alert(name+"是"+speak[0]);
hi(person);
/* Promise對象 */
/* Promise是異步編程的一種解決方案，比傳統的解決方案（回調函數+事件）更加合理和強大 */
const p = new Promise((resolve, reject) => {
//模擬定時任務的異步
setTimeout(()=>{
const num = Math.random();
//隨機返回成功或者失敗
if (num<0.5){
resolve('成功!'+num)
}else {
reject('失敗!'+num)
}
},300)
});
//成功後調用
p.then(function (msg) {
alert(msg);
}).catch(function (msg) {
//失敗後調用
alert(msg);
})
</script>
</head>
<body>
</body>
</html>
Vue常用語法
數據綁定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="con">
{{msg}}
</div>
<div class="con1">
{{user}}
{{user.name}}
{{user.age}}
{{user.red}}
</div>
<script>
var app = new Vue({
el:"#con",
data:{
msg:'你看什麼看？'
}
});
var app1 = new Vue({
el:'.con1',
data: {
user:{
name:'山泥若',
age:25,
color:'red'
}
}
});
</script>
</body>
</html>
數據雙向綁定
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Hello Vue</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="con">
<input type="text" v-model="message" v-on:change="changeData">
</div>
<script>
var vue = new Vue({
el:'#con',
data:{
message:'山泥若是大惡人'
},
methods:{
changeData(){
this.message='山泥若biss';
}
}
});
</script>
</body>
</html>
Vue表達式
一般表達式都是寫在{{}}
語法:{{表達式}}
例如：{{5+5}}
Vue指令
v-text指令：
<標籤名 v-text="表達式"></標籤名>
v-html指令：
<標籤名 v-html="表達式"></標籤名>
v-for指令：
<標籤 v-for="元素 in 數據源"></標籤>
v-bind指令：
<標籤 v-bind:標籤屬性名字="表達式"></標籤>
v-model指令：
<標籤 v-model="表達式"></標籤>
v-show指令：
<標籤名 v-show="表達式"></標籤名>
v-if指令：
<標籤名 v-if="表達式"></標籤名>
v-else指令：
<標籤名 v-if="表達式"></標籤名>
<標籤名 v-else></標籤名>
v-else-if指令：
<標籤名 v-if="表達式"></標籤名>
<標籤名 v-else-if="表達式"></標籤名>
<標籤名 v-else-if="表達式"></標籤名>
<標籤名 v-else></標籤名>