創建一個Vue實例
var vm = new Vue({
el:'#app',
data:{},
methods:{}
})
在html中完整代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var vm = new Vue({
el:'#app',
data:{},
methods:{}
})
</script>
</body>
</html>
常用標簽用法:v-cloak、v-html、v-bind、v-on
差值表達式和v-cloak
{{}} (差值表達式):
<div id="app">
<p>{{msg}}</p>
</div>
js代碼 :
var vm = new Vue({
el:'#app',
data:{
msg:"Hello world!"
},
methods:{}
})
使用v-cloak:
<div id="app">
<p v-cloak>{{msg}}</p>
</div>
區別：v-cloak會屏蔽
標簽中的{{msg}}，解決文本閃爍問題。ps:{{}}前后可以自定義文本，且在使用v-claok后
和msg一起顯示
測試方法：將vue.js在DOM之后導入，使用live server打開頁面，將network調至slow 3G，會發現差值表達式方 法的頁面會先顯示{{msg}}再顯示"Hello world!"。
v-html和v-text
v-html：可以識別msg文本中的DOM標簽。
v-text：識別純文本，且只識別msg中的文本，
標簽中的文本不會被識別
v-html
<div id="app">
<p v-html="msg"></p>
</div>
var vm = new Vue({
el:'#app',
data:{
msg:"<h2>你好，我在測試v-html的作用</h2>"
},
methods:{}
})
v-text
<div id="app">
<p v-text="msg">1111111</p>
</div>
var vm = new Vue({
el:'#app',
data:{
msg:"<h2>你好，我在測試v-html的作用</h2>"
},
})
v-bind
可以綁定屬性,可以直接簡寫為冒號‘:’。下面例子將title屬性綁定在mytitle上
<div id="app">
<!--可直接將v-blind:簡寫為“:” -->
<input type="button" value="按鈕" v-bind:title="mytitle" >
</div>
var vm = new Vue({
el:'#app',
data:{
mytitle:"這是一個button"
},
})
v-on
給DOM綁定事件。
<div id="app">
<!--可直接將v-on:簡寫為“@” -->
<input type="button" value="按鈕" v-on:click="show">
</div>
var vm = new Vue({
el:'#app',
data:{},
methods: {
show: function () {
alert("Hello!");
}
},
})
v-model
實現表單元素和model間的雙向綁定,但是v-model只能在表單中使用（ps:v-bind只能實現數據的單向綁定）
<div id="app">
<h1>{{msg}}</h1>
<!-- v-model 能夠實現表單元素和model間的雙向綁定，但是v-model只能在表單中使用 -->
<input type="text" style="width:100%" v-model="msg">
</div>
var vm = new Vue({
el:'#app',
data:{
msg:"我是愛學習、愛生活的好學生！"
},
methods:{}
})
在text文本框中輸入會改變h1標簽的文本，即msg的值通過v-model綁定到了text的輸入框上了。
v-if和v-show
v-if特點:每次都會重新創建和刪除dom元素 。
v-show特點: 每次不會創建和刪除,但改變display的屬性。
<div id="app">
<input type="button" value="toggle" @click="toggle">
<!-- v-if特點:每次都會重新創建和刪除dom元素 -->
<!-- v-show: 每次不會創建和刪除,但改變display的屬性-->
<h1 v-if="flag">這是v-if的h1</h1>
<h1 v-show="flag">這是v-show的h1</h1>
</div>
var vm = new Vue({
el:'#app',
data:{
flag:true
},
methods:{
toggle(){
this.flag = !this.flag;
}
}
})
點擊按鈕，兩個h1都不會在頁面顯示，使用v-if的dom元素被刪除，v-show的dom元素的display屬性為none。
v-for
創建一個公用的js文件:
var vm = new Vue({
el:'#app',
data:{
list:[1,2,3,4,5,6,7,8],
list2:[
{id:1,name:'zs1'},
{id:2,name:'zs2'},
{id:3,name:'zs3'},
{id:4,name:'zs4'},
],
user1:{
id : 1,
name:"托尼史塔克",
sex:"男"
}
},
methods:{}
})
1.普通循環
<p v-for = "(item,i) in list">---索引值---{{i}}---數值---{{item}}</p>
2.復雜函數 遍歷對象數組
<p v-for = "(user,i) in list2">ID:{{user.id}}---名字：{{user.name}}---索引：{{i}}</p>
3.遍歷對象
<p v-for="(val,key,index) in user1">值是：{{val}}---鍵是：{{key}}--索引{{index}}</p>
4.迭代數字
ps:使用v-for迭代數字，第一個數字從1開始。
<p v-for="count in 10">這是第{{count}}個數字</p>
v-if和v-else
v-if的值為true則展示綁定了v-if的元素，否則展示綁定了v-else屬性的元素。（類似與if....else語句）
<a href="" @click.prevent='flag = true'>登錄</a>
<a href="" @click.prevent="flag = false">注冊</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
可用於兩個組件之間的切換。