持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

前言

大家好，我是掘金新用户小钻风头领，今天是我正式更文的第七天；

VsCode开发工具

10.vue的路由

<body>
    <div id="app">
        <h1>Hello Appl</h1>
        <p>
            <!-- 使用router-link 组件来导航 -->
            <!-- 通过传入  ’to‘ 属性指定链接 -->
            <!-- <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>
    <!-- 引入vue路由的js是有顺序的 先引入vue 在引入路由 -->
    <script src="vue.min.js"></script>
    <script src="vue-router.min.js"></script>
    <script>
        //1.定义路由组件 可以从其他文件impot进来
        const Welcome = {
            template: '<div>欢迎</div>'
        }
        const Student = {
            template: '<div>学生列表</div>'
        }
        const Teacher = {
            template: '<div>讲师列表</div></div>'
        }
        //2.定义路由 每个路由应该映射一个组件
        const routes = [{
                path: '/',
                redirect: '/welcome'
            },
            {
                path: '/welcome',
                component: Welcome
            },
            {
                path: '/student',
                component: Student
            },
            {
                path: '/teacher',
                component: Teacher
            },
        ]
        //3.创建router实例，然后传 'router' 配置
            const router =new VueRouter({
                routes //(缩写) 相当于routes:routes
            }) 

        //4.创建和挂载根实例 从而让整个应用都有路由的功能
        const app = new Vue({
            el: '#app',
            router
        })
    </script>
</body>

axios

asios是独立的项目，不是vue的一部分，要经常和vue一快使用来实现Ajax操作

使用场景

前端获取后端接口的数据，前端需要使用Ajax来获取发送Ajax请求获取后端数据

axios使用

1.创建HTML页面，引入js文件，vue和axios

  <script src="js/vue.min.js"></script>
  <script src="js/axios.min.js"></script>

2.编写json数据

{
    "success": true,
    "code": 20000,
    "message": "成功",
    "data": {
        "items": [
            {
                "name": "路西",
                "age": 20
            },
            {
                "name": "路东",
                "age": 24
            },
            {
                "name": "路南",
                "age": 22
            }
        ]
    }
}

3.编写axios的代码

<body>
    <div id="app">
        <!-- 显示userList的数据显示 -->
        <div v-for="items in userList">
            {{items.name}}==={{items.age}}
        </div>
    </div>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //固定的结构
            data: {
                //在data里定义和初始化变量
                //定义空数组
                userList: []
            },
            created() { //页面渲染前执行的方法
                //调用定义的方法
                this.getUserList()
            },
            methods: { //编写具体的方法  
                //创建方法 查询所有用户的数据
                getUserList() {
                    //使用axios发送Ajax请求
                    //axios.提交方式("请求接口的路径或文件")
                    axios.get("json/data.json")
                        .then(result => {
                            //console.log(result)
                            this.userList = result.data.data.items
                            console.log(this.userList)
                        }) //请求成功后执行

                        .catch(error => {

                        }) //请求失败后执行
                }
            }
        })
    </script>
</body>

ElementUi

饿了么出品

Node.js

JavaScript的运行时环境，不需要浏览器，直接使用node.js运行JavaScript

模拟服务器

const { Console } = require('console');
const http=require('http');
http.createServer(function(request,response){
    //发送HTTP头部
    //HTTP状态值 200 : OK  
    //内容类型： text/plain
    response.writeHead(200,{'Content-Type':'text/plain'});
    //发送响应数据，"Hello Word"
    response.end('Hello Word');
}).listen(8888);
//终端打印以下信息
console.log("Server running at http://127.0.0.1:8888/");

找到文件 cmd  node 文件名 就能使用端口号来访问

NPM

是node.js的包管理工具，相当于maven，管理前端js的依赖

1.npm项目初始化

npm init 会生成package.json文件，类似于pom文件 npm init -y 使用默认的

2.npm下载js依赖

npm install 依赖名称就会下载最新的依赖 npm install @jquery3.3.1 指定版本

3.修改镜像

npm config set registry registry.npm.taobao.org 查看npm配置信息：npm config list

4.根据pacgage.json下载依赖

npm install

babel

是一个转码器，将ES6的代码转换未ES5的代码，因为ES5兼容性高

1.安装

npm install --global babel-cli 出问题参考：blog.csdn.net/qq_44339899…

2.测试

js文件

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

3.创建配置文件（.babelrc)

转换规则：

{

"presets":["es2015"],

"plugins": []

}

4.安装转码器

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

5.转换

babel es6/es6.js -o disti/es5.js

模块化

js 模块化，在2.js里调用1.js的方法

步骤： 1.创建js文件 2.编写方法 3.设置那些方法可以被调用

//创建方法
const sum=function(a,b){
    return  parseInt(a)+parseInt(b)
}
const subtract=function(a,b){
    return parseInt(a)-parseInt(b)
}
//设置那些方法可以被调用
moduel.exports={
    sum,
    subtract
}

Vue(第二部分)

前言