vue介绍
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> <!-- data为插件表达式中的变量提供数据 --> <!-- data中的数据可以通过Vue实例直接或间接访问-->
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> <!-- 了解v-on:为事件绑定的指令 --> <!-- methods为事件提供实现体-->
<!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"> <!-- 文本指令： 1、{{ }} 2、v-text：不能解析html语法的文本，会原样输出 3、v-html：能解析html语法的文本 4、v-once：处理的标签的内容只能被解析一次 --> <p>{{ msg.split('') }}</p> //[ "m", "e", "s", "s", "a", "g", "e" ] <p v-text="msg.split('')">12345</p> //[ "m", "e", "s", "s", "a", "g", "e" ] <p v-text="info"></p> //<i>info</i> <p v-html="info"></p> //info(斜体 ) <hr> <p v-on:click="pClick" v-once>{{ msg + info }}</p> //message<i>info</i> <p>{{ msg }}</p> //信息 </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'message', info: '<i>info</i>' }, methods: { pClick: function () { this.msg = '信息' } } }) </script> </html>
面向对象js
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>面向对象js</title> </head> <body> <h1>面向对象js</h1> </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:事件名="方法变量"
简写： @事件名="方法变量"
鼠标事件
区分点击对象，事件变量加（），手动传参
<p @click="f8($event, '第一个')">{{ info }}</p>
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"> <!-- 事件指令： v-on:事件名="方法变量" 简写： @事件名="方法变量" --> <p v-on:click="f1">{{ msg }}</p> <p @click="f1">{{ msg }}</p> <hr> <!--mouseover mouseenter | mouseout mouseleave--> <p @mouseover="f2" @mouseout="f3" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p> <hr> <!-- 事件变量，不添加()，默认会传事件对象: $event --> <!-- 事件变量，添加()，代表要自定义传参，系统不再传入事件对象，但是可以手动传入事件对象 --> <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"> <!--属性指令： v-bind:属性名="变量" 简写： :属性名="变量" --> <p style="color: red" class="dd1" abc="def" title="悬浮提示">红色字体</p> <!--1、简单使用--> <p v-bind:title="pTitle" :abc="def" @click="changeImg">简单使用</p> <!--<img :src="img_src" alt="">--> <!--2、class属性绑定--> <!--c1变量的值就是类名--> <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> <!--3、style属性绑定(了解)--> <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>
