Vue入门

VsCode开发工具

1.基本的数据模型

<!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>
    <!-- vue入门 -->
    <div id="app">
        <!-- 使用插值表达式获取数据 -->
        {{message}}

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

2. 公共代码抽取

VS Code：文件-首选项-用户片段

{
    "vuehtm": {
        "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: {",
                            "",
            "               }",
            "           })",
            "</script>",
            "</body>",
            "",
            "</html>",
        ],
        "description": "Create vue template"
    }
}

3.基本语法（基本数据渲染和指令）

1.v-bind指令

<body>
    <div id="app">
        <!-- v-bind指令
            单向数据绑定
            这个指令一般用于在标签属性里，获取值
        -->
        <h1 v-bind:title="message">
            {{content}}
        </h1>
        <!-- 简写 -->
        <h2 :title="message">
            {{content}}
        </h2>
    </div>
    <script src="js/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.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>

4.事件操作

<body>
    <div id="app">
        <!-- vue绑定事件 -->
        <button v-on:click="search()">查询</button>
        <!-- 简写方式 -->
        <button @click="demo()">查询</button>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchMap: '狗蛋'
            },
            //查询结果
            result: {},
            methods: { //定义多个方法
                search() {
                    console.log('search....')
                },
                demo() {
                    console.log('demo....')
                }
            }
        })
    </script>
</body>

5.修饰符

<body>
    <div id="app">
        <form action="save" 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() {
                        if (this.user.username) {
                            console.log("提交表单")
                        } else {
                            alert("请输入用户名")
                        }
                    }
                }
        })
    </script>
</body>

6.循环

<body>
    <div id="app">
        <ul>
            <li v-for="n in 10">循环出来的数字:{{n}}</li>
        </ul>
        <ol>
            <li v-for="(n,index) in 10">循环出来的数字:{{n}} ,循环出来的下标:{{index}}</li>
        </ol>
        <hr />
        <!-- 循环数组对象 -->
        <table>
            <tr v-for="us in userList">
                <td>{{us.id}}</td>
                <td> {{us.username}}</td>
                <td> {{us.age}}</td>
            </tr>
        </table>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                userList: [{
                        id: 1,
                        username: '狗蛋',
                        age: 19
                    },
                    {
                        id: 2,
                        username: '铁柱',
                        age: 32
                    },
                    {
                        id: 3,
                        username: '翠花',
                        age: 23
                    }
                ]
            }
        })
    </script>
</body>

7. 组件

<body>
     <div id="app">
          <Navbar></Navbar>
     </div>
     <script src="vue.min.js"></script>
     <script>
          new Vue({
               el: '#app',
               //定义vue使用的组件
               components: {
                    //组件名称
                    'Navbar': {
                         //组件内容
                         template: '<ul><li>首页</li><li>管理</li></ul>'
                    }
               }
          })
     </script>
</body>

8.全局组件

<body>
        <div id="app">
                <!-- 全局组件的使用 
                        创建文件夹 放入JS文件
                        在使用的页面上导入使用标签即可
                 -->
                <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的生命周期

<body>
    <div id="app">  
        <!--  -->
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {

            },
            created(){
                //在页面渲染前执行
                console.log("created...")
            },
            mounted(){
                //在页面渲染之后执行
                console.log("mounted...")
            }
        })
    </script>
</body>

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 https://registry.npm.taobao.org
查看npm配置信息：npm config list

4.根据pacgage.json下载依赖

npm install

babel

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

1.安装

npm install --global babel-cli
出问题参考：https://blog.csdn.net/qq_44339899/article/details/112867079

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技术栈