ES6、VUE 快速入门

比眉伴天荒 2023-01-05 01:23 233阅读 0赞

# ES6、VUE #

### 文章目录 ###

*  ES6、VUE
 *   *  一、ES6简介
     *  二、ES6基本语法
     *   *  1. let声明变量
         *  2. const声明常量
         *  3. 数组解构
         *  4. 对象解构
         *  5. 模板字符串
         *  6. 使用已有变量的值定义对象
         *  7. 定义方法
         *  8. 对象扩展运算符...
         *  9. 箭头函数
     *  三、VUE介绍
     *  四、VUE的基本使用
     *  五、VS Code中创建代码片段
     *  六、VUE基本语法
     *   *  1. v-bind指令
         *  2. v-model指令
         *  3. 事件操作
         *  4. 阻止事件的发生
         *  5. v-if条件指令
         *  6. v-for遍历指令
         *  7. 组件的使用
         *  8. 全局组件的使用
         *  9. 生命周期
         *  10. 路由
     *  七、vue-element-admin的使用
     *  八、vue-admin-template的使用

## 一、ES6简介 ##

ECMAScript (ES6)是JavaScript语言的标准，JavaScript是这种标准的实现

## 二、ES6基本语法 ##

### 1. let声明变量 ###

### 2. const声明常量 ###

### 3. 数组解构 ###

### 4. 对象解构 ###

### 5. 模板字符串 ###

### 6. 使用已有变量的值定义对象 ###

### 7. 定义方法 ###

### 8. 对象扩展运算符… ###

### 9. 箭头函数 ###

var 方法名 = 参数 => 方法体

## 三、VUE介绍 ##

VUE (Vue.js)是一套用于构建用户界面的渐进式框架，只关注视图层，便于与第三方库整合

## 四、VUE的基本使用 ##

1.  在当前文件夹中引入vue.js文件 (可以在磁盘中引入)
2.  在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>

1.  补全VUE需要的代码

<div id="app">
              
              {
       {message}}
        </div>
        
        
        <script src="vue.min.js"></script>
    
        <script> // 创建一个vue对象 new Vue({ el: '#app', //绑定vue作用的范围 data: { //定义页面中显示的模型数据 message: 'Hello Vue!' } }) </script>

1.  运行结果

![在这里插入图片描述][20210111123249722.png]

## 五、VS Code中创建代码片段 ##

代码片段：通过快捷键即可将一些代码自动补全(类似于之前的”!”号)

1.  创建补全vue的代码片段文件

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70]

1.  向代码片段中写入如下内容

{
        "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"
        }
    }

1.  使用效果

在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">
            
            
            <h1 v-bind:title="message">
                {
       {content}} 
            </h1>
            
            <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">
            
            
            <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">
            
            <button v-on:click="search()">search方法</button>
            
            <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">
            
            <form action="xxx" v-on:submit.prevent="onSubmit">
                <input type="text" id="name" v-model="user.username"/>
                <button type="submit">保存</button>
            
            </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>

![在这里插入图片描述][20210111123352833.png]

### 6. v-for遍历指令 ###

<body>
        <div id="app">
            <ul>
                
                <li v-for="n in 10"> {
       {n}} </li>
            </ul>
            <ol>
                
                <li v-for="(n, i) in 10">{
       {n}} 对应的索引 {
       {i}}</li>
            </ol>
            <hr/>
            <table border="1">
                
                
                <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">
            
            <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>

![在这里插入图片描述][20210111123416628.png]

### 8. 全局组件的使用 ###

(1) 当前文件夹下创建文件夹components，其中创建文件Navbar.js，内容如下：

// 定义全局组件
    Vue.component('Navbar', {
        template: '<ul><li>首页</li><li>学员管理</li><li>讲师管理</li></ul>'
    })

(2) 当前文件夹下的html文件中内容如下：

![在这里插入图片描述][20210111123438888.png]

### 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>
                    <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>

运行结果：

![在这里插入图片描述][20210111123504172.png]

## 七、vue-element-admin的使用 ##

1.  概念

vue-element-admin是基于element-ui 的一套后台管理系统集成方案

1.  安装

(1) 解压下载好的压缩包并以移动至工作区

(2) 执行npm install安装所需的依赖

(3) 执行npm run dev运行

## 八、vue-admin-template的使用 ##

1.  概念

vue-admin-template是基于vue-element-admin的一套后台管理系统基础模板，可进行二次开发  
2. 建议

在 vue-admin-template 的基础上进行二次开发，把 vue-element-admin当做工具箱，想要什么功 能或者组件就去 vue-element-admin 那里复制过来

1.  安装

(1) 解压下载好的压缩包并以移动至工作区

(2) 执行npm install安装所需的依赖

(3) 执行npm run dev运行

[20210111123249722.png]: /images/20221119/49cf979b0a22405b8da72ef874973207.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80OTM0MzE5MA_size_16_color_FFFFFF_t_70]: /images/20221119/8efb3baf391d4135b17f1b68c4efc969.png
[20210111123352833.png]: https://img-blog.csdnimg.cn/20210111123352833.png
[20210111123416628.png]: https://img-blog.csdnimg.cn/20210111123416628.png
[20210111123438888.png]: https://img-blog.csdnimg.cn/20210111123438888.png
[20210111123504172.png]: https://img-blog.csdnimg.cn/20210111123504172.png