1、准备工作

安装vscode
下载相关的插件
image.png
1、创建空文件夹
2、vscode打开创建的空文件夹
3、将工作去另存为即可

2、es6

es6是一套标准，一套规范
JavaScript很好地遵循了这套规范

1、let定义变量及其作用域

  1. <script>
  2.     //es6定义变量，及变量的作用域
  3.     //js定义变量 var a=10 没有作用范围
  4.     //es6定义变量 let a=10，其定义有作用范围
  6.     {
  7.         var a=10
  8.         let b=20
  9.     }
  10.     console.log(a)
  11.     console.log(b) //b is not defined
  12. </script>

2、let不能重复定义相同的变量名

  1. <script>
  2.    var a=10
  3.    var a=20
  5.    let b=10
  6.    let b=20
  8.    console.log(a)
  9.    console.log(b) //Identifier 'b' has already 
  10. </script>

3、const定义常量

  1. <script>
  2.     //常量定义后不可再次赋值，常量定义必须初始化
  3.     const PI=3.14
  4.     //PI=2
  5.     //const A
  7. </script>

4、数组解构

  1. <script>
  2.     //传统写法
  3.     let a=1,b=2,c=3
  4.     console.log(a,b,c)
  6.     //es6写法
  7.     let [x,y,z]=[10,20,30]
  8.     console.log(x,y,z)  
  9. </script>

5、对象解构

  1. <script>
  2.     //定义对象
  3.     let user={"name":"lucy","age":20}
  5.     //传统写法
  6.     let name1=user.name
  7.     let age1=user.age
  8.     console.log(name1+"==="+age1)
  10.     //es6写法,大括号的属性名必须与对象属性名一致
  11.     let {name,age}=user
  12.     console.log(name+"***"+age)
  14. </script>

