目錄
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>{{message}}</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>
輸出
