ES6、VUE
文章目录
一、ES6简介
ECMAScript (ES6)是JavaScript语言的标准，JavaScript是这种标准的实现
二、ES6基本语法
1. let声明变量
<script>
//传统js定义变量：var a = 1;
//ES6写法定义变量：let a = 10;
//let定义变量有作用范围，只可在代码块内使用，外部无法使用
//1. 创建代码块，定义变量
{
var a = 10
let b = 20
}
//2. 在代码块外面输出
console.log(a) //10
console.log(b) //报错：Uncaught ReferenceError: b is not defined
</script>
//let不能多次定义相同的变量名
let m = 10
let m = 20
console.log(m)
//报错：Uncaught SyntaxError: Identifier 'm' has already been declared
</script>
2. const声明常量
<script>
//定义常量时必须初始化值
const PI = "3.1415"
//常量值一旦定义，不能改变
PI = 3 //报错：Uncaught TypeError: Assignment to constant variable.
</script>
3. 数组解构
<script>
//传统写法
let a=1,b=2,c=3
console.log(a, b, c) //1 2 3
//es6写法
let [x,y,z] = [10,20,30]
console.log(x, y, z) //10 20 30
</script>
4. 对象解构
<script>
//定义对象
let user = {
"name":"lucy","age":20}
//传统从对象里面获取值
let name1 = user.name
let age1 = user.age
console.log(name1+"=="+age1) //lucy==20
//es6获取对象值
let {
name,age} = user //变量名必须是对象中的属性
console.log(name+"**"+age) //lucy**20
</script>
5. 模板字符串
<script>
//1 使用``符号实现语句内换行，此符号在主键盘1的左侧，非双引号
let str1 = `hello,
es6 demo up!`
console.log(str1) //会自动根据内容换行
//2 在``符号里面使用${变量名}获取变量的值
let name = "Mike"
let age = 20
let str2 = `hello,${
name},age is ${
age+1}`
console.log(str2) //hello,Mike,age is 21
//3 在``符号里面使用${函数名()}调用函数
function f1() {
return "hello f1"
}
let str3 = `demo, ${
f1()}`
console.log(str3) //demo, hello f1
</script>
6. 使用已有变量的值定义对象
<script>
const age = 12
const name = "lucy"
//传统方式定义对象
const p1 = {
name:name,age:age}
console.log(p1)
/* age: 12
name: "lucy */
//es6方式定义对象
const p2 = {
name,age} //属性名需要和变量名相同
console.log(p2)
/* age: 12
name: "lucy */
</script>
7. 定义方法
<script>
//传统方式定义方法
const person1 = {
sayHi:function(){
console.log("Hi")
}
}
//调用
person1.sayHi() //Hi
//es6方式定义方法时少写 ":function" 关键字
const person2 = {
sayHi(){
console.log("Hi")
}
}
//调用
person2.sayHi(); //Hi
</script>
8. 对象扩展运算符…
<script>
//1 对象复制
let person1 = {
"name":"lucy","age":20}
let person2 = {
...person1}
console.log(person2) //成功复制了person1对象的内容
//2 对象合并
let name = {
name:'mary'}
let age = {
age:30}
let p2 = {
...name,...age}
console.log(p2)
/* age: 30
name: "mary" */
</script>
9. 箭头函数
var 方法名 = 参数 => 方法体
<script>
//示例一：
//传统方式创建方法
var f1 = function(m) {
return m+1
}
console.log(f1(2)) //3
//使用箭头函数改造，等效于上述方法
var f2 = m => m+1 //箭头前表示参数，箭头后表示方法体
console.log(f2(2)) //3
//当箭头函数没有参数或有多个参数时需要使用()括起来
//当箭头函数函数体中有多条语句时需要使用{}包裹起来
//当箭头函数函数体中只有一行语句并且需要返回结果时，可以省略{}
//示例二：
var f3 = (a, b) => {
let result = a + b;
return result;
}
console.log(f3(6, 2)); //8
</script>
三、VUE介绍
VUE (Vue.js)是一套用于构建用户界面的渐进式框架，只关注视图层，便于与第三方库整合
四、VUE的基本使用
-
在当前文件夹中引入vue.js文件 (可以在磁盘中引入)
-
在vs code中HTML页面输入”!”号，可以自动补全HTML页面的结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
- 补全VUE需要的代码
<!-- body标签中定义vue需要的结构 -->
<!-- id属性自定义 -->
<div id="app">
<!-- {
{属性名}} 插值表达式，获取vue对象中的data数据 -->
{
{message}}
</div>
<!-- 引入当前文件夹中的vue.js文件 -->
<script src="vue.min.js"></script>
<script>
// 创建一个vue对象
new Vue({
el: '#app', //绑定vue作用的范围
data: {
//定义页面中显示的模型数据
message: 'Hello Vue!'
}
})
</script>
- 运行结果
五、VS Code中创建代码片段
代码片段：通过快捷键即可将一些代码自动补全(类似于之前的”!”号)
- 创建补全vue的代码片段文件
- 向代码片段中写入如下内容
{
"vue htm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
" <title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
" <script src=\"vue.min.js\"></script>",
" <script>",
" new Vue({",
" el: '#app',",
" data: {",
" $1",
" }",
" })",
" </script>",
"</body>",
"",
"</html>",
],
"description": "my vue template in html"
}
}
- 使用效果
在html文件中输入指定前缀vuehtml，即可自动补全如下代码 (vue.js文件在当前文件夹下)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
</body>
</html>
六、VUE基本语法
1. v-bind指令
<body>
<div id="app">
<!-- v-bind指令表示单向数据绑定，这个指令一般用在标签属性里面获取值-->
<!-- 在属性名之前写v-bind:，属性值使用vue对象data中的属性名，
即可获取vue对象data中属性名对应的值-->
<h1 v-bind:title="message">
{
{content}} <!--光标放在content内容上，会出现页面加载于....-->
</h1>
<!--简写方式，省略v-bind，直接使用：-->
<h2 :title="message">
{
{content}} <!--效果与上述相同-->
</h2>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
content: '我是标题',
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
</body>
2. v-model指令
<body>
<div id="app">
<!-- v-model指令表示双向绑定 -->
<!-- 单向绑定，它的值更改，不会影响其他使用此值的地方-->
<input type="text" v-bind:value="searchMap.keyWord"/>
<!-- 双向绑定，不需要属性值，它的值一旦更改，所有使用此值的地方都会随之更改-->
<input type="text" v-model="searchMap.keyWord"/>
<p>{
{searchMap.keyWord}}</p>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyWord: '周杰伦'
}
}
})
</script>
</body>
3. 事件操作
vue使用 v-on:事件名="执行的方法" 绑定事件
<body>
<div id="app">
<!--vue绑定事件-->
<button v-on:click="search()">search方法</button>
<!--vue绑定事件简写-->
<button @click="f1()">f1方法</button>
<!-- 点击二者时在控制台输出对应的函数中的内容 -->
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
methods:{
//定义多个方法
search() {
console.log('search....')
},
f1() {
console.log('f1...')
}
}
})
</script>
</body>
4. 阻止事件的发生
<body>
<div id="app">
<!-- 原本点击保存会提交数据，使用prevent让其不提交并执行指定的方法 -->
<form action="xxx" v-on:submit.prevent="onSubmit">
<input type="text" id="name" v-model="user.username"/>
<button type="submit">保存</button>
<!-- 运行结果：
当输入框为空，会弹出请输入用户名，当输入框中存在内容时，会在控制台输出提交表单
原因：
使用v-model双向绑定，输入内容时会在user中创建username并赋值
如果使用v-bind单向绑定，则无论输入框中是否有内容，都是弹出请输入用户名 -->
</form>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
user:{
}
},
methods:{
onSubmit() {
// 判断当前VUE对象中username属性是否为空
if (this.user.username) {
console.log('提交表单')
} else {
alert('请输入用户名')
}
}
}
})
</script>
</body>
5. v-if条件指令
<body>
<div id="app">
<input type="checkbox" v-model="ok"/>是否同意
<h1 v-if="ok">周杰伦</h1>
<h1 v-else>郭富城</h1>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok:false
}
})
</script>
</body>
6. v-for遍历指令
<body>
<div id="app">
<ul>
<!-- in之后表示遍历的次数，in之前表示每次遍历的结果，此处表示遍历1到10 -->
<li v-for="n in 10"> {
{n}} </li>
</ul>
<ol>
<!-- in之前的第二个参数表示每次遍历的索引值，从0开始 -->
<li v-for="(n, i) in 10">{
{n}} 对应的索引 {
{i}}</li>
</ol>
<hr/>
<table border="1">
<!-- 表示遍历userList，user是每次遍历的结果 -->
<!-- 也可加索引 -->
<tr v-for="(user, index) in userList">
<td>{
{user.id}}</td>
<td>{
{user.username}}</td>
<td>{
{user.age}}</td>
<td>{
{index}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList: [
{
id: 1, username: 'helen', age: 18 },
{
id: 2, username: 'peter', age: 28 },
{
id: 3, username: 'andy', age: 38 }
]
}
})
</script>
</body>
7. 组件的使用
<body>
<div id="app">
<!-- 使用Vue对象定义的组件 -->
<Navbar></Navbar>
<Jay></Jay>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
//components关键字定义vue使用的组件，组件可以当成标签来使用
components: {
//组件的名字，可以自定义，使用一对单引号括起来
'Navbar': {
//组件的内容，template是固定写法，内容使用一对单引号括起来
template: '<ul><li>首页</li><li>学员管理</li></ul>'
}, // 多个使用逗号隔开
'Jay':{
template:'<input value = "周杰伦"></input>'
}
}
})
</script>
</body>
8. 全局组件的使用
(1) 当前文件夹下创建文件夹components，其中创建文件Navbar.js，内容如下：
// 定义全局组件
Vue.component('Navbar', {
template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
})
(2) 当前文件夹下的html文件中内容如下：
<body>
<div id="app">
<Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<!-- 引用文件夹中存在的全局组件 -->
<script src="components/Navbar.js"></script>
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
</body>
9. 生命周期
VUE的生命周期中使用的最多的是created和mounted
created：页面渲染之前执行，页面渲染表示页面数据的加载过程
mounted：页面渲染之后执行
<body>
<div id="app">
hello
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
created() {
//在页面渲染之前自动执行
// debugger表示加断点，程序执行到这一行会停止
debugger
console.log('created....')
},
mounted() {
//在页面渲染之后自动执行
debugger
console.log('mounted....')
}
})
</script>
</body>
10. 路由
VUE路由相当于一个菜单，点击某一选项显示某些内容
使用路由需要导入vue-router.js文件，将此文件放在当前文件夹下
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用router-link标签定义导航选项 -->
<!-- 通过传入to属性指定链接，通过链接得到要显示的内容 -->
<!-- router-link标签默认会被渲染成一个a标签 -->
<router-link to="/">首页</router-link>
<router-link to='/welcome'>欢迎</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 链接匹配到的要显示的内容将渲染在这里，必须的组件 -->
<router-view></router-view>
</div>
<!-- 两个文件引入有顺序要求 -->
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<script>
// 1. 定义所有链接中要显示的内容
const Welcome = {
template: '<div>欢迎</div>' }
const Student = {
template: '<div>student list</div>' }
const Teacher = {
template: '<div>teacher list</div>' }
// 2. 给不同的要显示的内容指定链接
const myroutes = [
{
path: '/', redirect: '/welcome' }, //设置页面默认显示的内容
{
path: '/welcome', component: Welcome },
{
path: '/student', component: Student },
{
path: '/teacher', component: Teacher }
]
// 3. 创建VueRouter对象，routes属性中传入第2步定义的对象
const vuerouter = new VueRouter({
routes:myroutes
//如果第2步定义的对象名称也是routes，则此行可简写为routes
})
// 4. 启用路由功能，router属性中传入第3步定义的对象
const app = new Vue({
el: '#app',
router:vuerouter //同理，亦可简写
})
</script>
</body>
运行结果：
