一、什么是Vue？
1. vue為我們提供了構建用戶界面的漸進式框架，讓我們不再去操作dom元素，直接對數據進行操作，讓程序員不再浪費時間和精力在操作dom元素上，解放了雙手，程序員只需要關心業務，提高了開發效率。
2. 框架和庫的區別
框架是一整套解決方案，對項目的侵入性較大，項目如果需要更換框架的話，則需要重新架構整個項目
庫（相當於是一個插件）提供了某一個功能，對項目入侵性小，如果當前這個庫無法滿足某些功能的話，可以很容易的切換到其他庫，完成該需求
3. vue的基本語句：
var vm = new Vue({/* 根實例 */ el : '#app', // 指向的哪個元素（實例的掛載目標） data : { msg:"你好" }, // 所有根實例下的數據 methods : {} // 所有根實例下的方法區別 });
此時我們如果想要把msg中的數據渲染到頁面上 需要用到以下方法：
<div id="app">
<div>{{msg}}</div>
<div v-text="msg"></div>
<div v-html="msg"></div>
</div>
4. {{}} 和 v-text v-html 三者之間的區別：
用{{}}取值的話會產生閃爍問題，但是不會覆蓋元素中原來的內容
用v-text取值的話沒有閃爍問題，但是會覆蓋元素中原來的內容
用v-html取值沒有閃爍問題，與前兩者不同之處在於v-html可以將數據里面的內容按照html的格式去進行解析
msg:"<h3>你好</h3>" //這種數據的話就得用v-html進行解析了 其他兩者不會將h3轉換為標簽
頁面最終的輸出結果
5. 下面來說一說如何解決閃爍問題
這里又用到了一個新的指令：v-cloak
<div id="app" v-cloak> //這個指令一般建議添加到掛載vue元素上 這樣它里面的元素也不會有閃爍問題了
css代碼：
<style>
[v-cloak]{display: none;} //在樣式里面用屬性選擇器選擇我們的v-cloak指令 然后寫個隱藏樣式
</style>
下面來說一說v-for的使用：
<!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>
<style>
[v-cloak]{display: none;}
</style>
</head>
<body>
<!-- 以前拼字符串innerhtml -->
<!-- vue提供了一個指令 V-for 解決循環問題 更高效 會復用原有的格式 -->
<div id="app" v-cloak>
<!-- 去除閃爍 -->
<!-- 要循環誰 就在誰的身上增加V-for屬性 -->
<!-- 默認是value of 數組 （value,index） -->
<ul>
<li v-for="(fruit,index) in fruits">
{{fruit.name}} {{index+1}}
<ul>
<li v-for="(c,chlidindex) in fruit.color">
{{c}}{{index+1}}.{{chlidindex+1}}
</li>
</ul>
</li>
</ul>
<div v-for="c in 'aaaa'">{{c}}</div>
<div v-for="c in 30">{{c}}</div>
<div v-for="(value,key,index) in obj">{{value}}:{{key}}:{{index}}</div>
<div @click="show">aaaaa</div>
</div>
<script src="../node_modules\vue\dist\vue.js"></script>
<script>
var vm = new Vue({
el:"#app",
// methods和data中的數據會全部放到vm上，而且名字不能沖突，不然會報錯
data:{
obj:{name:'zfpx',age:9,address:"xxx"},
fruits:[
{name:"香蕉",color:['green','yellow']},
{name:"蘋果",color:['red','green']},
{name:"西瓜",color:['pink']}]
},
methods:{
show:function () {
alert("123");
}
}
})
</script>
</body>
</html>
下面說一說v-model 實現雙向的數據綁定：
<!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>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<!-- v-bind 只能實現數據的單向綁定 從 M 自動綁定到 V中去 無法實現數據的雙向綁定 -->
<!-- 使用v-model指令 可以實現表單元素和model中數據的雙向數據綁定 -->
<!-- v-model 只能用在表單元素中 -->
<!-- input text address -->
<input type="text" v-model='msg'>
</div>
<script src='../node_modules/vue/dist/vue.js'></script>
<script>
var vm = new Vue({
el:"#app",
data:{
msg:'你好啊'
},
})
</script>
</body>
</html>
這個是剛打開瀏覽器時的狀態
然后去控制台修改數據，就實現了雙向的數據綁定
下面說一說vue中行內樣式的設置
<!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>
<style>
*{
margin: 0;
padding: 0;
}
.red{
color: red;
}
.italic{
font-style: italic;
}
.active{
letter-spacing: 0.5em;
}
.then{
font-weight: 220;
}
</style>
</head>
<body>
<div id="app">
<!-- 這是第一種使用方式 直接傳遞一個數組 注意 這里的class需要使用v-bind做數據綁定 -->
<!-- <h1 :class="['italic','then']">這是一個很大很大的h1,大到你無法想象</h1> -->
<!-- 在數組中使用三元表達式 -->
<!-- <h1 :class="['italic','then',flag? 'active':'']">這是一個很大很大的h1,大到你無法想象</h1> -->
<!-- 在數組中使用對象來代替三元表達式 提高代碼的可讀性 -->
<!-- <h1 :class="['italic','then',{'active':flag}]">這是一個很大很大的h1,大到你無法想象</h1> -->
<!-- 在為class使用 v-bind綁定對象的時候 對象的屬性是類名 由於對象的屬性可帶引號可不帶，屬性的值是一個標識符 -->
<h1 :class="classobj">這是一個很大很大的h1,大到你無法想象</h1>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el : '#app',
data : {
flag:true,
classobj:{red:true,then:true,italic:false,active:false}
},
methods : {}
});
</script>
</body>
</html>
下面說一說vue中的事件修飾符
<!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>
</head>
<body>
<div id="app">
<div @click="one">
<!-- 使用.stop來進行阻止冒泡 -->
<button @click.stop="two">第二個按鈕</button>
</div>
<!-- 使用.prevent來進行阻止冒泡 -->
<a href="https://www.baidu.com" @click.prevent='linkc'>我要去百度</a>
<!-- 使用.capture 實現捕獲觸發事件的機智-->
<div @click.capture="one">
<button @click="two">第二個按鈕</button>
</div>
<!-- 使用.self 只會阻止自己身上冒泡行為的觸發 並不會真正阻止別的事件中-->
<div @click.self="one">
<button @click="two">第二個按鈕</button>
</div>
</div>
<script src='../node_modules/vue/dist/vue.js'></script>
<script>
var vm = new Vue({
el:"#app",
data:{
},
methods:{
one(){
alert(1)
},
two(){
alert(2)
},
linkc(){
console.log('觸發了鏈接的事件');
}
}
})
</script>
</body>
</html>