目錄
Vue是啥
Vue.js是一個用來開發Web介面的前端庫，非常輕量級，只需要關注於data的變化，使程式碼變得更加容易維護。
說人話就是，從此不再有所謂的jQuery的html程式碼拼接，讓渲染html像德芙一樣縱享絲滑，比rain還潤！
其實前後端渲染各有各的好處
- 前端渲染優點
- 業務分離，後端只需要提供資料介面，前端在開發時也不需要部署對應的後端環境，通過一些代理伺服器工具就能獲取後端資料進行開發，提升開發效率
- 計算量轉移，原本後端渲染的任務轉移到了前端
- 後端渲染優點
- 對搜尋引擎友好
- 首頁載入時間短，後端渲染載入完成直接顯示HTML，前端載入完成後還有段js的渲染
一、安裝
直接下載像引用jQuery一樣引入即可
我是這樣引入 的
<script src="./vue.js"></script>
helloworld示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="../vue.js"></script>
<title>第一個vue程式</title>
</head>
<body>
<div id="app">
<h1>{{cqh}}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'hello world',
}
})
</script>
執行輸出
就是這麼簡單！
二、基本功能
渲染文字-{{var}}
用{{}}輸出變數即可
<div id="app">
<h1>{{cqh}}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
cqh: 'chenqionghe'
}
})
</script>
這裡直接把data.cqh的資訊顯示出來了
渲染表示式-{{expr}}
放在{{}}內的文字為表示式，除了直接輸出屬性值外，還可以寫簡單的js表示式
<div id="app">
<p>{{id+1}}</p>
<p>{{id==123? 'a' : 'b'}} </p>
<p>{{cqh.split('').join('--')}} </p>
</div>
<script>
new Vue({
el: '#app',
data: {
cqh: 'chenqionghe',
id: 123,
}
})
</script>
渲染屬性-:attr="expr"
使用-:attr="expr"形式
<div id="app">
<h1 :id="'123'+id" :style="style" >{{cqh}}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
cqh: 'chenqionghe',
id: 123,
color: 'red',
style:{
'color':'red'
}
}
})
</script>
這裡:屬性後邊是一個js表示式，可以直接使用data的變數
過濾器-filters
過濾器在vue的filters中定義，類似管道的方式使用
<div id="app">
<p>{{cqh|uppercase}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
cqh: 'chenqionghe',
},
filters: {
uppercase: function (value) {
if (!value) return '';
value = value.toString();
return value.toUpperCase()
}
}
})
</script>
執行結果如下
過濾器本質是一個函式，還可以傳引數，v
{{ message | filterA('arg1', arg2) }}
事件監聽-methods
兩種方式，@或v-on後邊跟事件名，引號裡邊放methods裡呼叫的方法
<div id="app">
<button @click="a">a事件</button>
<button v-on:click="b">b事件</button>
</div>
<script>
new Vue({
el: '#app',
data: {
cqh: 'chenqionghe',
id: 123,
color: 'red',
},
methods: {
a() {
alert(this.cqh)
},
b() {
alert(this.id)
}
}
})
</script>
執行如下
計算屬性-computed
為了避免在模板中加入過重的業務邏輯，比如拼接字串，計算價格等
vue還提供了計算屬性的方法computed
<div id="app">
<p>{{fullName}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
cqh: 'chenqionghe',
},
computed: {
fullName() {
return this.cqh + "-雪山飛豬"
}
}
})
</script>
執行如下
三、控制邏輯
v-if/v-else
<div v-if="yes">
<div v-if="inner">inner</div>
<div v-else>not inner</div>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
yes:true,
inner:false,
}
})
</script>
輸出
v-for
<div id="app">
<ul>
<li v-for="v in list">
<h3>{{v.title}}-{{v.description}}</h3>
</li>
</ul>
<ul>
<li v-for="(v,k) in list">
<h3>{{k}}-{{v.title}}-{{v.description}}</h3>
</li>
</ul>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
list: [
{title: "php", description:"指令碼語言"},
{title: "java", description:"編譯語言"},
{title: "golang", description:"編譯語言"},
],
}
})
輸出
template
v-if指定都包含在一個根元素中，如果想應用到多個兄弟節點上不想重複寫，就用template，最後渲染結果不會有它！
<div id="app">
<template v-if="yes">
<li>a</li>
<li>b</li>
<li>c</li>
</template>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
yes: true,
inner: false,
}
})
</script>
最後渲染如下
四、表單控制元件
Text文字框
<div id="app">
<input type="text" v-model="cqh">
<span>你的名字是：{{cqh}}</span>
</div>
<script>
new Vue({
el: '#app',
data: {
cqh: 'chenqionghe',
}
})
</script>
當我們修改表單元素的同時，v-model中的值也是實時更新的
Radio單選框
<div id="app">
<label><input type="radio" value="male" v-model="gender">男</label>
<label><input type="radio" value="female" v-model="gender">女</label>
<p>你的性別是：{{gender}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
cqh: 'chenqionghe',
gender:"",
}
})
</script>
輸出
Checkbox核取方塊
<div id="app">
<label><input type="checkbox" value="1" v-model="list">1</label>
<label><input type="checkbox" value="2" v-model="list">2</label>
<label><input type="checkbox" value="3" v-model="list">3</label>
<p>你的選擇是：{{list.join('|')}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
cqh: 'chenqionghe',
list:[],
}
})
</script>
輸出
Select選擇框
<div id="app">
<select v-model="list">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p>你的選擇是：{{list}}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
cqh: 'chenqionghe',
list: "",
}
})
</script>
輸出
