使用vue,js第一步先是安裝(http://cn.vuejs.org/)
在官方文檔中就可以直接下載并用 <script>標簽引入，記住本地的Vue.js的位置，通過會被注冊為一個全局變量。如：
<script type="text/javascript" src="D:\軟件小組/vue.js"></script>
vue介紹
vue是一套構建用戶界面的 漸進式框架，Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
最基本的實現方法：
<div id="app" >
{{message}} //輸出的純文本用雙大括號括著
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app', //元素的id
data:{ //元素包含的數據
message:"good"
}
})
可以通過控制臺console改變數據
這樣的話可以多次改變數據，而通過使用 v-once 指令，你也能執行一次性地插值，當數據改變時，插值處的內容不會更新，另外一種就是在
{{message}}改為{{*message}},同樣也只能賦值一次
<div id="app" >
{{*message}}
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
message:"hello"
}
})
vm.message="wonderful";
</script> //hello
如果要輸出真正的 HTML ，你需要使用v-html指令：
<div id="app" >
<div v-html="name"></div> //name為HTML代碼，直接可以輸出不需要雙大括號
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
name:"Amy",
}
})
</script>
注意，你不能使用 v-html來復合局部模板，因為 Vue 不是基于字符串的模板引擎。組件更適合擔任 UI 重用與復合的基本單元。
你的站點上動態渲染的任意 HTML 可能會非常危險，因為它很容易導致 XSS 攻擊。請只對可信內容使用 HTML 插值，絕不要對用戶提供的內容插值。*
條件與循環
<div id="app" >
<p v-if="look">{{message}} //v-if 語句的形式，通過look的布爾值決定是否執行
</p>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
message:"good",
look:true
}
}) //good
在通過控制臺輸出vm.look=false使得good的輸出消失
循環：
<div id="app" >
<div v-if="look" >
<p v-for="item in items">{{item.message}} 相當于 i in array的循環
</p>
</div>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
items:[ //數組和對象的要小心這些括號
{message:"good"},
{message:"study"},
{message:"children"}
],
look:true
}
})
</script>
還可以在控制臺上增添新的
message值
vm.items.push({message:"better"})
事件
v-on事件
<div id="app" >
<button v-on:click="hello">Hello</button> v-on進行連接click點擊函數
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
methods:{ //方法
hello:function() {
alert("hey,girl");
}
}
})
</script>
<a v-on:click="doSomething"></a>
<a @click="doSomething"></a>
Vue 也提供了 v-model 指令，它使得在表單輸入和應用狀態中做雙向數據綁定變得非常輕巧。如：
<div id="app" >
{{message}}
{{name}}
<br>
<input v-model="name">
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
message:"hello",
name:''
}
})
</script>
v-bind指令綁定class
<style type="text/css">
.active{
color:red;
}
.static{
background:green;
}
</style>
<div id="app" v-bind:class="{active:isActive,static:isStatic}">
{{message}}
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
isActive:true,
message:'beauty',
isStatic:true
},
})//class屬性的bind的
：
//綁定Style屬性
<style type="text/css">
.active{
font-family:'Comic Sans Ms';
background:blue;
}
</style>
<div id="app">
<div v-bind:class="{active:isActive}">
<div v-bind:style="{color:activeColor,fontSize:fontSize}">
{{message}}
</div>
</div>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
activeColor:'orange',
message:"dodo",
isActive:true,
fontSize:'50',
}
})
//如果是想同時綁定兩個東西，應該要多個包裝，否則就會沒有什么效果直接忽略后面的綁定，例如不能在同一個div中用bind綁定兩個
bind語法
<a v-bind:href="url"></a>
<a :href="url"></a>
計算屬性
在模板中綁定表達式是非常便利的，但是它們實際上只用于簡單的操作。在模板中放入太多的邏輯會讓模板過重且難以維護。如：
<div id="example">
{{ message.split('').reverse().join('') }}
</div>
computed例子：
<div id="app">
<p>{{message}}</p>
<p>{{reverseMessage}}</p>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
message:'live'
},
computed:{
reverseMessage:function() {
return this.message.split('').reverse().join('')
}
}
})
結果：
live
evil
這個目的同樣可以用methods的形式實現，但是對于methods，是每次執行都會重新調用一次函數，再從頭開始，而對于計算屬性來說，是基于它的依賴緩存，也就是說只要message的值不變，計算屬性會一下子就出現之前出現的結果，而method又要經過冗長的過程
Vue.js 提供了一個方法 $watch ，它用于觀察 Vue 實例上的數據變動
computed: {
classObject:function() {
return {
active:this.isActive && !this.error,
'text-danger':this.error && this.error.type==='fatal', //這是什么意思
}
}
}
v-if條件渲染
<div id="app">
<div v-if="ok">{{message}}</div>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
message:"dodo",
ok:true
}
})
</script> //注意的是v-if不能直接寫在根元素上
template方法
<template>元素當做包裝元素，并在上面使用 v-if，可以用來切換多個元素
<div id="app" >
<template v-if="ok">
<div v-bind:style="{color:activeColor}">
<h1>Title</h1>
<p>Paragraph</p>
</div>
</template>
{{message}}
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
activeColor:'orange',
message:"dodo",
ok:true
}
})
</script>
可以用 v-else指令給 v-if 或 v-show添加一個 “else” 塊：
v-else元素必須緊跟在 v-if或 v-show 元素的后面——否則它不能被識別
<div id="app" >
<template v-else>
{{message}}
</template>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
activeColor:'orange',
message:"dodo",
ok:true
}
}) //無效果
v-show另一個根據條件展示元素的選項是 v-show 指令
用法大體上一樣：
<h1 v-show="ok">Hello!</h1>
與v-if不同的是有 v-show的元素會始終渲染并保持在 DOM 中。v-show
是簡單的切換元素的 CSS 屬性 display
注意： v-show不支持 <template>語法，但是不會報錯。
template v-for句式
<div id="app" >
<ul>
<template v-for="item in items">
<li>{{item.message}}</li>
<li v-bind:class="{active:isActive}"></li>
</template>
</ul>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
isActive:true,
activeColor:'orange',
items:[
{message:"dodo"},
{message:"foolish"}
]
}
})
</script>
列表渲染
<style type="text/css">
.active{
font-family:'Comic Sans Ms';
background:blue;
}
</style>
<div id="app" >
<ul>
<template v-for="(value,key) in items"> //遍歷
<li v-bind:class="{active:isActive}"> //綁定class
{{$index}}.{{key}}:{{value}}</li> //輸出值
</template>
</ul>
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
isActive:true,
activeColor:'orange',
items:{
wonder:"dodo",
message:"foolish"
}
}
})
</script>
<div id="app" v-for="item in items">
{{item.message}}
</div>
<script type="text/javascript" >
var vm=new Vue({
el:'#app',
data:{
items:[{message:"baby"}]
}
})
</script>
結果：
baby
在控制臺輸入
vm.items.push({message:"good"})
再輸入
vm.items.pop()
輸出：
數組的變異方法手段還有
push()pop()-
shift()//從頭部開始刪除元素 -
unshift()//從頭部開始增加元素 splice()sort()reverse()
#########注意
由于 JavaScript 的限制， Vue 不能檢測以下變動的數組：
- 當你直接設置一個項的索引時，例如：
vm.items[indexOfItem] = newValue - 當你修改數組的長度時，例如：
vm.items.length = newLength
解決第一個問題的方法：
// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)
var vm=new Vue({
el:'#app',
data:{
items:[{message:"baby"},
{message:"hello"},
{message:"good morning"}
]
}
})
vm.items.splice(2,1,{message:'beauty'}) //改變數組中特定位置元素的值
解決第二個問題的方法：
example1.items.splice(newLength)
對于所有的數據綁定， Vue.js 都提供了完全的 JavaScript 表達式支持。然而這些表達式會在所屬 Vue 實例的數據作用域下作為 JavaScript 被解析。有個限制就是，每個綁定都只能包含單個表達式，語句不會解析
{{number+1}} <!--把語句包含在雙大括號內--!>
<!-- 這是語句，不是表達式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}
事件修飾符
通過由點(.)表示的指令后綴來調用修飾符,處理 DOM 事件細節
stopselfpreventcapture
<a v-on:click.stop="doThis"></a>
<form v-on:submit.prevent="onSubmit"></form>
<a v-on:click.stop.prevent="doThat"></a>
<form v-on:submit.prevent></form>
<div v-on:click.capture="doThis">...</div>
<div v-on:click.self="doThat">...</div>
#######按鍵修飾符
最常用例子：
<input v-on:keyup.enter="submit">//用回車鍵進行操作提交
其他的常用鍵
- enter
- tab
- delete
- esc
- space
- up
- down
- left
- right
