Vue框架初识01
摘要
vue簡介
vue使用
一、Vue簡介：
簡介：
Vue.js（讀音 /vju?/, 類似于 view）是一個構建數據驅動的 web 界面的漸進式框架。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。它不僅易于上手，還便于與第三方庫或既有項目整合。
Vue是前端三大框架之一(Angular、Vue、React)
JS漸進式框架：一個頁面小到一個變量，大到整個頁面，均可以有vue控制，vue也可以控制整個項目
# 思考：vue如何做到一次引入控制整個項目 => 單頁面應用 => vue基于組件的開發
初識vue，我們可以思考一下vue的工作原理：vue如何渲染一個頁面
vue學習曲線：vue的指令 vue的實例成員 vue組件 vue項目開發
vue的優點：
①單頁面：高效
②虛擬DOM：頁面緩存
③數據的雙向綁定：數據具有監聽機制
④數據驅動：從數據觸發，不是從DOM出發
vue的使用：
1、下載地址：https://cn.vuejs.org/v2/guide/installation.html
2、在html頁面用<script>標簽引入使用
在html中書寫掛載點的頁面結構，用id表示
在自定義的script標簽實例化Vue對象，傳入一個大字典
在字典中通過 el與掛載點頁面結構綁定，data為其通過數據
二、vue的基本使用：
點擊事件：v-on:click="點擊事件產生動作名稱"
<body>
<div id="app">
<!--{{ vue變量 }} 插值表達式-->
<h1 v-on:click="clickAction">{{ h1_msg }}</h1>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app', // 掛載點
data: {
h1_msg: 'vue利用插值表達式渲染的變量內容',
},
methods: {
clickAction:function () {
alert(123)
}
}
})
</script>
vue操作簡單樣式
<body>
<div id="app">
<p v-on:click="btnClick1" v-bind:style="v_style">點擊p標簽文字顏色變綠</p>
<div v-on:click="btnClick2" v-bind:style="v_style">點擊div標簽文字顏色變綠</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app', // 掛載點
data: {
v_style: {color: 'black'},
},
methods: {
btnClick1:function () {
this.v_style.color = 'green'
},
btnClick2:function () {
this.v_style.color = 'red'
}
}
})
</script>
小結：vue是通過v-*指令來控制標簽，同時通過變量內的數據來驅動頁面的渲染
vue相關指令認識：
文本指令
<body>
<div id="app">
<!--插值表達式另一種形式 v-text-->
<p>{{ msg1 }}</p>
<p v-text="msg2"></p>
<!--可以通過v-html來解析html標簽-->
<p v-html="msg3" v-on:mouseover="action1"></p>
<!--v-once，必須賦初值，且渲染的結果不會變化-->
<p v-once="msg4" v-on:mouseover="action">{{ msg4 }}</p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app', // 掛載點
data: {
msg1: '**msg1**',
msg2: '<b>**msg2**</b>',
msg3: '<b>**msg3**</b>',
msg4: '**msg4**',
},
methods: {
action:function () {
this.msg4 = '**新的msg4**'
},
action1:function () {
this.msg3 = '**新的msg3**'
},
}
})
</script>
事件指令
<body>
<div id="app">
<!--v-on:事件名="函數名"，這種表示可以進行簡寫：@事件名="函數名"，也就是將v-on:簡寫成一個@代替-->
<p v-on:click="action1">{{ msgs[0] }}</p>
<p @click="action2">{{ msgs[1] }}</p>
<!--事件的傳參-->
<ul>
<li @click="liAction(100)">列表組1</li>
<li @click="liAction(200)">列表組2</li>
<li @click="liAction(300)">列表組3</li>
</ul>
<!--鼠標事件對象：直接寫函數名，默認將鼠標事件對象傳入-->
<div @click="func1">func1</div>
<!--鼠標事件對象，一但添加()，就必須手動傳參，$event就代表鼠標事件對象-->
<div @click="func2($event, 'abc')">func2</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app', // 掛載點
data: {
msgs: ['111', '222']
},
methods: {
action1:function () {
alert(this.msgs[0])
},
action2:function () {
alert(this.msgs[1])
},
liAction:function (num, msg) {
console.log(num, msg)
},
func1:function (ev) {
console.log(ev)
},
func2:function (ev,msg) {
console.log(ev);
console.log(msg)
},
}
})
</script>
屬性指令
<style>
.rDiv {
width: 100px;
height: 100px;
background-color: red;
}
.gDiv {
width: 100px;
height: 50px;
background-color: blue;
}
.br {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<!--屬性指令：用vue綁定屬性，將屬性內容交給vue處理-->
<!--語法：v-bing:屬性名="變量" (v-bind:可以簡寫為:)-->
<p class="" v-bind:sgt="oo" :jason="xx"></p>
<!--class 屬性-->
<p :class="c1" @click="action1"></p>
<!--多個類名-->
<p :class="[c1, c2]"></p>
<!--'br'固定寫死的數據，不再是變量-->
<p :class="[c1, 'br']"></p>
<!--style屬性-->
<!--一個變量：該變量的值為{}，{}內部完成了一個個屬性的設置-->
<p class="gDiv" :style="s1">12345</p>
<!--一個{}，{}內是一個個屬性，由一個個變量單獨控制-->
<p class="gDiv" :style="{fontSize: fs, color: c}">67890</p>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#app', // 掛載點
data: {
oo: 'SGT',
xx: 'JASON',
c1: 'rDiv',
c2: 'br',
s1: {
fontSize: '30px',
color: 'black'
},
fs: '10px',
c: 'orange'
},
methods: {
action1:function () {
if (this.c1=='rDiv'){this.c1='gDiv'}
else{this.c1='rDiv'}
}
},
})
</script>
if條件指令
通過變量控制元素或組件的渲染與否，即控制相關元素的銷毀與重建
<body>
<div id="app">
<!-- 條件指令 v-show | v-if-->
<!-- v-show：消失是以 display: none渲染 -->
<div class="div" v-show="s1">123</div>
<!-- v-if：消失時不會被渲染 -->
<div class="div" v-if="s2">456</div>
</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
s1: false,
s2: true
}
})
</script>
</body>
#).v-show也用于根據條件控制元素的顯示與隱藏，不同的是，v-show無論取何值，元素都會被渲染到dom結構，v-show的取值只是影響元素的display取值。
#).v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
v-model雙向綁定指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message">
</div>
<script src="vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data:{
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
總結
- 上一篇： 网络设备选型（网络布线）
- 下一篇： eth客户端安装 & geth使