Vue——快速入门

最新推荐文章于 2024-06-16 13:14:30 发布

Easonnzz

最新推荐文章于 2024-06-16 13:14:30 发布

阅读量521

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/nzzynl95_/article/details/104618107

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了Vue的快速入门，包括环境配置、NodeJS、NPM的使用，详细讲解了Vue的基础概念、第一个Vue程序、双向绑定和事件处理，还涉及到了路由和axios异步通信的初步应用。

摘要由CSDN通过智能技术生成

1. 环境配置

开发工具：VSCode(推荐)、IDEA
VSCode下载地址：https://code.visualstudio.com/
还需要一个前端环境：NodeJS
NodeJS下载地址：http://nodejs.cn/download/

安装完毕后验证是否安装正确：

（1）VSCode能正常打开即可！

（2）NodeJS需要判断验证

配置环境变量：安装时一直next会自动配置环境变量
判断版本 node -v 以及 npm -v

至此，环境配置完毕！

2. NodeJS

NodeJS 是一个在服务器端能够运行JavaScript 的环境。

第一个node js程序
在这里插入图片描述

3. 了解NPM，安装一些常用的环境

npm (node package manager)：前端版的 maven，前端所有的依赖在这里都有

其中它的 package.json 文件对应后端的pom.xml

（1） npm init -y ：初始化一个基本的配置文件
在这里插入图片描述
（2） npm install express -g ：安装环境 npm install 包名 -g(全局)

（3） npm config set regisry https://registry.npm.taobao.org :设置镜像到淘宝（cmd中执行）
npm config list :查看是否安装成功
在这里插入图片描述

（4） npm install jquery : 安装jquery依赖
npm install vue : 安装vue依赖
在这里插入图片描述

（5） npm install --save-dev eslint : 代表只在开发环境有效，不会打包出去，eslint为开发时候的语法检查工作
在这里插入图片描述

（6） npm install :当把node_modules里某些依赖删除后，执行此命令，就会根据package-lock.json的依赖，自动下载上

（7） npm install -g webpack webpack-cli : 我们在后面的开发都是基于es6，但浏览器支持的是es5规范，所以需要webpack 打包，自动将es6代码转为es5语法(cmd中执行)
webpack -v : 查看是否安装成功
在这里插入图片描述

（8） npm update 包名 : 自动更新某个包名
npm uninstall 包名 : 自动卸载某个包名

（9） npm install -g babel-cli : 安装babel-cli(cmd中执行)
babel --version ：查看是否安装成功

4. Vue

Vue是一种前端框架，核心只关注视图层
官方文档：https://cn.vuejs.org/v2/guide/
核心思想：MVVM (M模型数据 V视图 VM双向绑定)

MVVM是一种简化用户界面的事件驱动编程方式
MVVM 源自于经典的 MVC（Model-View-Controller）模式。MVVM 的核心是 ViewModel 层，负责转换 Model 中的数据对象来让数据变得更容易管理和使用，其作用如下：

该层向上与视图层进行双向数据绑定
向下与 Model 层通过接口请求进行数据交互

在这里插入图片描述

4.1 第一个vue程序

（1）创建一个文件夹，命名为vue-01
在这里插入图片描述
（2）点击右键，选择在终端打开，下载vue

（3）创建一个lib文件夹，将dist文件夹下的vue.js文件复制一份粘贴过去

在这里插入图片描述
（4）创建第一个vue文件，名为01-hellovue.html，选择快捷键html:5，自动生成部分代码

（5）01-hellovue.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>
    <!-- 视图部分 -->
    <div id="app">
        {{msg}}
    </div>

<!-- 数据和视图层分离 -->
<!-- 引入vue -->
<script src="./lib/vue.js"></script> 

<script>
  //代码部分
  //创建vue对象，
  var vue = new Vue({
      el:'#app',  //绑定视图层
      data:{  //定义要给前端的数据,页面的所有数据都来自data
        msg:'hello,vue'
      }
  })

</script>

</body>
</html>

（6）右键选择在浏览器中打开
在这里插入图片描述
结果展示：

理解双向绑定：只要数据发生变化，前端视图显示就会随之发生变化

基本数据渲染指令（拓展部分）

