vue框架:漸進式JavaScript框架
vue一個環境:能夠只控制頁面中一個標籤、能夠控制一組標籤、能夠控制整個頁面、能夠控制整個項目
vue能夠根據實際需求,選擇控制前端項目的區域範圍css
一、html、css、js直接開發項目,項目雜亂,不方便管理,要纔有前端框架進行開發,規範項目
二、Angular、React、Vue三個前端框架,吸收前兩個框架的全部優勢,摒棄缺點,一手文檔是中文
三、Vue框架優勢:
輕量級
數據驅動
數據的雙向綁定
虛擬DOM(嵌套頁面架構的緩存)
組件化開發
由全球社區維護
單頁面應用、MVVM設計模式html
一、在html頁面中用script標籤導入vue環境
二、vue Vue({ el: "#app" })掛載頁面標籤,創建關聯後控制頁面標籤前端
<body>
<div id="app">
<hr>
<p class="p1">{{ }}</p>
<hr>
<p class="p2">{{ }}</p>
<hr>
<p id="p">
<b>{{ }}</b>
<i>{{ }}</i>
</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
console.log(Vue);
// new Vue({
// el: '.p1',
// });
// new Vue({
// el: '.p2'
// });
// new Vue({
// el: '#p'
// })
// el爲掛載點,纔有css3選擇器語法與頁面標籤進行綁定,決定該vue對象控制的頁面範圍
// 1.掛載點只檢索頁面中第一個匹配到的結果,因此掛載點通常都纔有id選擇器
// 2.html與body標籤不能夠做爲掛載點(組件中解釋)
new Vue({
el: '#app',
})
</script>
三、插值表達式{{ }}能夠完成基礎運算vue
<!-- 一、插值表達式,能完成變量渲染,變量基礎運算,變量方法調用,不能完成複雜運算(一步解決不了的,不能出現;) -->
<p>{{ msg }}</p>
<p>{{ msg + '拼接內容' }}</p>
<p>{{ msg[1] }}</p>
<p>{{ msg.slice(2, 4) }}</p>
四、插值表達式中的變量有實例成員 data 來提供css3
<body>
<div id="app">
<p>{{ msg }}</p>
<p>{{ info }}</p>
<h3>{{ msg }}</h3>
</div>
<div id="main">
<p>{{ msg }}</p>
<p>{{ info }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 實例成員中的data是爲vue頁面模板經過數據變量的
let app = new Vue({
el: '#app',
data: {
msg: 'message',
info: 'vue變量信息'
}
});
let main = new Vue({
el: '#main',
data: {
msg: 'msg',
info: 'info'
}
});
console.log(app.info);
console.log(main.info);
// 建立vue實例(new Vue)傳進去的字典(對象)的key,稱之爲vue實例成員(變量)
// 訪問實例成員,用 vue實例.$成員名, eg:app.$el
console.log(app.$el);
console.log(app.$data);
console.log(app.$data.info);
</script>
五、v-on指令能夠給標籤綁定事件,事件函數由實例成員 methods 來提供設計模式
<body>
<div id="app">
<p class="p1" v-on:click="fn">這是一個段落,被點擊了{{ count }}下</p>
<p class="p2" v-on:mouseover="overAction" v-on:mouseout="outAction" >該便籤被{{ action }}</p>
<div v-on:mouseover="overAction" v-on:mouseout="outAction">div被{{ action }}</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
count: 0,
action: '渲染',
// fn: function () {
// // console.log(app.count);
// // app.count ++
// console.log(this); //在實例成員data下,this不是該vue實例對象,是頂級Window對象
// }
},
// methods就是爲vue實例提供事件函數的
methods: {
fn: function () {
// console.log(app.count);
// app.count ++;
// console.log(this); // 在實例成員methods下,this表明當前該vue實例對象
this.count ++
},
overAction: function () {
this.action = '懸浮'
},
outAction: function () {
this.action = '離開'
}
}
});
</script>
六、插值表達式{{ 變量 | 過濾器 }}的過濾器由實例成員 filters 來提供緩存
<body>
<div id="app">
<!-- 默認將msg做爲參數傳給filterFn -->
<p>{{ msg | filterFn }}</p>
<!--過濾器串聯-->
<p>{{ num | f1 | f2 }}</p>
<!--能夠同時對多個變量進行過濾,變量用,分割,過濾器還能夠額外傳入參數輔助過濾-->
<!--過濾器方法接收全部傳入的參數,按傳入的位置進行接收-->
<p>{{ msg, num | f3(666, '好的') }}</p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本內容',
num: 1
},
filters: {
filterFn(v1, v2) {
// console.log(v1);
// console.log(v2);
return `<b>${v1}</b>`;
},
f1(v1) {
return v1 * 100;
},
f2(v1) {
return v1 * 100;
},
f3(v1, v2, v3, v4) {
console.log(v1);
console.log(v2);
console.log(v3);
console.log(v4);
}
}
})
</script>
七、面向對象js: { 變量, } | function Fn(值){ this.屬性 = 值 } | obj = { 方法(){} }前端框架
<script src="js/vue.js"></script>
<script>
// 1.js中沒有字典,只要對象類型,能夠把對象當作字典來使用
// 2.key本質是屬性名,因此都是字符串類型(能夠出現1,true),其實都是省略引號的字符串
let sex = '男';
let dic = {
'name': 'Owen',
1: 100,
true: 12345,
age: 18,
// sex: 'sex',
sex,
};
console.log(dic['name']);
console.log(dic['1']);
console.log(dic['true']);
console.log(dic['age']);
console.log(dic.sex);
dic.price = 3.5;
console.log(dic.price);
// 聲明類建立對象,類能夠實例化n個對象,哪一個對象調用,this就表明誰
function People(name, age) {
this.name = name;
this.age = age;
this.eat = function () {
console.log(this.name + '在吃飯');
return 123
}
}
let p1 = new People('Owen', 17.5);
console.log(p1.name);
let res = p1.eat();
console.log(res);
// 直接聲明對象,{}內的key都屬於當前對象的
// {}中的方法一般會簡寫
let stu1 = {
name: '張三',
age: 18,
// eat: function () {
// console.log(this.name + '在吃飯');
// }
eat () {
console.log(this.name + '在吃飯');
}
};
stu1.eat()
// 總結:
// 1.{}中直接寫一個變量:key與value是同名,value有該名變量提供值
// 2.es5下,全部的函數均可以做爲類,類能夠new聲明對象,在函數中用 this.資源 爲聲明的對象提供資源
// 3.{}中出現的函數叫方法,方法能夠簡寫 { fn: function(){} } => { fn(){} }
</script>
八、文本指令:{{ }} | v-text="" | v-html=""架構
<body>
<div id="app">
<!--二、v-text:將全部內容作文本渲染 -->
<p v-text="msg + '拼接內容'"></p>
<!--三、v-html:能夠解析html語法標籤的文本 -->
<p v-text="'<b>' + msg + '</b>'"></p>
<p v-html="'<b>' + msg + '</b>'"></p>
<p v-text="`<b>${msg}</b>`"></p>
<p v-html="`<b>${msg}</b>`"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '文本信息'
}
})
</script>
九、事件指令: v-on:事件名="" | @事件名="" | :事件名="fn" | :事件名="fn($event, 自定義參數)"app
<body>
<div id="app">
<!--事件指令:v-on:事件名="事件函數" -->
<!--簡寫:@事件名="事件函數" -->
<p v-on:click="f1">被點擊了{{ count }}下</p>
<hr>
<p @click="f2">{{ p2 }}</p>
<hr>
<!--綁定的事件函數能夠添加(),添加括號就表明要傳遞參數-->
<ul>
<li @click="f3(100)">{{ arr[0] }}</li>
<li @click="f3(200)">{{ arr[1] }}</li>
<li @click="f3(300)">{{ arr[2] }}</li>
</ul>
<ul>
<li @click="f4(0)">{{ arr[0] }}</li>
<li @click="f4(1)">{{ arr[1] }}</li>
<li @click="f4(2)">{{ arr[2] }}</li>
</ul>
<hr>
<!--綁定的事件函數若是沒有傳遞參數,默認傳入 事件對象 -->
<div class="box" @click="f5"></div>
<hr>
<!--事件函數一旦添加傳參(),系統就再也不傳遞任何參數,須要事件對象時,能夠手動傳入 $event -->
<div class="box" @click="f6(10, $event)"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
count: 0,
p2: '第二個p',
arr: [1, 2, 3],
},
methods: {
f1() {
this.count ++
},
f2() {
console.log(this.p2)
},
f3(num) {
console.log(num);
},
f4(index) {
console.log(this.arr[index]);
},
f5(ev, b) {
console.log(ev);
console.log(b);
},
f6(num, ev) {
console.log(num);
console.log(ev);
}
},
})
</script>
十、屬性指令:v-bind:屬性名="" | :title="變量" | :style="字段變量" |
:class="變量" | :class="[變量1, 變量2]" | :class="{類1:真假, 類2:真假}"
<style>
.b1 {
width: 100px;
height: 100px;
background-color: red;
}
.box1 {
width: 150px;
height: 150px;
background-color: darkturquoise;
transition: .3s;
}
.box2 {
width: 300px;
height: 100px;
background-color: darkgoldenrod;
transition: .3s;
}
.circle {
border-radius: 50%;
}
</style>
</head>
<body>
<div id="app">
<!--1.下方的class、id、title、abc等是div標籤的屬性,屬性指令就是控制它們的-->
<div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
<!--2.屬性指令:v-bind:屬性名="變量",簡寫方式 :屬性名="變量" -->
<!--3.屬性指令操做 style 屬性-->
<div style="width: 200px;height: 200px;background-color: greenyellow"></div>
<!-- 一般:變量值爲字典 -->
<div :style="mys1"></div>
<!-- 瞭解:{中能夠用多個變量控制多個屬性細節} -->
<div :style="{width: w,height: '200px',backgroundColor: 'deeppink'}"></div>
<!--重點:通常vue都是結合原生css來完成樣式控制 -->
<!--<div :class="c1"></div>-->
<!--class能夠寫兩份,一份寫死,一份有vue控制-->
<div class="box1" :class="c2"></div>
<!--{}控制類名,key爲類名,key對應的值爲bool類型,決定該類名是否起做用-->
<div :class="{box2:true, circle:cable}" @mouseover="changeCable(1)" @mouseout="changeCable(0)"></div>
<!--[]控制多個類名-->
<div :class="[c3, c4]"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
title: '12345',
xyz: 'opq',
mys1: {
width: '200px',
height: '200px',
// 'background-color': 'greenyellow'
backgroundColor: 'pink',
},
w: '200px',
c1: 'box1',
c2: 'circle',
cable: false,
c3: 'box1',
c4: 'circle'
},
methods: {
changeCable(n) {
this.cable = n;
}
}
});
setInterval(function () {
// app.c1 = app.c1 === 'box1' ? 'box2' : 'box1';
if (app.c1 === 'box1') {
app.c1 = 'box2';
} else {
app.c1 = 'box1';
}
}, 300)
</script>