Vue入门了解-CSDN博客

本文链接：https://blog.csdn.net/love_to_share/article/details/104719176

1、前端环境准备
 2、nodejs入门
 3、Npm包管理器
 4、Vue入门及双向绑定
 5、Vue事件
 6、Vue路由
 7、Axios

1、前端环境准备

这是一个前后端分离的时代，学习前端就要用前端专用的软件，首先要配置前端开发的环境。
开发工具用的是VsCode，一般推荐使用这个，也可以用idea。
VsCode地址：https://code.visualstudio.com/Download,不需要更改什么东西，无脑安装即可。
在这里插入图片描述安装好软件之后，最好先汉化，如下图所示：
在之后html代码测试中，还需要live serve，在vscode商店中安装live Server，方便后面进行测试

还需要一个安装环境，nodejs，根据什么样的系统下载对应的安装包。
nodejs地址：http://nodejs.cn/download/
在这里插入图片描述 如何验证安装好了呢？

VsCode可以正常打开
nodejs
- 1、环境变量配置
- 2、判断版本

2、nodejs入门

首先要确定安装nodejs安装完毕。
nodejs就是一个在服务器端能运行javascript的环境！

程序一：

打开软件，新建文件夹，打开文件夹,新建一个js文件，然后在终端打开输入命令node 文件名，就会看到命令行的输出命令。node环境执行js文件，
在这里插入图片描述

程序二：

写代码：设置响应头文件，发送数据到前端界面

const http = require('http')
http.createServer(function (request, response) {
  // 设置响应头文件
  response.writeHead(200, { 'Content-Type': 'text/plain' })
  // 发送数据
  response.end("hello,server")
}).listen(8080)

console.log("server is running... port:8080")

在控制台实现：用node 02-serverapp.js实现
在这里插入图片描述
结果：访问localhost:8080

3、Npm包管理器

什么是npm？
就是前端版的maven，全球最大的前端生态模块，前端所有的依赖在这里都有，
maven中的依赖是pom.xml。
npm中的是package-lock.json。
npm一些常用命令：

npm init -y 初始化一个基本的配置文件
# 自动更新目前所有的依赖，拿到一个程序后，不会打包这些依赖，我们需要自己让他自动导包
npm install 
# 安装环境 npm install 包名 -g(全局)
npm install express -g
# npm 默认仓库在国外，设置镜像到淘宝
npm config set regisry http://registry.npm.taobao.org
npm config list

# npm install 依赖
npm install jquery
# 安装指定版本
npm install jquery@3.4.1

# --save-dev 或 -D 代表这个只在开发环境中有效，不会打包出去
# --save-dev 或 -D 开发时候的语法检测工具
npm install --save-dev eslint
npm install -D eslint

# 自动下载项目中的依赖package.json
npm install

# 自动更新包名
npm update 包名
# 卸载某个包
npm uninstall

# 后面开发基于ES6，但浏览器支持的是es5规范，所以需要webpack打包，自动将es6转为es5（用cmd以管理员身份运行）
npm install -g webpack webpack-cli
webpack -v

# 安装babel-cli（以管理员身份运行）
npm install -g babel-cli
babel --version

前端一些组件啥的安装都是用npm
在这里插入图片描述

4、Vue入门及双向绑定

4.1、什么是vue？

vue是前端框架，核心只关注视图层
核心思想：MVVM,
官方学习文档：https://cn.vuejs.org/v2/guide/

先把vue下载下来， npm install vue,习惯性在这个目录下新建一个lib目录，把vue.js放到这个文件夹下
在这里插入图片描述

新建第一个程序文件:hello,vue

<!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>
        <!-- 纯始图代码 -->
        <div id="app">
            {{msg}}
        </div>


        <!-- 数据和视图层分离 -->
        <!-- vue -->
        <script src="./lib/vue.js"></script>
        <!-- 双向绑定，只要数据发生变化吧，前端显示及时发生变化 -->
        <script>
            //创建vue对象，绑定视图层
            var vue = new Vue({
                el:'#app', //绑定视图
                data:{ //定义要给前端的数据，页面所有的数据都来自这里
                    msg:'hello.vue'
                }
            })
        </script>
        
    </body>
</html>

右键在浏览器打开
在这里插入图片描述
结果：

例子2：基本数据渲染

<!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>
        <!-- 纯始图代码 -->
        <div id="app">
            <h1 v-bind:title="msg">我是标题</h1>
        </div>

        <script src="./lib/vue.js"></script>
        <script>
            var vue = new Vue({
                el:'#app',
                data:{
                    msg:'time:'+new Date().toLocaleString()
                }
            })
        </script>
        
    </body>