<!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> -->
        <!--  v-bind 简写 ： -->   
        <h1 :title="msg">我是标题</h1>
    </div>

<!-- 数据 -->
<script src="./lib/vue.js"></script> 

<script>
  var vue = new Vue({
      el:'#app',  
      data:{  
          msg:'时间'+ new Date().toLocaleString()     
      }
  })
</script>

</body>
</html>

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

4.2 双向绑定

v-model 双向绑定
v-bind 绑定属性(单向)

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

<!-- 数据和视图层分离 -->
<!-- 引入vue -->
<script src="./lib/vue.js"></script> 

<script>
  //代码部分
  //创建vue对象，
  var vue = new Vue({
      el:'#app',  //绑定视图层
      data:{  //定义要给前端的数据,页面的所有数据都来自data
        serachMap:{
            keyword:'zz'
        }
      }
  })

</script>

</body>
</html>

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

可以看出，在左边输入框修改数据，右边不会随之改变，但在右边输入框修改数据，左边却会随之发生改变，这就是右边输入框设置的双向绑定！
右边输入框的值改变，会使数据层发生改变，由于视图层和数据层绑定，所以使得左边输入框也随之动态修改。

4.3 事件

在el 和 data属性基础上再添加 methods属性

v-on 绑定事件
v-on 一般简写为 @
v-bind 一般简写为：

<!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 v-on:click="search()">查询</button>
     <p>你要查询的是：{{result.title}}</p>
     <p> <a v-bind:href="result.site" target="_blank">{{result.title}} </a></p>
    
    </div>

<!-- 数据和视图层分离 -->
<!-- 引入vue -->
<script src="./lib/vue.js"></script> 

<script>
  //代码部分
  //创建vue对象，
  var vue = new Vue({
      el:'#app',  //绑定视图层
      data:{  //定义要给前端的数据,页面的所有数据都来自data
        serachMap:{
            keyword:'zz'
        },
        //查询结果
        result:{}
      },
      methods:{ //事件
        search(){
            console.log("search")
            this.result={
                "title":"zz",
                "site":"https://blog.csdn.net/nzzynl95_"
            }
        }
      }
  })

</script>

</body>
</html>

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

5. 路由

通过路由实现单页面跳转
创建一个vue-router文件夹 == > 下载vue和vue-router ==> 创建一个lib文件夹，将vue.js和vue-router.js复制一份到此lib文件夹中 ==> 创建一个路由.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>

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

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

6. axios 异步通信

ajax技术是一种在无需重新加载整个网页情况下，能更新部分网页的技术，而axios是ajax技术的一种实现

vue推荐使用axios做通信！

创建一个axios文件夹 == > 下载vue和axios ==> 创建一个lib文件夹，将vue.js和axios.js复制一份到此lib文件夹中 ==> 创建一个 axios.html文件 ==>创建一个list.json文件夹

axios.html文件：

<div id="app">
    <button @click="getList()">测试</button>
    
  </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('list.json').then(response => {
            console.log(response)
            // 后端接收的值交给前端的vue管理
            this.lists = response.data
          })
        }
      }
    })
  </script>

list.json文件：

[
  {'name1':'小白' 
},
  {'name2':'小灰' 
},
  {'name3':'小蓝' 
}
]

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

7. Vue实际项目开发学习

将一个完整项目复制到当前nodejs文件夹下 ==> npm install 下载依赖 ==>npm run dev 启动项目

整个项目目录：
在这里插入图片描述
安装完依赖，启动成功后，自动跳转到登录页面

输入用户名和密码后，成功进入

以上就是 Vue第一天快速入门的学习，从下载安装新软件，到熟悉软件，再到创建简单的小程序！

Easonnzz

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Vue——快速入门

文章目录1. 环境配置2. NodeJS3. 了解NPM，安装一些常用的环境4. Vue4.1 第一个vue程序4.2 双向绑定4.3 事件5. 路由6. axios 异步通信7. Vue实际项目开发学习1. 环境配置开发工具：VSCode(推荐)、IDEAVSCode下载地址：https://code.visualstudio.com/还需要一个前端环境：NodeJSNodeJS下载地...
复制链接

扫一扫

专栏目录