Vue介绍
前台框架:angular、react、vue
vue:有前两大框架优点,摈弃缺点;没有前两个框架健全
vue优点:中文API、单页面应用、组件化开发、数据双向绑定、虚拟DOM、数据驱动思想(相比DOM驱动)
如何使用Vue
模板:
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="app">
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
}
})
script>
html>
Vue实例
1.el实例
new Vue({
el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点,挂载点采用的是css3选择器语法,但是只能匹配第一次检索到的结果
// 实例只操作挂载点内部内容
// html与body标签不能作为挂载点
2.data数据
<div id='app'> {{ msg }} div> <script> var app = new Vue({ el: '#app', data: { msg: '数据', } }) console.log(app.$data.msg); console.log(app.msg); script>
3.methods方法
<style> .box { background-color: orange } style> <div id='app'> <p class="box" v-on:click="pClick">测试p> <p class="box" v-on:mouseover="pOver">测试p> div> <script> var app = new Vue({ el: '#app', methods: { pClick () { // 点击测试 }, pOver () { // 悬浮测试 } } }) script>
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Vue实例title>
<style>
body {
user-select: none;
}
style>
head>
<body>
<section>
<div id="d1">
{{ msg }}
<p v-on:click="pClick" v-bind:style="pStyle">{{ info }}p>
div>
<hr>
<div class="d2">
{{ }}
div>
<hr>
<div class="d2">
{{ }}
div>
section>
body>
<script src="js/vue.js">script>
<script>
`
console.log(Vue);
let app = new Vue({
el: '#d1', // 挂载点:vue实例与页面标签建立关联
});
new Vue({
el: '.d2', // 挂载点采用的是css3选择器语法,但是只能匹配第一次检索到的结果
});
`;
// 总结:
// 1、通常挂载点都采用id选择器(唯一性)
// 2、html与body标签不能作为挂载点(组件知识点解释)
// new Vue({
// el: 'body'
// })
let app = new Vue({
el: 'section',
data: { // data为挂载点内部提供数据
msg: 'message',
info: '信息',
pStyle: {
color: 'yellowgreen'
}
},
methods: {
pClick: function () {
if (app.pStyle.color !== 'yellowgreen') {
app.pStyle.color = 'yellowgreen'
} else {
app.pStyle.color = 'red'
}
console.log(app.msg);
console.log(app.pClick);
console.log(this.msg);
console.log(this.pClick);
}
}
});
// 声明的实例是否用一个变量接收
// 1、在实例内部不需要,用this就代表当前vue实例本身
// 2、在实例外部或其他实例内部需要,定义一个变量接收new Vue()产生的实例
console.log(app.msg)
script>
html>
插值表达式
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="app">
<p>{{ msg }}p> //msg
<p>{{ num * 10 }}p> //100
<p>{{ msg + num }}p> //msg10
<p>{{ msg[1] }}p> //s
<p>{{ msg.split('') }}p> //["m","s","g"]
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
msg: 'msg',
num: 10
}
})
script>
html>
文本指令
v-text:不能解析html语法的文本,会原样输出
v-html:能解析html语法的文本
v-once:处理的标签的内容只能被解析一次
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="app">
<p>{{ msg.split('') }}p> //[ "m", "e", "s", "s", "a", "g", "e" ]
<p v-text="msg.split('')">12345p> //[ "m", "e", "s", "s", "a", "g", "e" ]
<p v-text="info">p> //<i>infoi>
<p v-html="info">p> //info(斜体 )
<hr>
<p v-on:click="pClick" v-once>{{ msg + info }}p> //message<i>infoi>
<p>{{ msg }}p> //信息
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
msg: 'message',
info: 'info'
},
methods: {
pClick: function () {
this.msg = '信息'
}
}
})
script>
html>
面向对象js
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>面向对象jstitle>
head>
<body>
<h1>面向对象jsh1>
body>
<script>
// undefined、null、string、number、boolean、object(Array)、function
// var、let、const、不写
// object(Array)、function
function f1() {
console.log('f1 run')
}
f1(); //f1 run
// 构造函数 == 类
function F2(name) {
this.name = name;
this.eat = function (food) {
console.log(this.name + '在' + food);
}
}
let ff1 = new F2("Bob");
console.log(ff1.name); //f1 Bob
let ff2 = new F2("Tom");
console.log(ff2.name); //f1 Tom
ff1.eat('饺子'); //Bob在饺子
ff2.eat('sao子面'); //Tom在sao子面
let obj = {
name: 'Jerry',
// eat: function (food) {
// console.log(this.name + '在' + food)
// },
eat(food) { // 方法的语法
console.log(this.name + '在' + food)
}
};
console.log(obj.name); //Jerry
obj.eat('hotdog'); // Jerry在hotdog
script>
html>
js的函数
var let count d
function f() { d = 40; // 全局变量 } f(); console.log(d); const c = 30; // 常量 // c = 20 常量不能被修改 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、箭头函数、方法
箭头函数
// 如果箭头函数没有函数体,只有返回值
let f4 = (n1, n2) => n1 + n2;
let res = f4(10, 25);
console.log(res); //35
// 如果箭头函数参数列表只有一个,可以省略(),如果没有参数,或者参数大于1个,必须写()
let f5 = num => num * 10;
res = f5(10);
console.log(res); //100
// 重点:function、箭头函数、方法都具有本质区别
let obj = {
name: 'Jerry',
// eat: function (food) {
// console.log(this); this指的是obj
// console.log(this.name + '在吃' + food)
// }, Jerry在吃food
// eat: food => {
// console.log(this); this指的是window即箭头函数不能产生this
// console.log(this.name + '在' + food)
// }, 在food
eat(food) { // 方法的语法
console.log(this);
console.log(this.name + '在' + food)
}
}; //Jerry在吃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;
})
}
}
})
事件指令
事件指令: v-on:事件名="方法变量"
简写: @事件名="方法变量"
鼠标事件
区分点击对象,事件变量加(),手动传参
{{ info }}
f8 (ev, argv) {
console.log(ev, argv);
this.info = argv + '点击了';
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>title>
head>
<body>
<div id="app">
<p v-on:click="f1">{{ msg }}p>
<p @click="f1">{{ msg }}p>
<hr>
<p @mouseover="f2" @mouseout="f3" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}p>
<hr>
<p @click="f8($event, '第一个')">{{ info }}p>
<p @click="f8($event, '第二个')">{{ info }}p>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
msg: '点击切换',
action: '鼠标事件',
info: '确定点击者'
},
methods: {
f1 () {
this.msg = '点击了'
},
f2 () {
this.action = '悬浮';
console.log('悬浮')
},
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>
html>
属性指令
属性指令: v-bind:属性名="变量"
简写: :属性名="变量"
DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>title>
<style>
.d1 {
width: 200px;
height: 200px;
background-color: orange;
}
.d2 {
border-radius: 50%;
}
.d3 {
border-radius: 20%;
}
style>
head>
<body>
<div id="app">
<p style="color: red" class="dd1" abc="def" title="悬浮提示">红色字体p>
<p v-bind:title="pTitle" :abc="def" @click="changeImg">简单使用p>
<p :class="c1">p>
<p :class="[c2, c3]">p>
<p :class="['d1', c4]">p>
<p :class="{x1: false}">p>
<p :class="['d1', {d2: is_true}]" @click="is_true = !is_true">p>
<p :style="myStyle">样式属性p>
<p :style="{width: w,height: h, backgroundColor: bgc}">样式属性p>
div>
body>
<script src="js/vue.js">script>
<script>
new Vue({
el: '#app',
data: {
pTitle: '简单使用',
def: '自定义属性',
img_src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3819296004,574391848&fm=26&gp=0.jpg',
c1: 'd1 d2',
c2: 'd1',
c3: 'd3',
c4: 'd3',
is_true: true,
myStyle: {
width: '100px',
height: '100px',
backgroundColor: 'red'
},
w: '200px',
h: '100px',
bgc: 'green'
},
methods: {
changeImg() {
this.img_src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1371195756,4187769521&fm=26&gp=0.jpg'
}
}
})
script>
html>