一個簡單的vue例項
1.進入vue官網：
https://cn.vuejs.org/v2/guide/installation.html
兩種方法;1)點選開發版本，進入vue.js,複製到自己的資料夾，主頁裡引入2）直接引入cdn
注：<script src="js/vue.js"></script>放在head標籤之間，避免抖屏。
<head>
<meta charset="utf-8"
<title>Vue入門</title>
<script src="./vue.js"></script>
<body>
<div id="root">{{msg}}</div>
<script>
new Vue({
el:"#root",
data:{
msg:"hello world"
}
})
</body>
el: "id的值",//引用id的值，Vue通過el與屬性值root進行繫結
msg:"輸出值"可直接填寫任意輸出值
注意vue例項裡不同屬性用逗號隔開
2.掛載點，模板與例項之間的關係
掛載點：指的是Vue例項下中el屬性對應的""中的id所對應的dom節點(div)，即程式碼中el對應id的HTML標籤
模板：指的是在掛載點內部的這些內容都稱作模板內容，可以寫在掛載點內部也可以寫在例項裡的template中
例項：即newVue中，Vue會結合模版和資料生成最終要展示的內容，然後把放在掛載點之中
3.vue例項中的資料，事件和方法
-
{{number}}：插值表示式，也就是把number的值插入到h1之中；
-
v-text="number"：h1的內容由number這個變數決定，v-text是Vue中的一個指令，這個指令裡面的東西跟著的是一個變數，它告訴h1顯示的內容就是"number"這個變數；
-
v-html="c ontent"：v-html與v-text的區別是，v-html不會轉義，而v-text會轉譯；
-
v-on:click="handleClick"：通過v-on給元素繫結一個Click事件，事件觸發方法。
v-on:click簡寫是@click
View Code<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="./vue.js"></script> <title>Vue入門</title> </head> <body> <div id="root"> <div @click="handleClick">{{content}}</div> </div> <script> new Vue({ el: "#root", data: { content: "hello" }, methods: { handleClick: function() { this.content = "world" } } }) </script> </body> </html>
<body>
<div id="root">
<div @click="handleClick">{{content}}</div>
</div>
<script>
new Vue({
el: "#root",
data: {
content: "hello"
},
methods: {
handleClick: function() {
this.content = "world"
}
}
})
</script>
</body>
//點選hello變為world,
//{{content}}可以寫為<div v-text="content"></div>
//new Vue中的this是指這個 Vue例項 ,指它自己
4.vue中的屬性繫結和雙向資料繫結
1)屬性繫結
v-bind:title="title" ，雙引號裡面的是JS表示式,其中“”中的title指的是data裡的title
2)雙向繫結
單項繫結：資料決定頁面的顯示，但是頁面無法決定資料的內容
v-model：雙向資料繫結，隨著資料的修改與之對應的也會修改。
//v-bind:title="title"可以縮寫成，
：title="title"
//可以加入js表示式
v-bind:title="'gege lee'+title"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>屬性繫結和雙向資料繫結</title> <script src="./vue.js"> </script> </head> <body> <div id="root"> <div :title="'dell lee' +title">hello world</div> <input v-model="content"/> <div>{{content}}</div> </div> <script> new Vue({ el:"#root", data:{ title:"this is hello world", content:"this is content" } }) </script> </body> </html>
5.vue的計算屬性和偵聽器
1)計算屬性(computed)
一個屬性通過其他屬性計算而來
計算屬性 computed:{ fullName: function() { return this.firstName + " " + this.lastName; } } computed 有快取的功能
2）偵聽器（watch）
指的是監聽某一個資料或計算屬性發生了變化，然後就在監聽器裡面做業務邏輯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>計算屬性和偵聽器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
姓:<input v-model="firstName"/>
名:<input v-model="lastName"/>
<div>{{fullName}}
</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el:"#root",
data:{
firstName:'',
lastName:'',
count:0
},
computed:{
fullName:function(){
return this.firstName+' '+this.lastName
}
}
,watch:{
fullName:function(){
this.count++
}
}
})
</script>
</body>
</html>
6.v-if ,v-show,v-for指令
v-if: 控制dom的存在與否，對應data中的值show是true時顯示，為false，則把這個標籤就移除。
v-show :控制dom的顯示與否，v-show 只是切換display的一個屬性，當對應指令值show為false時，div標籤會隱藏，就會把div標籤的display屬性變成none,如果需要頻繁的的切換標籤展示狀態，則用v-show
v-for :迴圈展示dom結構
用v-for去渲染li標籤時，需要繫結一個key屬性，這樣會加快渲染的速度，可以直接用item來作為他的值，key值不能相同，所以如果內容是相同的就不能直接用內容作為key值了，可以直接用index作為key值。但是如果需要對列表進行排序的變更的話，也不能用index。v-for="(item,index) of list":key="index"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>v-if ,v-show,v-for指令</title>
<script src="./vue.js">
</script>
</head>
<body>
<div id="root">
<div v-show="show">hello world</div>
<button @click="handleClick">toggle</button>
<ul>
<li v-for="(item,index) of list":key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:"#root",
data:{
show:true,
list:[1,2,3]
},
methods:{
handleClick:function(){
this.show=!this.show;
}
}
})
</script>
</body>
</html>