Vue學習筆記（一）
一、指令學習 基本寫法：
<body>
<div id="app1">
{{message}}
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app1",
data:{
message:"hello word!",
}
})
</script>
</body>
1.v-html：可以將指定的文字以及html語句輸出（這樣動態渲染的網站非常容易遭受 xss攻擊，慎用）
1）輸出文字
<body>
<div id="app1" v-html="message" >
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app1",
data:{
message:"helloword!",
}
})
</script>
</body>//結果為：helloword！
2）輸出html語句：
data:{ message:"<h1>helloword!</h1>", }//會將“helloword”，即輸出了html語句
2.v-text：作用類似於v-html，但是不能實現第二條功能，即無法輸出html語句：
<body> <div id="app1" v-text="message" > </div> <script type="text/javascript"> var vm=new Vue({ el:"#app1", data:{ message:"<h1>helloword!</h1>",//結果為：<h1>helloword!</h1>，將其原本的內容輸出。 } }) </script> </body>
3.v-model：可以實現資料的雙向繫結：即改變data中v-model指定的內容或者改變掛載物件上v-model的內容都會引起另一個實時變化。
<body>
<div >
<input type="text" id="app1" v-model="message"/>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app1",
data:{
message:"",
}
})
</script>
</body>
若在text輸入框中或者message程式碼中更改內容，另一個內容都會實時更新 4.v-for：可以遍歷陣列或者物件 1）遍歷陣列：可以提供兩個引數v-for="（item，index）in items",引數都可以二選一。 執行時會把陣列內的value值賦給item，索引賦給index，執行html語句，再進行下一次賦值。 為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的唯一 id。（例子中設定key為index）. 也可將in替換為of
<body>
<div id="app1" >
<ul >
<li v-for="(item,index) of message" key="index">{{index}}-{{item}}</li>//要特別注意這裡的in前面要加空格，否則會提示v-for寫法不合規
</ul>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app1",
data:{
message:["apple","orange","berry","others"]
}
})
</script>
</body>//結果輸出四個li
但是不可以將v-for直接應用於el掛載的元素上，只能作用於其下的子元素中，否則會報錯，例如：
<body>
<div id="app1" v-for="(item,index) in message">//會報錯
{{index}}-{{item}}
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app1",
data:{
message:["apple","orange","berry","others"]
}
})
</script>
</body>
2）遍歷物件：有三個引數可選v-for="(value,key,index) in objects"
<body>
<div id="app1">
<ul>
<li v-for="(value,key,index) in message" > {{index}}-{{key}}:{{value}} </li>
</ul>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app1",
data:{
message:{name:"Oliver",age:18,sex:"male"},
}
})
</script>
</body>
結果為：（忽略li樣式）
0-name:Oliver 1-age:18 2-sex:male
3）遍歷陣列物件：
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app1">
<ul >
<li v-for="(item,index) in message">{{index}}-name:{{item.name}}-age:{{item.age}}-sex:-{{item.sex}} </li>
</ul>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app1",
data:{
message:[{name:"Oliver",age:18,sex:"male"},{name:"James",age:19,sex:"male"}],
}
})
</script>
目前好像沒有方法能將陣列物件中的key值直接拿出來，只能在body中寫進去 5.v-if:可以配合v-else使用，但後者必須要緊跟在前者元素之後如果v-if之後的條件表示式為真，則渲染該元素，否則，則執行v-else之後的操作，如果沒有v-else，則不執行（v-if會讓Dom元素完全消失） 1）v-if：
<body>
<div id="app1" v-if="message" v-html="msg">
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app1",
data:{
message:true,//若改為false,則不顯示
msg:"helloword!"
}
})
</script>
</body>//結果顯示helloword
2）v-else-if
<body>
<div id="app1" >
<div v-if="message" v-html="msg2">
</div>
<div v-else-if="type === 'a'">
{{msg}}
</div>
<div v-else>
{{msg1}}
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app1",
data:{
message:0,
msg:"helloword!",
msg1:"faq",
type:'a',
msg2:"hello"
}
})
</script> //helloword!
3）Vue 會盡可能高效地渲染元素，通常會複用已有元素而不是從頭開始渲染。這麼做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許使用者在不同的登入方式之間切換：
<style type="text/css">
#app1{
float:left;
}
div{
position:float;
margin-left:20px;
display:inline-block;
}
</style>
</head>
<body>
<div id="app1">
<div v-if="a" >
ID:<input type="text" placeholder="請輸入id"/>
</div>
<div v-else>
E-mail:<input type="text" placeholder="請輸入E-mail" />
</div>
<div >
<button type="button" @click="change">change</button>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app1",
data:{
a:1,
},
methods:{
change:function(){
this.a=! this.a;
}
}
})
</script>
</body>
如果輸入了內容，點選切換之後輸入的內容不會消失，即vue並沒有完全重新渲染，為了實現重新渲染，需要指定key值
<style type="text/css">
#app1{
float:left;
}
div{
position:float;
margin-left:20px;
display:inline-block;
}
</style>
</head>
<body>
<div id="app1">
<div v-if="a" key="ID"> //分別指定key值
ID:<input type="text" placeholder="請輸入id"/>
</div>
<div v-else key="E-mail">
E-mail:<input type="text" placeholder="請輸入E-mail" />
</div>
<div >
<button type="button" @click="change">change</button>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app1",
data:{
a:1,
},
methods:{
change:function(){
this.a=! this.a;
}
}
})
</script>
</body>
6 v-show:另一個用於根據條件展示元素的選項是 v-show 指令。用法大致一樣：
<style type="text/css">
#app1{
float:left;
}
div{
position:float;
margin-left:20px;
display:inline-block;
}
</style>
</head>
<body>
<div id="app1">
<div v-show="a" >
ID:<input type="text" placeholder="請輸入id"/>
</div>
<div >
<button type="button" @click="change">hidden</button>
</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app1",
data:{
a:1,
},
methods:{
change:function(){
this.a=! this.a;
}
}
})
</script>
</body>//點選則會實現輸入框的隱藏
plus： v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。
v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。
相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。
一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。
7.v-on：註冊事件：
如上例中：<button type="button" @click="change">hidden</button>這裡的@click為v-on:click的簡寫，通過這種方式進行實踐註冊
而在資料結構中則要增加一個函式鉤子methods:{ change:function(){ this.a=! this.a; } }
8.v-bind:動態地繫結一個或多個特性，或一個元件 prop 到表示式。簡寫 ： 1)繫結一個屬性：
<body>
<div id="app">
<img v-bind:src="img1src">
</img>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
img1src:"img/jdmobile.png",
}
})
</script>
</body>//當imgsrc改變時會導致圖片動態改變
2）其他用法比較複雜，先將官網的摘抄下來，以後再進行補充：
<!-- 繫結一個屬性 -->
<img v-bind:src="imageSrc">
<!-- 縮寫 -->
<img :src="imageSrc">
<!-- 內聯字串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 繫結 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 繫結 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 繫結一個有屬性的物件 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通過 prop 修飾符繫結 DOM 屬性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 繫結。“prop”必須在 my-component 中宣告。-->
<my-component :prop="someThing"></my-component>
<!-- 通過 $props 將父元件的 props 一起傳給子元件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
8.v-clock:這個指令保持在元素上直到關聯例項結束編譯。和 CSS 規則如 [v-cloak] { display: none } 一起用時，這個指令可以隱藏未編譯的 Mustache 標籤直到例項準備完畢。
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript" src="js/vue.js">
</script>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
msg:"helloworld!",
}
})
</script>
</body>
以上例子當用3g低網速進行模擬時總會先看單插值表示式然後再顯示正確的結果“helloworld”,為了解決這個問題，引入v-clock
<style type="text/css">
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="app" >
<span v-cloak>{{msg}}</span>
</div>
<script type="text/javascript" src="js/vue.js">
</script>
<script type="text/javascript">
var vm=new Vue({
el:"#app",
data:{
msg:"helloword!",
}
})
</script>
</body>
在掛載元素{{msg}}完全載入之前，掛載元素會被隱藏，不會顯示。