在线教育项目第三天

前端开发

一、准备工作

安装vscode

网址：https://code.visualstudio.com/Download
推荐System版本 因为User版本是根据计算机用户安装的，换一个用户就使用不了了
官网下载很慢，可以将下载网址中的az764295.vo.msecnd.net换成vscode.cdn.azure.cn
安装的附加任务：
    ①将“通过code 打开“操作添加到windows资源管理器文件上下文菜单
    ②将“通过code 打开”操作添加到windows资源管理器目录上下文菜单
    说明：①②勾选上，可以对文件，目录点击鼠标右键，选择使用 VScode 打开。
    ③将code注册为受支持的文件类型的编辑器
    说明：默认使用 VScode 打开诸如 txt,py 等文本类型的文件，一般建议不勾选。
    让 VScode 支持的代码文件全部变成 VScode 默认打开，文件图标也会随之更改，很好辨认。
    ④添加到PATH（重启后生效）
    说明：这步骤默认的，勾选上，不用配置环境变量，可以直接使用。
    参考：https://www.cnblogs.com/csji/p/13558221.html
         https://www.cnblogs.com/kurrrr/p/14237006.html
         https://www.cnblogs.com/csji/p/13558221.html

安装插件

点击Extensions
    Chinese     Microsoft
    Live Server Ritwick Dey 内置服务器
    Vetur       Pine Wu     vue代码字体颜色会改变
    vue-helper  shenjiaolong

创建工作区

在本地创建空文件夹 不要中文不要特殊符号
vscode打开文件夹
将文件夹另存为工作区
打开工作区，选择workspace后缀的文件

创建文件夹

点击新建文件夹按钮

创建文件

右键文件夹，新建文件01.html
输入!，回车，生成html模板
在代码编辑区右键open with Live Server打开电脑默认浏览器显示效果
默认端口号是5500

二、ES6

概念

ECMAScript 6.0 JavaScript语言的下一代标准 发布于2015.6
ES6是一套标准，JavaScript很好地遵循了这套标准

历史

1996年，JavaScript创造公司Netscape网景公司将JavaScript提交给ECMA组织，希望JavaScript可以成为国际标准
1997年，ECMA发布262号标准文件，规定了浏览器脚本语言的标准，称为ECMAScript，JavaScript是遵循ECMAScript的一种具体实现
现在大多数人遵循ECMAScript 6.0编写代码
ES6和ES5的区别
    ES6的代码更加简洁，ES5的代码很复杂
    ES6对于浏览器的兼容性很差，ES5的兼容性很好
    一般使用ES6编写代码，用工具转为ES5去执行

基本语法

变量

js var a = 1;没有局部作用域 同一个变量可以声明多次
es6 let a = 1;有局部作用域 同一个变量只能声明一次

常量

声明时一定要赋值，且值不允许改变

解构赋值

数组解构 let [x, y, z] = [1, 2, 3];
对象解构
    let user = {"name":"张三", "age":18};
    let {name, age} = user;
    注意解构得到的变量名和对象中的属性名要一致

模板字符串 `称为反引号

使用`符号实现换行
    let str1 = `hello,
    es6`;
使用`符号在字符串中插入变量和表达式，变量名和JavaScript表达式写在${}中
    let name = "张三";
    let age = 18;
    let str2 = `hello，我叫${name}，今年${age}岁，明年${age+1}岁`;
使用`符号在字符串中调用函数
    function f() {
        return "have fun!";
    }
    let str3 = `Game start,${f()}`;
    console.log(str3);

声明对象简写

const name = "张三";
const age = 18;
//传统
const p1 = {name:name, age:age};
//简写
const p2 = {name, age};
注意key value一样才可以简写

定义方法简写

//传统
const person1 = {
    sayHi:function() {
        console.log("Hi");
    }
}
person1.sayHi();
//简写
const person2 = {
    sayHi() {
        console.log("Hi");
    }
}
person2.sayHi();

对象拓展运算符

拷贝对象 let person2 = {...person1};
合并对象
    let age = {age:20};
    let name = {name:"李四"};
    let person = {...age, ...name};

箭头函数

更加简洁的函数书写方式
基本语法：参数 => 函数体
//传统
var f1 = function(a) {
    return a;
}
//箭头函数
var f2 = a => a;
var f3 = (a, b) => a + b;

常见错误

GET http://127.0.0.1:5500/favicon.ico 404 (Not Found)
    找不到浏览器标签页的图标，对运行程序没有影响
Uncaught SyntaxError: Unexpected token...
    浏览器版本太低，无法解析代码

三、Vue

概念

用于构建用户界面的渐进式框架

入门案例

创建html页面，使用快捷键!
引入vue的js文件，类似于jQuery
    复制vue.min.js到工作区文件夹vue中
    <script src="vue.min.js"></script>
创建div，id为app，标识vue作用范围
编写vue代码，固定结构
    新建一个vue，el绑定作用范围，data创建初始值
    使用插值表达式可以取到data中的数据，如{{message}}

抽取vue代码片段

文件->首选项->用户片段->新建全局代码片段文件->输入文件名->回车
注意字符串中如果含有文件中复制过来的tab键的空格，要换成空格键的空格
根据代码片段的名字 输入快捷键vue htm回车即可生成代码片段

指令 v-开头

v-bind

单向数据绑定
一般用于标签属性里面，获取值
自己改变值，不影响别人
<div id="app">
    <h1 v-bind:title="message">
        {{content}}
    </h1>
    <!-- 简写 -->
    <h1 :title="message">
        {{content}}
    </h1>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            content: '我是标题 鼠标悬浮显示加载时间',
            message: '页面加载于' + new Date().toLocaleString()//当前系统格式
        }
    })
</script>

v-model

