1.什么是Vue
Vue.js是一個漸進式JavaScript框架
漸進式:vue從小到控制頁面中的一個變量到頁面一塊內容到整個頁面,最終大到整個項目,都可以用vue框架來實現
2.vue可以干哪些事
將數據渲染到指定區域(數據可以是后台獲取,也可以由前台自己產生)
可以與頁面完成基於數據的交互方式
3.為什么學習Vue
1.整合了Angular React框架的優點(第一手API文檔是中文的)
2.單頁面應用(得益於vue的組件化開發 => 前台代碼的復用)
3.虛擬DOM(提高操作DOM的效應)
4.數據的雙向綁定
一.如何在頁面中使用vue
<body>
<div id='box1'>
//{{}}會被vue解析為數據的渲染的指定語法
{{}}
</div>
<hr>
<div class='box2'>
{{}}
</div>
</body>
<script src='js/vue.js'></script>
<script>
// 如何使用jq框架 <= 拿到jq框架的對象 $ | jQuery
// 類比: 如何使用vue框架 <= 拿到vue框架的對象 new Vue()
// vue對象需要手動創建, 原因, 一個vue對象可以只控制頁面中的某一部分, 如果一個頁面有多個部分都需要被控制, 那么就需要創建多個vue對象
new Vue({
el:'#box1'
// 掛載在id為box1的div上,那么該div下的所有內容都由該vue對象來控制
})
new Vue({
el:'.box2'
// 掛載在class為box2的div上,那么該div下的所有內容都由該vue對象來控制(盡量使用id,唯一標識)
})
</script>
二.vue的掛載點(vue實例)
<body>
<div id = 'app'>
{{msg}}
</div>
</body>
<script src='js/vue.js'></script>
<script>
// Vue實例會根據數據產生虛擬DOM,最終替換掉掛載點的真實DOM(不要掛載到body上)
var app = new Vue({
el : '#app',
data: {
msg: '今晚嘿嘿'
}
});
// 如果需要使用vue對象(實例),那么就可以接收Vue創建的結果,反之就不需要接收
console.log(app);
console.log(app.$attrs); //vue實例的變量都是以$開頭
console.log(app.$el);
console.log(app.$data.msg);
console.log(app.msg);
// app對象 = new Vue() 實例 = 標簽div#app組件
</script>
三.vue的基礎指令
1.文本指令
<body>
<div id = 'app'>
<p>{{info}}</p>
// v-text 為vue的文本指令 = 'info', info為vue實例data中的一個變量
<p v-text='info'></p>
<p v-text='msg'></p>
<p v-html='res'></p>
</div>
</body>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data: {
info: '插值表達式',
msg:'文本指令',
res:'<b>加粗的文本</b>'
}
})
</script>
2.屬性指令
<body>
<div id='app'>
// v-bind: 屬性 = '變量'
// 如果abc自定義屬性被v-bind:指令綁定了,后面的值也會變成vue變量,如果就想是普通字符串,再用''包裹
// : 就是v-bind: 的簡寫方式(1.常用 2.一定且只操作屬性)
<p v-bind:abc="'abc'" v-bind:title='h_info' :def = 'hehe'>abc</p>
// 最常用的兩個屬性 class | style
<p :class='a'></p> //單類名
<p :class = '[a,b]'></p> // 多類名
<p :class= '{c: d}'></p> // 了解:c為類名,是否起作用取決於d值為true|false 開關類名
// style
<p :style='s1'></p> //s1為一套樣式
<p :style='[s1, s2, {textAlign: ta}]'> 12345</p> //了解: s1,s2均為一套樣式, ta是一個變量,專門賦值給textAlign('text-align')
</div>
</body>
<script src = 'js/vue.js'></script>
<script>
new Vue({
el: '#app',
data: {
h_info:'懸浮提示',
hehe :' 呵呵',
a : 'active',
b : 'rule',
d : false,
s1: {// 樣式1: 值1, ..., 樣式n: 值n
width: '200px',
height: '200px',
background: 'red'
},
s2: {
borderRadius: '50%'
},
ta: 'center'
}
})
</script>
3.事件指令
<body>
<div id="app">
<!-- v-on:事件 = "變量 簡寫 @ -->
<!-- 事件綁定的變量可以在data中賦值,但建議在methods中賦值 -->
<p v-on:click="fn1">11111111111111</p>
<p @click="fn2">22222222222222</p>
<!--vue事件的綁定可以傳自定義參數-->
<p @click="fn3(333)">3333333333333333</p>
<!--vue事件的綁定不傳自定義參數, 默認將事件對象傳過去了-->
<p @click="fn4">4444444444444444</p>
<!--vue事件的綁定傳自定義參數, 還要將事件對象傳過去了, 要明確傳$event-->
<p @click="fn5(555, $event)">5555555555555555</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
// 事件在data中提供一個函數地址,可以實現事件
fn1: function () {
console.log("11111111111111")
}
},
// 事件盡量(要求)都放在vue實例的methods中
methods: {
fn2: function () {
console.log("22222222222222")
},
fn3 (arg) { // ES6語法
console.log(arg)
},
fn4: function (ev) {
console.log(ev)
},
fn5: function (arg, ev) {
console.log(arg)
console.log(ev)
},
}
})
</script>
4.表單指令
<body>
<div id="app">
<!-- v-model = "變量" 本質操作的就是表單元素的value -->
<!--v-model就是完成數據的雙向綁定-->
<form action="">
<input type="text" v-model="info"> <!-- info變量就是代表輸入框的value -->
<input type="text" v-model="info">
</form>
<p> {{ info }} </p>
<!--v-once只會被賦值一次,就不再改變,並且要結合插值表達式使用-->
<p v-once="info">{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
// info: "初始value",
info: ""
},
})
</script>