目录
- vue基础
- 一、vue简介
- 1、什么是vue
- 2、vue的优势
- 3、特点
- 4、使用vue
- 二、Vue实例
- 1、el:实例
- 2、data 数据
- 3、methods 方法
- 三、插值表达式
- 四、js面向对象补充
- 五、js函数补充
- 六、vue指令
- 1、文本指令
- 2、事件指令
- 3、属性指令
- 一、vue简介
vue基础
渐进式JavaScript 框架
安装vue
一、vue简介
1、什么是vue
前端三大框架之一, 可以独立完成前后端分离式web项目的JavaScript框架
2、vue的优势
- 前端三大主流框架: Angular React Vue
- 先进的前端设计模式: MVVM (Model-View-ViewModel)
- 中文API、可以单页面、组件化开发
3、特点
单页面web应用
数据驱动
数据的双向绑定
虚拟DOM
4、使用vue
- 开发版本:vue.js
- 生产版本:vue.min.js
{{ }}
二、Vue实例
1、el:实例
new Vue({
el: '#app',
});
总结:
- 实例与页面挂载点一一对应
- 一个页面中可以出现多个实例对应的挂载点
- 通常挂载点都采用id选择器
- html与body标签不能作为挂载点
2、data 数据
{{ msg }}
3、methods 方法
{{ msg }}
声明的实例是否用一个变量接收
- 在实例内部不需要,用this就代表vue实例本身
- 在实例外部或其他实例内部就需要, 定义一个变量接收new Vue()产生的实例
三、插值表达式
{{ msg }}
{{ num + msg }}
{{ num * 10 }}
{{ msg[0] }}
{{ msg.split('') }}
四、js面向对象补充
五、js函数补充
箭头函数
function f() {
var a = 1;
let b = 2;
const c = 3;
d = 4;
}
f();
// console.log(a); // let、const定义的变量不能重复定义,且具备块级作用域
// console.log(b);
// console.log(c);
// console.log(d)
function f1() {
console.log('from f1')
}
f1();
let f2 = () => {
console.log('from f2')
};
f2();
// 如果箭头函数没有函数体,只有返回值的情况
let f3 = (x, y) => x + y;
let res = f3(10, 20);
console.log(res);
// 如果箭头函数参数列表只有一个,可以省略括号
let f4 = num => num + 100;
res1 = f4(10);
console.log(res1)
function、箭头函数、方法都具有本质区别
let obj = {
name: 'cwz',
eat: function (food) {
console.log(this); // {name: "cwz", eat: ƒ, eat2: ƒ}
console.log(this.name + '在吃' + food)
},
eat2: food => {
console.log(this); // Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
console.log(this.name + '在吃' + food)
}
};
obj.eat('阿达发');
obj.eat2('雪花')
箭头函数内部是没有this
的,这个this
不能指向当前对象,只能往上找
六、vue指令
1、文本指令
- {{ }}
- v-text :不能解析html语法,会原样输出
- v-html:能解析html语法的文本
- v-once:处理的标签的内容只能被解析一次
{{ msg.split('') }}
2、事件指令
v-on: 事件名="方法变量" 可以简写成 @事件名="方法变量"
事件变量,不添加(),默认会传事件对象: $event
事件变量,添加(),代表要自定义传参,系统不再传入事件对象,但是可以手动传入事件对象
{{ msg }}
{{ action }}
{{ info }}