vue基礎
宣告式渲染
Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統
Example1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
{{ 10+203 }}
<p>{{ myname }}</p>
</div>
<div>
{{ 10+20 }}
</div>
<script>
var vm = new Vue({
el:"#box", // vue 渲染開始的地方
data:{
myname:"kerwin"
} // 狀態
})
</script>
</body>
</html>
我們已經成功建立了第一個 Vue 應用！看起來這跟渲染一個字串模板非常類似，但是 Vue 在背後做了大量工作。現在資料和 DOM 已經被建立了關聯，所有東西都是響應式的。我們要怎麼確認呢？開啟你的瀏覽器的 JavaScript 控制檯 (就在這個頁面開啟)，並修改
app.message的值，你將看到上例相應地更新。注意我們不再和 HTML 直接互動了。一個 Vue 應用會將其掛載到一個 DOM 元素上 (對於這個例子是
#app) 然後對其進行完全控制。那個 HTML 是我們的入口，但其餘都會發生在新建立的 Vue 例項內部。
除了文字插值，我們還可以像這樣來繫結元素 attribute：
<div id="app-2">
<span v-bind:title="message">
滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '頁面載入於 ' + new Date().toLocaleString()
}
})
這裡我們遇到了一點新東西。你看到的
v-bindattribute 被稱為指令。指令帶有字首v-，以表示它們是 Vue 提供的特殊 attribute。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行為。在這裡，該指令的意思是：“將這個元素節點的titleattribute 和 Vue 例項的messageproperty 保持一致”。如果你再次開啟瀏覽器的 JavaScript 控制檯，輸入
app2.message = '新訊息'，就會再一次看到這個繫結了titleattribute 的 HTML 已經進行了更新。
條件與迴圈
<div id="app-3">
<p v-if="seen">現在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
繼續在控制檯輸入
app3.seen = false，你會發現之前顯示的訊息消失了。這個例子演示了我們不僅可以把資料繫結到 DOM 文字或 attribute，還可以繫結到 DOM 結構。此外，Vue 也提供一個強大的過渡效果系統，可以在 Vue 插入/更新/移除元素時自動應用過渡效果。
還有其它很多指令，每個都有特殊的功能。例如，
v-for指令可以繫結陣列的資料來渲染一個專案列表：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id=app-4>
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [{
text: '學習js'
},
{
text: '學習vue'
},
{
text: '整個厲害專案'
}
]
}
})
</script>
</body>
</html>
處理使用者輸入
為了讓使用者和你的應用進行互動，我們可以用
v-on指令新增一個事件監聽器，通過它呼叫在 Vue 例項中定義的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="app-5">
<p>{{ message}}</p>
<button v-on:click="reverseMessage">反轉訊息</button>
</div>
<script>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function() {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
模板語法
vue插值(v-if和v-show)
/*
文字{{}}
純HTML
v-html, 防止XSS,csrf (
(1)前端過濾
(2)後臺轉義(<> < >)
(3)給cookie加上屬性http
)
指令
v-html
v-show
*/
Example1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
{{ 10+20 }}
{{ 10>20? 'aaa':'bbb' }}
{{ myname}}
<!-- 指令 -->
{{ myhtml }}
<div v-html="myhtml"></div>
</div>
<script type="text/javascript">
// console 中可以 vm.isShow=false隱藏
new Vue({
el: "#box",
data: {
myname: "youmen",
myhtml: "<b>11111</b>"
}
})
</script>
</body>
</html>
條件渲染
Vue-class繫結和Vue-style繫結
Example1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
<style>
.red {
background-color: red;
}
.yellow{
background-color: yellow;
}
.aaa{
}
.bbb{
}
</style>
</head>
<body>
<div id="box">
<button @click="handleClick()">click</button>
<div :class="isActive?'red':'yellow'">我是動態繫結class-三目寫法</div>
<div :class="classobj">我是動態繫結class-物件寫法</div>
<div :class="classarr">我是動態繫結class-陣列寫法</div>
<div :style="'background:'+(isActive?'red':'yellow')">我是動態繫結style-三目寫法</div>
<div :style="styleobj">我是動態繫結style-物件寫法</div>
<div :style="stylearr">我是動態繫結style-陣列寫法</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#box",
data: {
isActive: true,
classobj: {
a: true,
b: true
// a b, class名字
},
classarr: ["a", "b"],
styleobj: {
backgroundColor: "red"
},
stylearr: []
},
methods: {
handleClick() {
this.isActive = !this.isActive
}
}
})
</script>
</body>
</html>
條件渲染
Example1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick()">click</button>
<div v-if="isCreated">動態建立和刪除-1</div>
<div v-else>動態建立和刪除-2</div>
<ul v-if="datalist.length">
<li v-for="data in datalist">
{{ data }}
</li>
</ul>
<div v-else>
購物車空空如也
</div>
<div v-if="which==1">
111
</div>
<div v-else-if="which==2">
2222
</div>
<div v-else>
3333
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#box",
data:{
isCreated:false,
datalist:[],
which:1,
},
methods: {
handleClick(){
this.isCreated = !this.isCreated
this.datalist = ["111","222","333"]
}
}
})
</script>
</body>
</html>
列表渲染
我們可以用
v-for指令基於一個陣列來渲染一個列表。v-for指令需要使用item in items形式的特殊語法，其中items是源資料陣列，而item則是被迭代的陣列元素的別名。
v-for還支援一個可選的第二個引數，即當前項的索引。也可以用of代替in作為分隔符,因為她更接近javascript迭代器的語法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
<style>
.active{
background-color: red;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li v-for="(data,index) in datalist">
{{ data }}--{{ index }}
</li>
</ul>
<ul>
<li v-for="(data,key) of obj">
{{ data }}--{{key}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#box",
data:{
datalist:["111","222","333"],
obj:{
name:"youmen",
age:100,
location:"youmen"
}
}
})
</script>
</body>
</html>
列表key值設定
/*
1. v-for(特殊v-for="n in 10")
a.in
b.of
2. key
*跟蹤每個節點的身份,從而複用和重新排序現有元素
*理想的key值是每項都有且唯一的id,data.id
3. 陣列更新檢測
a. 使用以下方法運算元組,可以檢測變動
push() pop() shift() unshift() splice() sort() reverse()
b. filter(),concat()和slice(),map(),新陣列替換舊陣列
c. 不能檢測以下變動的陣列
vm.items[indexOfitem] = newValue
"解決"
1. Vue.set(example1.items,index()fltem,newValue)
2. splice
*/