</html>

结果：
在这里插入图片描述

案例3：双向绑定

<!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>
        <!-- 纯始图代码 -->
        <div id="app">
            <!-- v-bind 绑定属性 -->
          <input type="text" v-bind:value="serachMap.keyword">
          <!-- v-model 双向绑定指令 -->
          <input type="text" v-model="serachMap.keyword">
        </div>

        <script src="./lib/vue.js"></script>
        <!-- 双向绑定，只要数据发生变化吧，前端显示及时发生变化 -->
        <script>
            var vue = new Vue({
                el:'#app',
                data:{//定义要给前端的数据，页面的多有数据都来自这里
                   serachMap:{
                       keyword:'yang'
                   }
                }
            })
        </script>
        
    </body>
</html>

结果：在浏览器中打开
在这里插入图片描述

4.2、MVVM:

M：模型数据
V：视图
VM：双向绑定，只要数据发生变化，前端显示也会立即变化

5、Vue事件 v-on(@)

<!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>
        <div id="app">
            <!-- 所有v-开学的都是vue指令 -->
            <!-- 按钮绑定事件 -->
           <button @click ="search()">查询</button>
           <p>你要查询的是：{{result.title}}</p>
           <p>
               <a v-bind:href="result.site" target="_blank"> 
                {{result.title}}
               </a>
           </p>
        </div>
        <script src="./lib/vue.js"></script>
        <script>
            var vue = new Vue({
                el:'#app',
                data:{
                   searchMap:{
                       keyword:'yy'
                   },
                   result:{}
                },
                methods:{//事件
                    search(){
                        console.log("search")
                    this.result={
                        //todo
                        "title":"yy",
                        "site":"https://blog.csdn.net/love_to_share"
                    }
                    }
                }
            })
        </script>
        
    </body>
</html>

结果：
在这里插入图片描述点击yy链接会跳转到我的博客首页。

6、Vue路由

路由：页面链接跳转，前端可以用a标签跳转，但是vue不可以，用路由就可以实现页面内跳转。
准备工作，新建文件夹在终端打开，下载vue和vue-router，在这个文件夹下建一个lib目录，把vue.js与vue-router.js放进lib中，编写html代码
在这里插入图片描述

npm install vue
npm install vue-router

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

  <div id="app">
    <h1>Hello,App!</h1>
    <p>
      <router-link to="/">首页</router-link>
      <router-link to="/student">学员管理</router-link>
      <router-link to="/teacher">讲师管理</router-link>
    </p>
    <!-- 显示view -->
    <router-view></router-view>
  </div>

  <script src="./lib/vue.js"></script>
  <script src="./lib/vue-router.js"></script>
  <script>
    //1、定义路由的组件
    const welcome = { template: '<div>欢迎</div>' }
    const student = { template: '<div>Student List</div>' }
    const teacher = { template: '<div>Teachet List</div>' }

    //2、定义路由
    const routes = [
      { path: '/', redirect: '/welcome' },
      { path: '/welcome', component: welcome },
      { path: '/student', component: student },
      { path: '/teacher', component: teacher }
    ]

    // 3、创建 router实例
    const router = new VueRouter({
      routes: routes //
    })

    // 挂载路由
    new Vue({
      el: '#app',
      router
    })

  </script>

</body>

</html>

结果：
在这里插入图片描述

7、Axios

异步通信，与ajax相似
准备工作，还是新建一个文件夹，下载依赖，放到lib目录下
在这里插入图片描述

<!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>
    <div id="app">
        <button @click="getList()">测试</button>
        <table>
          <!-- 循环 v-for-->
          <tr v-for="list in lists">
            <td>{{list.id}}</td>
            <td>{{list.name}}</td>
          </tr>
        </table>
      </div>
    
      <script src="./lib/vue.js"></script>
      <script src="./lib/axios.js"></script>
      <script>
        var vue = new Vue({
          el: '#app',
          data: {
            lists: []
          },
          methods: {
            // 前后端分离开发中，前端接收数据并渲染，后台只用提供json数据
            getList() {
                // 可以在本地新建一个json数据文件，用来测试ajax请求
              axios.get('http://localhost:8110/admin/edu/teacher').then(response => {
                console.log(response)
                // 后端接收的值交给前端的vue管理
                this.lists = response.data.data.items
              })
            }
          }
        })
      </script>
</body>
</html>

[
    {"id":1,"name":"卤蛋"},
    {"id":2,"name":"阿珂"},
    {"id":3,"name":"凯爹"}
]