Vue
Vue的優勢
目前主流的前端框架有種:angular,react,vue
可以獨立完成前后端分離式web項目的JavaScript框架
vue的優點:
- 有中文API
- 單頁面應用,組件化開發
- 數據雙向綁定
- 虛擬DOM
- 數據驅動思想(相比DOM驅動)
有前兩大框架優點，擯棄缺點；但是沒有前兩個框架健全
Vue實例
let app = new Vue({
el: '#app'
})
// 實例與頁面掛載點一一對應
// 一個頁面中可以出現多個示例對應多個掛載點
// 實例只操作掛載點內部內容
// 一般情況下用id對應(唯一性)
插值表達式
<div id="app">
<p>{{ msg }}</p>
<p>{{ num + 10 }}</p>
<p>{{ msg + num }}</p>
<p>{{ msg[0] }}</p>
<p>{{ msg.split('') }}</p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '我是信息',
num: 10
}
})
</script>
文本指令
文本指令
- {{ }}
- v-text: 不能解析html語法的文本，會原樣輸出
- v-html: 能解析html語法的文本
- v-once: 處理的標簽的內容只能被解析一次
<div id="app">
<p v-text="{{ msg.split('') }}"></p>
<p v-html="info"></p>
<p v-on:click='pClick' v-once></p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '我是信息',
info: '<i>info</i>'
},
methods: {
pClick: function() {
this.msg = 'message'
}
}
})
</script>
事件指令
<div id="app">
<p v-on:click='pClick'>{{ msg }}</p>
<!-- v-on可以簡寫為@ -->
<p @click='pClick'>{{ msg }}</p>
<hr>
<p @mouseover='f2' @mouseout='f3' @mousemove='f4' @contextmenu='f5' @mouseup='f6' @mousedown='f7'>{{ action }}</p>
<hr>
<!-- 事件變量，不添加()，默認會傳事件對象: $event -->
<!-- 事件變量，添加()，代表要自定義傳參，系統不再傳入事件對象，但是可以手動傳入事件對象 -->
<p @click='f8($event, "第一個")'></p>
<p @click='f8($event, "第二個")'></p>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: '未點擊',
action: '鼠標事件'
},
methods: {
pClick () {
this.msg = '點擊了'
},
f2 () {
this.action = '懸浮'
},
f3 () {
this.action = '離開'
},
f4 () {
this.action = '按下'
},
f5 () {
this.action = '抬起'
},
f6 () {
this.action = '移動';
console.log('移動')
},
f7 () {
this.action = '右鍵';
},
f8 (ev, argv) {
console.log(ev, argv);
this.info = argv + '點擊了';
}
}
})
</script>
屬性指令
<style>
.d1 {
width: 200px;
height: 200px;
background-color: orange;
}
.d2 {
border-radius: 50%;
}
.d3 {
border-radius: 20%;
}
</style>
<div id="app">
<!--屬性指令： v-bind:屬性名="變量"
簡寫： :屬性名="變量"-->
<!--1、簡單使用-->
<p v-bind:style="pStyle" @click='pClick'>顏色變換</p>
<!--2、class屬性綁定-->
<p :class="c1"></p>
<!--多類名可以用[]語法，采用多個變量來控制-->
<p :class="[c2, c3]"></p>
<!--選擇器位可以設置為變量，也可以設置為常量-->
<p :class="['d1', c4]"></p>
<!--{類名: 布爾值}控制某類名是否起作用-->
<p :class="{d1: false}"></p>
<!--多種語法混用-->
<p :class="['d1', {d2: true}]" @click="is_true != is_true"></p>
<p :style="{width: w,height: h, backgroundColor: bgc}">樣式屬性</p>
<script>
new Vue({
el:'#app',
data:{
pStyle: {
width: '100px',
height: '100px',
backgroundColor: 'red'
}
c1: 'd1',
c2: 'd1',
c3: 'd2',
c4: 'd3',
is_true: true,
w: '200px',
h: '200px',
bgc: 'red'
},
methods:{
pClick () {
this.pStyle.backgroundColor = 'green'
}
}
})
</script>
</div>
面向對象JS
// undefined、null、string、number、boolean、object(Array)、function
// var、let、const、不寫
// object(Array)、function
function f1() {
console.log('f1 run')
}
f1();
// 構造函數 == 類
function F2(name) {
this.name = name;
this.eat = function (food) {
console.log(this.name + '在' + food);
}
}
let ff1 = new F2("Bob");
console.log(ff1.name);
let ff2 = new F2("Tom");
console.log(ff2.name);
ff1.eat('餃子');
ff2.eat('sao子面');
let obj = {
name: 'Jerry',
// eat: function (food) {
// console.log(this.name + '在' + food)
// },
eat(food) { // 方法的語法
console.log(this.name + '在' + food)
}
};
console.log(obj.name);
obj.eat('hotdog');
JS函數補充
function f() {
d = 40; // 全局變量
}
f();
console.log(d);
const c = 30; // 常量
console.log(c);
if (1) {
var a = 10;
let b = 20; // let、const定義的變量不能重復定義，且具備塊級作用域
}
console.log(a);
// console.log(b);
for (let i = 0; i < 5; i++) {
console.log(i);
}
// console.log(i);
// console.log(i);
// console.log(i);
function f1() {
console.log('f1 run');
}
let f2 = function () {
console.log('f2 run');
};
f2();
let f3 = () => {
console.log('f3 run');
};
f3();
// 如果箭頭函數沒有函數體，只有返回值
let f4 = (n1, n2) => n1 + n2;
let res = f4(10, 25);
console.log(res);
// 如果箭頭函數參數列表只有一個，可以省略()
let f5 = num => num * 10;
res = f5(10);
console.log(res);
// 重點：function、箭頭函數、方法都具有本質區別
let obj = {
name: 'Jerry',
// eat: function (food) {
// console.log(this);
// console.log(this.name + '在吃' + food)
// },
// eat: food => {
// console.log(this);
// console.log(this.name + '在' + food)
// },
eat(food) { // 方法的語法
console.log(this);
console.log(this.name + '在' + food)
}
};
obj.eat('food');
new Vue({
data: {
res: ''
},
methods: {
fn () {
// axios插件
let _this = this;
this.$axios({
url: '',
method: 'get',
data: {
},
}).then(function (response) {
_this.res = response.data;
})
},
fn1 () {
// axios插件
this.$axios({
url: '',
method: 'get',
data: {
},
}).then(response => {
this.res = response.data;
})
}
}
})