vue多数用的都是es6语法
前戏
let的特点
1.局部作用域,(let代码块内部生效,外部不能使用这个变量)
if (1){
let a = 'xxoo';
}
console.log(a); //报错
if (1){
var b = 'xxoo';
}
console.log(b); // 可以使用,但是函数不行
2.不存在变量提升
console.log(xx); //undefined
var xx = 'oo';
console.log(xxx); //报错
let xxx = 'ooo';
3.不能重复声明(与var不能同时声明一个变量)
var s = 6;
let s = 6; // 会报错
4.let声明的变量不从属于window对象,var声明的变量从属于window对象
var th = 5
window.th
5
let sh = 6;
window.sh
undefined
关于第4个特点的简单说明:
ES5声明变量只有两种方式: var和function
ES6有let、const、import、class、var、function共有6种声明变量的方式。
还需要了解顶层对象:浏览器环境中顶层对象是window
ES5中,顶层对象的属性等价于全局变量。
ES6中,有所改变var、function声明的是全局变量,依然是顶层对象的属性;let、const、class声明的全局变量不属于顶层对象的属性,也就是说ES6开始,全局变量和顶层对象的属性开始分离,脱钩,目的是以防声明的全局变量将window对象的属性造成污染,因为window对象是顶层对象,它里面的属性是各个js程序中都可以使用的,不利于模块化开发,并且window对象有很多的自有属性,也为了防止对window的自有属性的污染,所以在ES6中将顶层对象和全局变量进行隔离。
const的特点
1.局部作用域
2.不存在变量提升
3.不能重复声明(与var和let)
4.不能重新赋值
5.一般用来声明不可变的量(常量)
模板字符串:tab键上面的反引号,${变量名}来插入值,类似于python中的三引号,可以写多行文本
示例:
let bb = 'jj';
var ss = `你好${bb}`;
console.log(ss); -- '你好jj'
ES5全局和局部变量的作用域
函数的全局变量和局部变量
局部变量:
在JavaScript函数内部声明的变量是局部变量,所以只能在函数内部访问它(该变量的作用域是函数内部)。只要函数运行完毕,本地变量就会被删除。
全局变量:
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
变量生存周期:
JavaScript变量的声明周期从它们被声明的时间开始
局部变量会在函数运行以后被删除
全局变量会在页面关闭后被删除
作用域
首先在函数内部查找变量,找不到则到外层函数查找,逐步找到最外层。
ES5和ES6的函数对比
//ES5写法
function add(x){
return x
}
add(5);
//匿名函数
var add = function (x) {
return x
};
add(5);
//ES6的匿名函数
let add = function (x) {
return x
};
add(5);
//ES6的箭头函数,就是上面方法的简写形式
let add = (x) => {
return x
};
console.log(add(20));
//更简单的写法，但不是很易阅读
let add = x => x;
console.log(add(5));
多个参数的时候必须加括号，函数返回值还是只能有一个，没有参数的，必须写一个()
let add = (x,y) => x+y;
自定义对象中封装函数的写法
//es5对象中封装函数的方法
var name = '子俊';
var person1 = {
name:'超',
age:18,
f1:function () { //在自定义的对象中放函数的方法
console.log(this);//this指向的是当前的对象,{name: "超", age: 18, f1: ƒ}
console.log(this.name) // '超'
}
};
person1.f1(); //通过自定对象来使用函数
//ES6中自定义对象中来封装箭头函数的写法
let username = '子俊'; //-- window.username
let person2 = {
name:'超',
age:18,
//f1:function(){};
f1: () => { //在自定义的对象中放函数的方法
console.log(this); //this指向的不再是当前的对象了，而是指向了person的父级对象(称为上下文)，而此时的父级对象是我们的window对象，Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
console.log(window);//还记得window对象吗，全局浏览器对象，打印结果和上面一样：Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
console.log(this.username)
}
};
person2.f1(); //通过自定对象来使用函数
//而我们使用this的时候,希望this是person对象,而不是window对象,所以还有下面这种写法
let person3 = {
name:'超',
age:18,
//f1:function(){};
//f1(){}
f1(){ //相当于f1:function(){},只是一种简写方式,称为对象的单体模式写法，写起来也简单，vue里面会看用到这种方法
console.log(this);//this指向的是当前的对象,{name: "超", age: 18, f1: ƒ}
console.log(this.name) //'超'
}
};
person3.f1()
一.Vue的准备工作
1.1 vue.js库的下载
vue.js是目前前端web开发最流行的工具库,由尤雨溪在2014年2月发布的
另外几个常见的工具库: react.js/angular.js
官方网站:
官方文档:https://cn.vuejs.org/v2/guide/
在github下载：https://github.com/vuejs/vue/releases
在官网下载地址： https://cn.vuejs.org/v2/guide/installation.html
1.2vue.js库的基本使用
vue的引入类似于jQuery,开发中可以使用开发版本vue.js,产品上线要换成vue.min.js
总结:
1.vue的使用要从创建Vue对象开始
let vm = new Vue();
2.创建vue对象的时候,需要传递参数,是自定义对象,自定义对象必须至少有两个属性成员
let vm = new Vue({
el:'#app',
data(){
},
})
el:圈地,划分地盘,设置vue可以操作的html内容范围,值就是css的id选择器,其他选择器也可以,但是多用id选择器。
data:保存vue.js中要显示到html页面的数据
3.vue.js要控制其内容,外围必须通过id来设置
<div id="app">
<h1>{{message}}</h1>
<p>{{message}}</p>
</div>
vue中的变量可以直接进行一些简单直接的js操作
1.3Vue.js的M-V-VM思想
MVVM是Model-View-ViewMode的缩写,它是一种基于前端开发的架构模式。
Model指代的是vue对象的data属性里面的数据。这里的数据要显示到页面中。
View指代的就是vue中数据要显示的HTML页面,在vue中,也称之为"视图模板"。
ViewModel指代的是vue.js中我们编写代码时的vm对象,它是vue.js的核心,负责连接View和Model,保证视图和数据的一致性,所以前面代码中,data里面的数据被显示到标签中就是vm对象自动完成的。
在浏览器中可以通过console.log对vm对象可以直接访问el和data属性,甚至可以访问data里面的数据
console.log(vm.$el) # vm对象可以控制的范围
console.log(vm.#data); # vm对象要显示到页面中的数据
console.log(vm.message) # 这个message就是data里面声明的数据,也可以使用vm.变量名显示其他数据
总结:
1.如果要输出data里面的数据作为普通标签的内容,需要使用{{ }}
用法:
vue对象的data属性:
data(){ //单体模式
return{
name:'小明',
}
}
标签元素:
<h1>{{ name }}</h1>
2.如果要输出data里面的数据作为表单元素的值,需要使用vue.js提供的元素属性v-model
用法:
vue对象的data属性:
data(){
return{
name:'小明',
}
}
表单元素:
<input v-model='name'> # 一定不要加{{ }}
使用v-model把data里面的数据显示到表单元素以后,一旦用户修改表单元素的值,则页面中凡是用了这个数据的地方都会发生变化,但是data里面对应的值不会改变,页面刷新恢复原来最初设置的值。
二.Vue指令系统的常用指令
指令(Directives)是带有"v-"前缀的特殊属性,每一个指令在vue中都有固定的作用。
在vue中提供了很多指令,常用的有:v-html,v-text,v-if,v-model,v-for等等。
2.1文本指令v-html和v-text
v-text相当于js代码的innerText,直接在html中插入文本内容,若果data里面写了个标签,那么通过模板语法渲染的是文本内容。
v-html相当于innerHtml,可以识别标签并生成标签。
指令会在vm对象的data属性的数据发生变化时,同时改变元素中的其控制的内容或属性
因为vue的历史版本原因,所以有一部分指令都有两种写法:
vue1.x写法 vue2.x写法
v-html {{}} # vue2.x 也支持v-html
v-bind:属性名 :属性
v-on:事件名 @事件名
2.2条件渲染指令v-if和v-show
vue中提供了两个指令用于判断是否要显示元素,分别是v-if和v-show
2.2.1 v-if
标签元素:
<!-- vue对象最终会把条件的结果编程布尔值 -->
<h1 v-if="ok">yes</h1>
data数据
data(){
return{
ok:false, // true则显示,false是隐藏
}
}
2.2.2 v-else
v-else指令来表示v-if的else块,v-else元素必须紧跟在带v-if或者v-else-if的元素后面,否则它将不会被识别。
标签元素：
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
2.2.3 v-else-if
在vue2.1.0版本之后，又添加了v-else-if，v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用。
可以出现多个v-else-if语句，但是v-else-if之前必须有一个v-if开头。后面可以跟着v-else，也可以没有。
标签元素：
<h1 v-if="num===1">num的值为1</h1>
<h1 v-else-if="num===2">num的值为2</h1>
<h1 v-else>num的值是{{num}}</h1>
data数据：
data:{
num:2
}
2.2.4 v-show
标签元素：
<h1 v-show="ok">Hello!</h1>
data数据：
data:{
ok:false // true则是显示，false是隐藏
}
简单总结v-if和v-show
v-show后面不能接v-else-if和v-else
v-show隐藏元素时,使用的是display:none来隐藏的,而v-if是直接从HTML文档中移除元素[DOM操作中的remove]
v-if 是'真正'的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
v-if 也是惰性的: 如果在初始渲染时条件为假,则什么也不做一直到条件第一次变为真时,才会开始渲染条件块
相比之下,v-show就简单得多,不管初始条件是什么,元素总会被渲染,并且只是简单地基于CSS进行切换
一般来说,v-if有更高的切换开销,而v-show有更高的初始渲染开销,因此,如果需要非常频繁地切换,则使用v-show,如果在运行时条件很少改变,则使用v-if较好
2.3 操作属性v-bind
格式:
<标签名 :变迁属性='data属性'></标签名>
<p :title="str1">{{ str1 }}</p> <!-- 也可以使用v-html显示双标签的内容，{{ }} 是简写 -->
<a :href="url2">淘宝</a>
<a v-bind:href="url1">百度</a> <!-- v-bind是vue1.x版本的写法 -->
例1.显示密码切换效果:配合v-on事件绑定
2.4事件绑定v-on和methods属性
有两种事件操作的写法,@事件名和v-on:事件名
<button v-on:click="num++">按钮</button> <!-- v-on 是vue1.x版本的写法 -->
<button @click="num+=5">按钮2</button>
总结:
1. 使用@事件名来进行事件的绑定
语法：
<h1 @click="num++">{{num}}</h1>
2. 绑定的事件的事件名，全部都是js的事件名：
@submit ---> onsubmit
@focus ---> onfocus
....
例2.商城的商品增减数量
2.5操作样式
2.5.1控制标签class类名
格式:
<h1 :class="值">元素</h1> 值可以是对象,对象名,数组(数组的方式比较少)