双向数据绑定
用于表单提交
自己改变值，别人也会跟着变
<div id="app">
    <!-- 双向绑定 -->
    <input type="text" v-model="searchMap.keyword" />
    <p>{{searchMap.keyword}}</p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            searchMap:{
                keyword: '橘子学院'
            }
        }
    })
</script>

v-on

事件绑定
<div id="app">
    <!-- 绑定事件，调用方法 方法的括号可加可不加-->
    <button v-on:click="search()">查询</button>
    <!-- 简写 -->
    <button @click="search()">查询</button>
</div>
new Vue({
    el: '#app',
    data: {
        searchMap: {
            keyWord: '橘子学院'
        },
        result: {}//空对象
    },
    //方法
    methods: {
        search() {
            console.log('search方法');
        },
        f1() {
            console.log('f1方法');
        }
    }
})

单向数据绑定和事件绑定的结合

<div id="app">
    <button @click="search()">查询</button>
    <p>您要查询的是{{searchMap.keyWord}}</p>
    <p><a :href="result.site" target="_blank">{{result.title}}</a></p>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            searchMap: {
                keyWord: '橘子学院'
            },
            result: {}//空对象
        },
        methods: {
            search() {
                console.log('search');
                this.result = {
                    title: '橘子学院',
                    site: "http://www.xm.com/orange"
                }
            }
        }
    })
</script>

修饰符

.prevent阻止事件的默认行为，而执行我们定义的方法
<div id="app">
    <form action="save" v-on:submit.prevent="onSubmit">
        <input type="text" name="name" v-model="user.name">
        <button type="submit">保存</button>
    </form>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {}//空对象
        },
        methods: {
            onSubmit() {
                if (this.user.name) {
                    console.log('提交表单');
                } else {
                    alert('请输入用户名');
                }
            }
        }
    })
</script>

条件渲染 v-if

v-if如果初始渲染时条件为false，则什么也不做，直到条件第一次变为true，才开始渲染条件块
v-show不管初始条件是什么，元素都会进行渲染，并且只是简单地基于css进行切换
v-if切换开销更高，而v-show初始渲染开销更高，频繁切换使用v-show，条件很少变化使用v-if
<div id="app">
    是否同意用户条款？
    <input type="checkbox" v-model="ok">是
    <!-- 刚开始未勾选，ok绑定为false，则执行else
         勾选后，ok绑定为true，执行if-->
    <h1 v-if="ok">您已同意</h1>
    <h1 v-else>您已拒绝</h1>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            ok: false
        }
    })
</script>

列表渲染v-for

简单的列表渲染
    <ul>
        <!-- 输出10个li，序号分别为1-10 每次遍历的值 in 遍历次数是固定格式-->
        <li v-for="n in 10">{{n}}</li>
    </ul>
    <ul>
        <!-- 输出10个li，n为1-10，index为0-9 -->
        <li v-for="(n, index) in 10">{{n}} - {{index}}</li>
    </ul>
遍历用户列表
<table border="1" cellspacing="0" cellpadding="0">
    <tr v-for="user in userList">
        <td>{{user.id}}</td>
        <td>{{user.username}}</td>
        <td>{{user.age}}</td>
    </tr>
</table>
<script>
    new Vue({
        el: '#app',
        data: {
            userList: [
                {id: 1, username: '张三', age: 18},
                {id: 2, username: '李四', age: 19},
                {id: 3, username: '王五', age: 20}
            ]
        }
    })
</script>

组件

概念

vue的构建基于组件，组件是vue最强大的功能之一
可以扩展html元素，封装可重用的代码

局部组件

<div id="app">
    <!-- 组件用于扩展html的标签 -->
    <Navbar></Navbar>
</div>
<script>
    new Vue({
        el: '#app',
        //定义vue使用的组件
        components: {
            'Navbar': {
                //模板
                template: '<ul><li>首页</li><li>学员管理</li></ul>'
            }
        }
    })
</script>

全局组件

将组件的定义放在一个单独的js文件中，要使用时引入js文件
Vue.component('Navbar', {
    template: '<ul><li>首页</li><li>学员管理</li></ul>'
})

实例生命周期

new Vue
    beforeCreate
    *created
    数据渲染：数据显示到页面上
    beforeMount
    *mounted
    如果数据渲染内容改变了，会执行beforeUpdate和updated
    beforeDestroy
    destroyed
在new Vue中加上created和mounted方法通过debugger进行测试
    new Vue({
        el: '#app',
        data: {
        },
        created() {
            debugger;
            //在页面渲染之前执行
            console.log("created");
        },
        mounted() {
            debugger;
            //在页面渲染之后执行
            console.log("mounted");
        }
    })
    f12开发者工具的半圆箭头按钮是向下一行一行执行，|>按钮是跳到下一个断点
    执行程序打开页面f12，刷新会显示代码停在第一个断点的位置即created里面的断点，点击半圆箭头按钮会跳到mounted里面的断点，证明了created比mounted先执行

路由

菜单栏
注意引入vue-router要在引入vue之下
<div id="app">
    <p>
        <!-- 菜单栏 router-link默认被渲染为a标签-->
        <router-link to="/">首页</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>
    //每个菜单项要显示的内容
    const Welcome = {template: '<div>欢迎</div>'};
    const Student = {template: '<div>学员列表</div>'};
    const Teacher = {template: '<div>讲师列表</div>'};
    //超链接路径和显示内容的对应关系
    const routes = [
        {path: '/', redirect: '/welcome'},//默认指向的路径
        {path: '/welcome', component: Welcome},
        {path: '/student', component: Student},
        {path: '/teacher', component: Teacher}
    ]
    //创建router
    const router = new VueRouter({
        routes: routes
    });
    //挂载到vue中
    const app = new Vue({
        el: '#app',
        router: router
    });