Day 65 Vue简介与指令/js函数补充
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;
})
}
}
})
