前端-vue框架介紹
vue介紹
漸進式javascript框架html
js是頁面腳本語言，用來控制或是輔助頁面搭建，js功能的集合體，vue能夠更好更強大的去管理頁面前端
1）vue能夠控制一個頁面中的一個標籤vue
2）vue能夠控制一個頁面java
3）vue能夠控制整個項目web
js要控制頁面，須要在頁面中script引入js==>vue項目就只有一個頁面==>組件化開發設計模式
優勢：數組
1.三大前臺框架：Angular、React、Vue vue：綜合前兩個框架的優勢（輕量級）、一手文檔是中文（上手快）、vue徹底開源（免費） 2.單頁面web應用 - 服務於移動端 - 客戶端只須要問後臺索要數據 3.MVVM設計模式 4.數據驅動 - 區別於DOM驅動（DOM加載後才能操做） - 在緩存中根據數據處理dom，再渲染給真實dom 5.虛擬dom - 頁面的緩存機制 6.數據的雙向綁定 - 頁面中變量相同，數據就相同，實時被檢測
vue的使用
引入
# 官網下載vue文件並引入前端頁面 <script src="js/vue.js"></script>
掛載點
利用new vue實例化對象，經過掛載點與頁面創建關聯緩存
# 掛載點
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue導入</title>
<style>
h1 {
color: red;
}
h2 {
color: pink;
}
</style>
</head>
<body>
<div id="app">
<div>
<h1>{{ }}</h1>
<h2>{{ }}</h2>
</div>
<div>
<h1>{{ }}</h1>
<h2>{{ }}</h2>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// new Vue({
// // 掛載點：vue實例(對象)經過掛載點與頁面創建關聯
// el: 'h1'
// });
// new Vue({
// el: 'h2'
// })
new Vue({
// 掛載點只遍歷第一個匹配的結果
// html與body標籤不能夠做爲掛載點
// 掛載點的值通常就採用id選擇器(惟一性)
el: '#app'
})
</script>
</html>
插值表達式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<!--插值表達式-->
<h1>{{ msg.split('')[0] }}</h1>
<h2>{{ info + msg }}</h2>
<h3>{{ num * num }}</h3>
<h4>{{ num | my_filter }}</h4>
<h4>{{ a, b | f1(c, d) | f2 }}</h4>
<h4>{{ arr | f3 }}</h4>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.filter('my_filter', function (v) {
console.log(v);
return 999
});
Vue.filter('f1', function (a, b, c, d) {
console.log(a, b, c, d);
// return '過濾後的邏輯結果'
return a + b + c + d
});
Vue.filter('f2', function (v) {
console.log(v);
return v * v
});
Vue.filter('f3', function (v) {
let new_arr = [];
for (n of v) {
if (n >= 60) {
new_arr.push(n)
}
}
return new_arr
});
new Vue({
el: '#app',
// data成員用來爲vue控制的變量提供值
data: {
msg: 'message',
info: '信息',
num: 10,
a: 1,
b: 2,
c: 3,
d: 4,
arr: [23, 59, 62, 97]
}
})
</script>
</html>
文本指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本指令</title>
</head>
<body>
<div id="app">
<!--文本指令：
{{ 變量表達式 }}
v-text="變量表達式"
v-html="html標籤可被解析"
v-once="限制的變量"，內容仍是經過上方三者完成渲染
-->
<h2 v-text="msg + '!!!'"></h2>
<h2 v-text="htm"></h2>
<h2 v-html="htm"></h2>
<input type="text" v-model="msg">
<h3>{{ msg }}</h3>
<!--一次性渲染，插值表達式中的任何一個變量被限制，整個結果就不可變-->
<h3 v-once="htm">{{ msg + htm }}</h3>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'message',
htm: '<i>標籤內容是否被解析</i>'
}
})
</script>
</html>
屬性指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>屬性指令 - 控制樣式</title>
<style>
.div {
width: 200px;
height: 200px;
background-color: red;
}
.box {
width: 200px;
height: 200px;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
</style>
</head>
<body>
<div id="app">
<div class="div" style="border-radius: 50%"></div>
<!--屬性指令：v-bind:屬性名="屬性值" => v-bind: 能夠簡寫爲 :
eg: v-bind:style="{color: 'red'}"
-->
<!--自定義屬性：沒有太多應用場景-->
<div abc="xyz"></div>
<div v-bind:abc="xyz"></div>
<!--title屬性-->
<div :title="xyz" class="div" style="border-radius: 50%"></div>
<!--style屬性-->
<!--1）變量：變量的值爲字典-->
<div :style="my_style"></div>
<!--2）字典中的多個變量-->
<div :style="{width: w, height: h, background: b}"></div>
<!--class屬性-->
<!--<div class="box blue"></div>-->
<div :class="c"></div>
<div :class="[c1, c2]"></div>
<div :class="[c1, 'blue']"></div>
<!--x爲類名，是否生效有變量y(true|false)值決定-->
<div :class="{x: y}"></div>
<div :class="[{'box': true}, c2]"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
xyz: 'ABC',
my_style: {
width: '100px',
height: '100px',
'background-color': 'cyan',
borderRadius: '50%'
},
w: '50px',
h: '50px',
b: 'red',
c: 'box blue',
c1: 'box',
c2: 'green',
y: true,
}
})
</script>
</html>
事件指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件指令</title>
<style>
.div {
width: 200px;
height: 200px;
background-color: red;
}
/*沒有vue，不顯示，有vue，會移除該屬性 => 沒有閃爍的顯示內容*/
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<!--事件指令 v-on:事件名="fn變量" => v-on: 能夠簡寫爲 @
v-on:click="clickAction"
@dblclick="dblclickAction"
-->
<!--內容操做：每點一次，內容+1-->
<h2 v-once="num">{{ num }}</h2>
<h2>{{ num }}</h2>
<div v-on:click="clickAction" class="div">{{ num }}</div>
<hr>
<!--樣式操做：點擊切換背景顏色-->
<div @click="changeColor" class="div" :style="{backgroundColor: bgColor}"></div>
<!--樣式操做：點擊切換總體樣式-->
<div @click="changeStyle" :style="my_style"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
num: 100,
bgColor: 'cyan',
my_style: {
width: '100px',
height: '100px',
backgroundColor: 'orange'
}
},
methods: {
clickAction: function () {
// console.log(app.num);
// console.log(this.num);
this.num ++
},
changeColor () { // 方法的寫法
// if (this.bgColor == 'cyan') {
// this.bgColor = 'blue'
// } else {
// this.bgColor = 'cyan'
// }
// this.bgColor = 'cyan' if this.bgColor != 'cyan' else 'blue'
this.bgColor = this.bgColor != 'cyan' ? 'cyan' : 'blue'
},
changeStyle: () => { // 這種寫法，內部拿不到this(指向的是window)
app.my_style = app.my_style.backgroundColor == 'orange' ?
{
width: '200px',
height: '200px',
backgroundColor: 'yellow'
}
:
{
width: '100px',
height: '100px',
backgroundColor: 'orange'
}
}
}
});
console.log(app);
console.log(app.$el);
console.log(app.$data.num);
console.log(app.num);
</script>
</html>
事件指令傳參
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
text-align: center;
line-height: 50px;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<!--沒有傳值默認傳 事件對象 -->
<div @click="btnClick1">{{ msg }}</div>
<!--方法()不會直接調用方法，而是在點擊觸發後進行傳參，接收到的參數就是傳入的參數-->
<div @click="btnClick2(1, msg)">{{ msg }}</div>
<!--一旦書寫 方法() 就再也不傳入事件對象，經過 $event 手動傳入事件對象-->
<div @click="btnClick3(msg, $event, $event)">{{ msg }}</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: 'box'
},
methods: {
btnClick1(ev) {
console.log(ev);
console.log(ev.clientX);
},
btnClick2(a, b, c) {
console.log(a, b, c)
},
btnClick3(a, b, c) {
console.log(a, b, c)
},
}
})
</script>
</html>
表單指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單指令</title>
</head>
<body>
<div id="app">
<form action="">
<!--表單指令：v-model="變量"-->
<!--雙向綁定：一個地方修改值，全部地方的數據都會被更新-->
<div>
<input type="text" v-model="info" name="usr">
<input type="password" v-model="info" name="pwd">
<p>{{ info | infoFilter }}</p>
</div>
<div>
<!--單選框：v-model="變量存放的是某個單選框的value值，表明該選框選中"-->
男<input type="radio" name="sex" value="male" v-model="sex_val">
女<input type="radio" name="sex" value="female" v-model="sex_val">
</div>
<div>
<!--單獨的複選框：v-model="true|false表明該選框是否選中"-->
是否贊成<input v-model="cb_val" value="yes" type="checkbox" name="agree">
</div>
<div>
<!--羣複選框：v-model="存放選中選框value的數組"-->
男<input v-model="cbs_val" value="male" type="checkbox" name="hobby">
女<input v-model="cbs_val" value="female" type="checkbox" name="hobby">
哇塞<input v-model="cbs_val" value="others" type="checkbox" name="hobby">
<p>{{ cbs_val }}</p>
</div>
<div>
<input type="submit">
</div>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.filter('infoFilter', (info) => {
return info ? info : '初始內容'
});
new Vue({
el: '#app',
data: {
info: '',
sex_val: 'female',
cb_val: 0,
cbs_val: ["others"]
}
})
</script>
</html>
條件指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.btn1 { width: 400px; }
.box {
width: 200px;
height: 200px;
float: left;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.red { background-color: red }
.blue { background-color: blue }
</style>
<style>
.btn-wrap { height: 25px }
.btn {
width: 100px;
height: 25px;
float: left;
}
.page {
width: 300px;
height: 150px;
}
.p1 { background-color: pink }
.p2 { background-color: yellow }
.p3 { background-color: green }
</style>
</head>
<body>
<div id="app">
<!--條件指令
v-if="true|false"
v-show="true|false"
-->
<button class="btn1" @click="btnClick">{{ title }}</button>
<div class="wrap">
<!--v-if隱藏時不渲染，v-show隱藏時用display:none渲染-->
<!--v-if隱藏時在內存中創建緩存，能夠經過key屬性設置緩存的鍵-->
<div class="box red" v-if="is_show" key="box_red"></div>
<div class="box blue" v-show="is_show"></div>
</div>
<div class="btn-wrap">
<button class="btn" @click="changePage('pink')">粉</button>
<button class="btn" @click="changePage('yellow')">黃</button>
<button class="btn" @click="changePage('green')">綠</button>
</div>
<div>
<div class="page p1" v-if="page == 'pink'"></div>
<div class="page p2" v-else-if="page == 'yellow'"></div>
<div class="page p3" v-else></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
title: '隱藏',
is_show: true,
page: localStorage.page || 'pink'
},
methods: {
btnClick() {
this.title = this.title == '隱藏' ? '顯示' : '隱藏';
this.is_show = !this.is_show;
},
changePage(page) {
this.page = page;
localStorage.page = page; // 永久緩存
// sessionStorage.page = page; // 臨時緩存
}
}
})
</script>
</html>
相關文章
- 1. 前端框架VUE
- 2. VUE前端框架
- 3. vue 前端框架
- 4. Vue前端框架
- 5. 前端框架vue
- 6. 【bird-front】前端框架介紹
- 7. 項目前端頁面框架介紹
- 8. 前端單元測試框架介紹
- 9. 前端框架Vue簡介01
- 10. 三種Web前端框架比較與介紹--Vue, react, angular
- 更多相關文章...
- • 網站主機 介紹 - 網站主機教程
- • Docker 架構 - Docker教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 前端框架VUE
- 2. VUE前端框架
- 3. vue 前端框架
- 4. Vue前端框架
- 5. 前端框架vue
- 6. 【bird-front】前端框架介紹
- 7. 項目前端頁面框架介紹
- 8. 前端單元測試框架介紹
- 9. 前端框架Vue簡介01
- 10. 三種Web前端框架比較與介紹--Vue, react, angular