6、模板字符串反引号`

1、实现换行
2、实现获取变量值
3、实现调用方法

  1. <script>
  3.     //1、实现换行
  4.     let str=`hello,
  5. es6!`
  7. console.log(str)
  9.     //2、实现变量取值
  10.     let a=10
  11.     let b=20
  13.     let c=`${a}+${b}`
  14.     console.log(c)//10+20
  16.     //3、实现调用函数
  17.     function f(){
  18.         return "es6"
  19.     }
  21.     let str1=`hello,${f()}！`
  22.     console.log(str1)//hello,es6!
  24. </script>

7、声明对象

  1. <script>
  2.     const name="lucy"
  3.     const age=20
  5.     //传统方式
  6.     const p1={name:name,age:age}
  7.     console.log(p1)
  9.     //es6
  10.     const p2={name,age}
  11.     console.log(p2)
  12. </script>

8、定义方法及调用

  1. <script>
  2.     //传统方式
  3.     const person1={
  4.         sayHi:function(){
  5.             console.log("hi")
  6.         },
  7.         sayhaha:function(){
  8.             console.log("haha")
  9.         }
  10.     }
  12.     //方法调用
  13.     person1.sayHi()
  14.     person1.sayhaha()
  16.     //es6定义方法，去掉function
  17.     const person2={
  18.         sayHi(){
  19.             console.log("hi")
  20.         },
  21.         sayhaha(){
  22.             console.log("haha")
  23.         }
  24.     }
  25.     person2.sayHi()
  26.     person2.sayhaha()
  27. </script>

9、对象赋值与合并

  1. <script>
  2.     let person={name:"lucy",age:20}
  4.     let person1={...person}
  5.     console.log(person1)
  8.     let name={name:"lucy"}
  9.     let age={age:20}
  11.     let person3={...name,...age}
  12.     console.log(person3)
  13. </script>

10、箭头函数

  1. <script>
  2.     //传统方式
  3.     var f1=function(m){
  4.         return m
  5.     }
  7.     console.log(f1(2))
  9.     //箭头函数
  10.     var f2=m=>m
  11.     console.log(f2(8))
  12. </script>

练习：

  1.       //传统方式
  2.     var f3=function(a,b){
  3.         return a+b
  4.     }
  5.     console.log(f3(1,2))
  7.      //箭头函数
  8.     var f4=(a,b) =>a+b
  9.     console.log(f4(2,3))

3、vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1、HelloWorld

1、创建html页面，使用快捷键！生成html代码
2、将vue的js文件复制到磁盘当前目录下，在html页面中引入
vue.min.js
3、在html页面中加上div标签，div添加属性id
4、编写vue代码，固定的结构
5、使用插值表达式{{}}获取值

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  10. <body>
  11.     <!-- 3、在html页面中加上div标签，div添加属性id -->
  12.     <!-- 5、使用插值表达式获取message的值 -->
  13.     <div id="app">{{message}}</div>
  14.         <!-- 2、将vue的js文件复制到磁盘当前目录下，在html页面中引入 -->
  15.     <script src="vue.min.js"></script>
  17.    <!-- 4、编写vue代码，固定的结构 -->
  18.     <script>
  19.         new Vue({
  20.             el: '#app',//绑定vue作用的范围
  21.             data: {
  22.                 message: 'Hello Vue!'//此处内容自定义
  23.             }
  24.         })
  25.     </script>
  27. </body>
  28. </html>

2、抽取代码片段

文件-》首选项-》用户代码片段-》新建全局代码片段文件
文件名：vue-html.code-snippets
生成代码快捷键为：vuehtml

  1. {
  2.             "vue htm": {
  3.                 "scope": "html",
  4.                 "prefix": "vuehtml",
  5.                 "body": [
  6.                     "<!DOCTYPE html>",
  7.                     "<html lang=\"en\">",
  8.                     "",
  9.                     "<head>",
  10.                     "    <meta charset=\"UTF-8\">",
  11.                     "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
  12.                     "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
  13.                     "    <title>Document</title>",
  14.                     "</head>",
  15.                     "",
  16.                     "<body>",
  17.                     "    <div id=\"app\">",
  18.                     "",
  19.                     "    </div>",
  20.                     "    <script src=\"vue.min.js\"></script>",
  21.                     "    <script>",
  22.                     "        new Vue({",
  23.                     "            el: '#app',",
  24.                     "            data: {",
  25.                     "                $1",
  26.                     "            }",
  27.                     "        })",
  28.                     "    </script>",
  29.                     "</body>",
  30.                     "",
  31.                     "</html>",
  32.                 ],
  33.                 "description": "my vue template in html"
  34.             }    
  35. }

3、单向数据绑定v-bind指令

自己变，其他值不会跟着发生改变

  1. content: '我是标题',
  2. message: '页面加载于 ' + new Date().toLocaleString()
  2.     <!-- 如果要将模型数据绑定在html属性中，则使用 v-bind 指令
  3.      此时title中显示的是模型数据-->
  4.     <h1 v-bind:title="message">
  5.         {{content}}
  6.     </h1>
  8.     <!-- v-bind 指令的简写形式： 冒号（:） -->
  9.     <h1 :title="message">
  10.         {{content}}
  11.     </h1>

4、双向数据绑定

自己变，其他值会跟着发生改变

  1. searchMap:{
  2.      keyWord: 'vue'
  3. }
  1.                  <input type="text" v-bind:value="searchMap.keyWord"></input>
  2.         <input type="text" v-model:value="searchMap.keyWord"></input>
  3.         <p>您要查询的是：{{searchMap.keyWord}}</p>

image.png

5、事件绑定

  1. data: {
  2.                 searchMap:{
  3.                     keyWord:'vue'
  4.                 },
  5.                 //查询结果
  6.                 result:{}
  7. },
  8. methods:{
  9.                 search(){
  10.                     console.log("search...")
  11.                 },
  12.                 f1(){
  13.                     console.log("f1...")
  14.                 }
  15. }
  1.                <!-- vue绑定事件 -->
  2.         <button v-on:click="search()">查询</button>
  4.          <!-- vue绑定事件简写形式 -->
  5.          <button @click="search()">查询1</button>

6、修饰符阻止表单提交

.prevent

  1.  new Vue({
  2.             el: '#app',
  3.             data: {
  4.                 user:{}
  5.             },
  6.             methods:{
  7.                 onSubmit(){
  8.                     if(this.user.username){
  9.                         console.log("提交表单")
  10.                     }else{
  11.                         alert("请输入用户名")//弹窗
  12.                     }
  13.                 }
  14.             }
  15. })
  1.                  <form action="save" v-on:submit.prevent="onSubmit">
  2.         <input type="text" id="name" v-model="user.username"></input>
  3.         <button type="submit">保存</button>
  4.         </form>

7、指令v-if

v-show指令与v-if指令一样，但v-if指令时懒加载v-show不是

  1. new Vue({
  2.             el: '#app',
  3.             data: {
  4.                 result: false
  5.             }
  6. })
  1.               <input type="checkbox" v-model="result">是否选中</input>
  2.         <!-- true时输出result -->
  3.         <h1 v-if="result">vue</h1>
  4.         <!-- false时输出html -->
  5.         <h1 v-else>html</h1>

8、指令v-for

  1. new Vue({
  2.             el: '#app',
  3.             data: {
  4.                 userList: [
  5.                     {id: 1,username: "zhangsan" ,age: 20},
  6.                     {id: 2,username: "lisi" ,age: 21},
  7.                     {id: 3,username: "wangwu" ,age: 22}
  8.                 ]
  10.             }
  11. })
  1.             <!-- 带实心点的列表 -->
  2.         <ul>
  3.             <li v-for="n in 10">{{n}}</li>
  4.         </ul>
  6.         <!-- 带序号的列表 -->
  7.         <ol>
  8.             <li v-for="(n,index) in 10">{{n}}--{{index}}</li>
  9.         </ol>
  11.         <!-- 横线分割 -->
  12.         <hr/>
  14.         <table border="1">
  15.             <tr v-for="user in userList">
  16.                 <td>{{user.id}}</td>
  17.                 <td>{{user.username}}</td>
  18.                 <td>{{user.age}}</td>
  19.             </tr>
  20.         </table>

9、vue组件

1、局部组件：只能在当前页面有效

  1.   new Vue({
  2.             el: '#app',
  3.             //定义局部组件
  4.             components: {
  5.                 //组件名
  6.                 'Navber':{
  7.                     //组件内容
  8.                     template:'<ul><li>首页</li><li>学员管理</li></ul>'
  9.                 }
  10.             }
  11. })
  1.                  <!-- 引用组件 -->
  2.         <Navber></Navber>

2、全局组件
1、在当前包下创建components包
2、创建js文件Navber.js

  1. //定义全局组件
  2. Vue.component(
  3.     'Navber',{template:'<ul><li>首页</li><li>学员管理</li></ul>'}
  4. )

3、在项目中导入该js文件即可使用

  1. <script src="components/Navber.js"></script>

10、vue生命周期

created
mounted

  1.                  created(){
  2.                     console.log("页面渲染前。。。。。")
  3.                 },
  4.             mounted(){
  5.                 console.log("页面渲染后。。。。。")
  6.             }

11、vue菜单导航

1、导入js文件
vue-router.min.js

  1.                 <h1>Hello App!</h1>
  2.         <p>
  3.             <!-- 使用router-link组件来导航 -->
  4.             <!-- 通过传入`to`属性来链接 -->
  5.             <!-- <rounter-link>默认会被渲染成一个`<a>`标签 -->
  6.             <router-link to="/">首页</router-link>
  7.             <router-link to="/student">会员管理</router-link>
  8.             <router-link to="/teacher">讲师管理</router-link>
  9.         </p>
  10.         <!-- 路由出口 -->
  11.         <!-- 路由匹配到的组件将渲染在这里 -->
  12.         <router-view></router-view>
  1.                  <script>
  2.         //1、定义路由组件
  3.         const Welcome={template: '<div>欢迎</div>'}
  4.         const Student={template: '<div>student list</div>'}
  5.         const Teacher={template: '<div>teacher list</div>'}
  7.         //2、定义路由
  8.         //每个路由应该映射一个组件
  9.         const routes=[
  10.             {path: '/',redirect: '/welcome'},//设置默认指向的路径
  11.             {path: '/welcome',component: Welcome},
  12.             {path: '/student',component: Student},
  13.             {path: '/teacher',component: Teaacher}
  14.         ]
  16.         //3、创建router实例，然后穿routes配置
  17.         const router=new VueRouter({
  18.             routes//相当于缩写 routes： routes
  19.         })
  21.         //4、创建挂载根实例
  22.         //从而让整个应用都有路由功能
  24.         const app=new Vue({
  25.             el:  '#app',
  26.             router
  27.         })
  29.         //即可应用了
  30.     </script>

4、axios

1、创建axiosdemo文件夹并创建html页面，导入vue和axios的js文件
vue.min.jsaxios.min.js
2、创建user.json文件

  1. {
  2.     "sucess":true,
  3.     "code":200,
  4.     "message":"成功",
  5.     "data":{
  6.         "item":[
  7.             {"name":"lucy","age":20},
  8.             {"name":"mary","age":30},
  9.             {"name":"jack","age":40}
  10.         ]
  11.     }
  12. }

3、编写html页面

  1.                 new Vue({
  2.             el: '#app',
  3.             data: {
  4.                 userList: []
  5.             },
  6.             created(){
  7.                 //页面渲染前调用方法获取数据
  8.                 this.getUserList()
  9.             },
  10.             methods:{
  11.                 getUserList(){
  12.                     axios.get("user.json")
  13.                     .then(sucess =>{//成功执行的方法
  14.                         //将得到的结果复制给memberList
  15.                         this.userList=sucess.data.data.items
  16.                     })
  17.                     .catch(error =>{//失败执行的方法
  19.                     })
  20.                 }
  21.             }
  22.         })
  1.                  <div v-for="user in userList">
  2.             {{user.name}}--{{user.age}}
  3.         </div>

5、element-ui

快速开发工具
官网：http://element-cn.eleme.io/#/zh-CN

6、node.js

javascript的运行环境
模拟服务器效果
官网：https://nodejs.org/en/
中文网：http://nodejs.cn/
1、下载安装node.js，建议安装在c盘
2、创建node.js文件
3、cmd窗口进入到node.js文件所在目录
4、执行 node 文件名 命令即可

7、npm包管理

类似maven的依赖管理工作
安装nodejs时，连带安装了
npm -v
1、初始化项目
npm init -y ===》表示利用默认配置初始化项目，成功后生成package.json文件
2、npm 下载js依赖
1、设置镜像，保证下载速度

  1. npm config set registry https://registry.npm.taobao.org
  1. #查看配置，检验是否配置成功
  2. nmp config list

2、下载依赖，会自动锁定版本锁定版本

  1. npm install jquery
  3. #指定版本下载
  4. npm install jquery@2.1.x

3、根据package.json下载依赖

  1. npm install

4、其他命令

  1. #devDependencies节点：开发时的依赖包，项目打包到生产环境的时候不包含的依赖
  3. #使用 -D参数将依赖添加到devDependencies节点
  4. npm install --save-dev eslint
  5. #或
  6. npm install -D eslint
  8. #全局安装
  9. #Node.js全局安装的npm包和工具的位置：用户目录\AppData\Roaming\npm\node_modules
  11. #一些命令行工具常使用全局安装的方式
  12. npm install -g webpack
  14. #更新包（更新到最新版本）
  15. npm update 包名
  17. #全局更新
  18. npm update -g 包名
  20. #卸载包
  21. npm uninstall 包名
  23. #全局卸载
  24. npm uninstall -g 包名

8、babel转码器

es6转换成es5
1、创建文件夹并且初始化后，执行，即可安装babel

  1. npm install --global babel-cli

2、查看是否成功

  1. babel --version

3、创建js文件编写es6代码

  1. // 转码前
  2. // 定义数据
  3. let input = [1, 2, 3]
  5. // 将数组的每个元素 +1
  6. input = input.map(item => item + 1)
  7. console.log(input)

4、在当前项目下创建配置文件.babelrc

  1. {
  2. "presets": ["es2015"],
  3.     "plugins": []
  4. }

5、安装es2015转码器

  1. npm install --save-dev babel-preset-es2015

6、使用命令进行转码
文件
babel es6/01.js -o dist/001.js ===>es6文件夹下的01.js转码到dist文件夹下的001.js
文件夹
babel es6 -d list ===>es6文件夹下的转码到list文件夹下