初识前端开发利器-Vue.js

原创

是逍遥哥哥啊 2023-06-06 16:39:08 博主文章分类：前端 ©著作权

文章标签 Vue html vue.js 文章分类 运维

©著作权归作者所有：来自51CTO博客作者是逍遥哥哥啊的原创作品，请联系作者获取转载授权，否则将追究法律责任

本来我想结合b站禹神的课来更细致地完善博文的，想下还是算了，自己只是一个运维，必要时也只是想用用vue里的东西，并不想去深究到底层，文档摘抄都来自<<Django+Vue.js实战派Python Web开发与运维>>这本书里，这本书大致看了下有很多处错误地方，不太建议新手购买观看，如果想学Vue的话还是买专门讲Vue类型书籍。

需求背景

运维devops平台决定前后端分离，前端采用Vue2+ElementUI构建，技术选型上我觉得vue比较适合做内部管理后台小项目，对于新手来说也比较友好，上手快

Vue框架介绍

Vue优点

Vue.js拥有诸多优点，如语法优雅，简洁精炼，代码可读性搞，组件的模块化等，这些优点让vue.js能够与React，Angular等老牌前端开发框架并驾齐驱，在国内开发者中，Vue.js占据的位置越来越重要，逐渐有成为三个前端框架之首的趋势。

认识Vue.js

Vue.js是一套主流的，用于构建用户界面的渐进式JavaScript框架。

什么事渐进式框架呢，就是说开发者不需要一开始就使用Vue.js的全部功能，可以根据场景有选择地进行使用，比如，可以和传统的网站开发架构融合在一起，把Vue.js当作一个类似JQuery库来使用(这个比较深有体会,我在传统前端项目中需要引入element样式，这时候是必须要引入Vue.js，并且初始化Vue 实例挂载到id为app的html元素上，这时候我就可以在id 为app元素内的模板里去使用element样式了)，可以使用Vue.js的组件技术，路由技术来开发大型，负载的单页面应用程序(SPA应用)

用Vue-CLI脚手架快速搭建项目骨架

VUE-CLI是一个官方发布Vue.js项目脚手架，使用VUE-CLI可以快速创建Vue.js项目，利用它可以生成目录结构，方便本地调式，单元测试，热加载和代码部署等

(1),安装

npm install -g vue-cli

在安装完成后，可以输入vue -V命令查看Vue-CLI的版本信息

（2）基本使用

在安装vue-CLI成功后，创建一个基于Webpack模板的新项目，具体命令如下:

vue init webpack myshop-vue

执行完成后，可以看到F:\\目录下新增一个脚手架的项目文件夹myshop-vue

(3)了解目录结构

脚手架生成的目录结构如下所示

初识前端开发利器-Vue.js_Vue

build/ // 构建配置相关的文件夹

build.js // 生产环境构建脚本
check-versions.js // 检查 Node 和 npm 版本的脚本
dev-server.js // 开发环境的服务端入口脚本
utils.js // 构建配置相关的实用工具函数
webpack.base.conf.js // webpack 基础配置
webpack.dev.conf.js // webpack 开发环境配置
webpack.prod.conf.js // webpack 生产环境配置

config/ // 项目配置相关的文件夹

dev.env.js // 开发环境变量配置
index.js // 通用的配置
prod.env.js // 生产环境变量配置

node_modules/ // 依赖模块安装目录
src/ // 项目源码目录

assets/ // 资源文件夹（图像、样式等）
components/ // Vue 组件文件夹
router/ // 路由配置文件夹
App.vue // 根组件
main.js // 主入口文件

static/ // 静态资源文件夹（不会经过构建过程，直接复制到输出目录）
test/ // 测试相关文件夹
.babelrc // Babel 配置文件
.editorconfig // 编辑器配置文件
.eslintignore // ESLint 忽略配置文件
.eslintrc.js // ESLint 配置文件
.gitignore // Git 忽略配置文件
.postcssrc.js // PostCSS 配置文件
index.html // HTML 模板文件
package.json // 项目依赖和脚本配置文件
README.md // 项目说明文件

用NPM进行包管理和分发

NPM(Node Package Manager)是JavaScript的包管理工具，可以让JavaScript开发者轻松地共享代码

1，NPM的使用场景

NPM是随同Node.js一起安装的包管理工具，它是Node.js的默认包管理工具，能够解决Node.js代码部署上的很多问题

(1)从NPM服务器上下载别人编写的第三方包

(2)从NPM服务器上下载并安装别人编写的命令行程序。

(3)将自己编写的包或命令行程序上传到NPM服务器中供别人使用。

2，什么是Node.js

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动，非阻塞式I/O模型。

众所周知，JavaScript是一种脚本语言，用它编写的程序不能单独运行，必须在浏览器中由JavaScript引擎解释执行。Node.js是一个能让JavaScript运行在服务端的开发平台，它让JavaScript成为与PHP，Python，Ruby等服务端语言"平起平坐"的脚本语言。

3，安装Node.js

进入Node.js的官网，选择合适的版本进行下载安装，安装过程比较简单，这里不再赘述。在完成安装后，在命令行中输入“node -v”来查看安装的版本信息。由于Node.js默认集成了NPM，所以还可以输入“npm -v”来查看NPM的版本，如图：

初识前端开发利器-Vue.js_vue.js_02

用npm run build命令打包项目

npm run build

Vue.js的基本操作

用插值实现数据绑定

“插值”是指，使用“{{变量}}”的方法将数据插入到html文档中，这样在运行时，“{{变量}}”会被Vue.js实例数据对象中的值替换。

插值分为文本插值，html插值等。

文本插值：使用双大括号，将数据对象以文本的方式显示到界面上。

html插值：使用v-html指令输出html代码。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!--引入Vue.js库 -->
  <script language="" src="../node_modules/vue/dist/vue.js">
  </script>
</head>
<body>
<!-- 定义 id="app"的<div>标签-->
  <div id="app">
    <h1>{{message}}</h1> <!--显示数据 -->
    <h1 v-html="msgHtml"></h1>
  </div>
<script language="">
  //实例化vue.js应用
  var vm = new Vue({
    el:"#app",
    data:{
      message:"hello vue",
      msgHtml: "<span style='color: red'>这里的内容以红色显示</span>"
    }
  })
</script>
</body>
</html>

用computed属性实现变量监听

computed属性用于监听定义的变量。该变量不需要在data中声明，而是直接在computed属性中定义，之后即可在页面上监听变量。

使用computed属性监听变量很简单：在computed属性中创建一个函数并编写表达式，然后在html页面上使用时，只需要写函数名即可，并且不用加括号。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!--引入Vue.js库 -->
  <script language="" src="../node_modules/vue/dist/vue.js">
  </script>
</head>
<body>
<!-- 定义 id="app"的<div>标签-->
  <div id="app">
   <p>comptued: "{{showinfo}}"</p>
  </div>
<script type="text/javascript">
  //实例化vue.js应用
  var vm = new Vue({
    el:"#app",
    data:{
      name: "张三",
      age: 20,
      sex: 0,
    },
    computed:{
      showinfo(){
        return "名称:" +  + ", 年龄:" + this.age + ",性别:" + (this.sex == 0 ? '男' : '女')
      }
    }
  })
</script>
</body>
</html>

用class和style设置样式

可以通过class和style设置样式。class用于指定html标签的样式，style用于指定内联样式，在Vue.js中，可以使用v-bind指令来设置它们。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!--引入Vue.js库 -->
  <script language="" src="../node_modules/vue/dist/vue.js">
  </script>
</head>
<body>
  <style>
    .active {
      color: #008000;
    }
    .delete {
      background: #ff0000;
    }
    .error {
      font-size: 30px;
    }
  </style>
  <!-- 定义 id="app"的<div>标签-->
  <div id="app">
    <h2>class绑定,使用v-bind:class或:class</h2>
    <!-- activeClass 会被置换为样式表中的"active",对应样式为绿色-->
    <p :class="activeClass">字符串表达式</p>
    <!-- isDelete为true，渲染delete样式;当hashError为false时,则不显示error样式-->
    <p :class="{delete: isDelete, error: hashError}">对象表达式</p>
    <!-- 渲染'active', 'error'样式,注意要加上单引号,否则会获取data中的值-->
    <p :class="['active', 'error']">数组表达式</p>
    <!-- style绑定,使用v-bind:style或:style -->
    <p :style="{color: activeColor, fontsize: fontsize + 'px'}"> Style绑定</p>
  </div>
<script type="text/javascript">
  //实例化vue.js应用
  var vm = new Vue({
    el:"#app",
    data:{
      activeClass: 'active',
      isDelete: true,
      hashError: false,
      activeColor: 'red',
      fontsize: 20
    }
  })
</script>
</body>
</html>

用v-if实现条件渲染

Vue.js提供了判断指令，如v-if，v-else-if，v-else和v-show。其中，v-if指令可以单独使用，也可以配合v-else-if与v-else指令使用。

Vue.js还提供了v-show指令，它用来决定元素的css的display属性隐藏与否。带有v-show指令的标签元素，会始终被渲染并保留在dom中。注意，v-show指令不支持<template>元素，也不支持v-else指令。

既然提到了v-if和v-show也就多一嘴，不得不说两者之间的区别了：

v-if

写法:v-if="表达式"

特点:它在表达式条件为"true"时才渲染元素，当条件为"false"时，不展示的dom元素直接被移除

适用于:切换频率较低的场景

v-show

写法:v-show="表达式"

特点:它是通过css的"display"属性来切换元素的显示与隐藏，不展示的dom元素不会被移除仅仅是隐藏起来。

适用于:切换频率较高的场景

v-if示例:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!--引入Vue.js库 -->
  <script language="" src="../node_modules/vue/dist/vue.js">
  </script>
</head>
<body>
<!-- 定义 id="app"的<div>标签-->
  <div id="app">
    <div v-if="picShow"> True显示,False不显示</div>
    <div v-if="score>=90 && score<=100"> 优秀</div>
    <div v-else-if="score>=70 && score<=90"> 良好</div>
    <div v-else-if="score>=60 && score<=70">及格</div>
    <div v-else-if="score>=0 && score<60"> 不及格</div>
    <div v-else>错误</div>
  </div>
<script type="text/javascript">
  //实例化vue.js应用
  var vm = new Vue({
    el:"#app",
    data:{
      picShow: true,
      score: 65
    }
  })
</script>
</body>
</html>

用v-for实现列表渲染

利用v-for指令，可以基于一个数组渲染一个列表。v-for指令需要使用"item in items"形式的语法，其中，items是源数据数组，

item是被迭代的数组元素的别名。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!--引入Vue.js库 -->
  <script language="" src="../node_modules/vue/dist/vue.js">
  </script>
</head>
<body>
<!-- 定义 id="app"的<div>标签-->
  <ul id="app">
    <li v-for="item in goodsList">
      <p>{{item.title}}</p>
      <span v-if="item.hot">火爆</span>
    </li>
  </ul>
<script type="text/javascript">
  //实例化vue.js应用
  var vm = new Vue({
    el:"#app",
    data:{
      goodsList:[
        {
          title: "哈密瓜大枣",
          hot: true,
          id: 1
        },
        {
          title: "和田大枣",
          hot: true,
          id: 2
        },
        {
          title: "若羌枣",
          hot: false,
          id: 3
        },
      ],
    }
  })
</script>
</body>
</html>

用"v-on:" 或"@"实现事件绑定

Vue.js的事件绑定格式是"v-on:"或者“@”。事件处理方法需要在methods中定义。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!--引入Vue.js库 -->
  <script language="" src="../node_modules/vue/dist/vue.js">
  </script>
</head>
<body>
<!-- 定义 id="app"的<div>标签-->
  <div id="app">
    <button v-on:click="counter +=1">Add 1</button>
    <p>点击次数: {{counter}}</p>
    <button @click="clickMe">click me</button>
  </div>
<script type="text/javascript">
  //实例化vue.js应用
  var vm = new Vue({
    el:"#app",
    data:{
      counter: 0
    },
    methods:{
      clickMe(){
        console.log("我是methods中的方法clickMe")
      }
    }
  })
</script>
</body>
</html>

用v-model实现双向数据绑定

v-model的作用是，在表单标签<input>,<textarea>,<select>,及Vue组件上，实现表单元素和数据的双向绑定。它负责监听用户的输入，并更新数据。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!--引入Vue.js库 -->
  <script language="" src="../node_modules/vue/dist/vue.js">
  </script>
</head>
<body>
<!-- 定义 id="app"的<div>标签-->
  <div id="app">
    <input type="text" v-model="text">
    {{text}}
  </div>
<script language="">
  //实例化vue.js应用
  var vm = new Vue({
    el:"#app",
    data:{
      text: 'hello world'
    }
  })
</script>
</body>
</html>

我们可以把整个实现过程分为3点：

将文本框与data中数据绑定。

当文本框内容变化时，data中的数据同步变化。

当data中的数据变化时，文本框的内容同步变化。

用Vue Router库实现路由管理

了解Vue Router库

Vue Router是Vue.js官方推荐的路由管理库。它和Vue.js的核心深度集成，让构建单页应用变得易如反掌。

使用Vue.js和Vue Router库创建单页应用非常的简单：使用Vue.js开发，整个应用已经被拆分成了独立的组件；使用Vue Router库可以把路由映射到各个组件，并把各个组件渲染到正确的地方。

基本用法

安装

npm install --save vue-router

(1)编辑/src/router/index.js，该文件是路由管理的核心文件，如下:

import Vue from 'vue' //引入Vue.js框架
import Router from 'vue-router' //引用vue-router组件
import HelloWorld from '@/components/HelloWorld' //引入@路径下名称为HelloWorld的页面组件

Vue.use(Router)  //Vue全局使用Router

//定义路由,只有在导出后在其他地方才可以使用
export default new Router({
  routes: [
    //在访问根路径时会链接到HelloWorld.vue组件
    {
      path: '/hello',   //路由的路径
      name: 'HelloWorld', //路由的名称
      component: HelloWorld //对应的组件模板
    }
  ]
})

(2)在项目的main.js中引入路由

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'  //引入路由,会去寻找index.js配置文件

Vue.config.productionTip = false //关闭生产模式下的提示

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, //在框架中使用路由功能
  components: { App },
  template: '<App/>'
})

(3)查看HelloWorld.vue的代码

<template>
  <div class="hello">
    <h1>{{msg}}</h1>
    <h2>Essential Links</h2>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    data(){
      return {
        msg: "Welcome to Your Vue.js App"
      }
    }
  }
</script>

执行命令"npm run dev"启动服务,然后通过http://localhsot:8080/#/hello进行访问

用Axios库实现数据交互

在Vue中，可以使用axios库实现数据交互。

了解Axios库

axios是一个基于Promise的HTTP库，可以用在浏览器和Node.js中。其特性如下:

可以从浏览器中创建XMLHttpRequests.

可以从node.js创建HTTP请求

支持Promise API

可以拦截请求和响应

可以转换请求数据和响应数据

可以自动转换JSON数据

客户端支持防御XSRF

基本用法

安装库

npm install axios

(1)执行GET请求

axios.get('http://localhost:8000/goods/1').then(function (response){
		console.log(response);
}).catch(function (error) {
	  console.log(error)
});

(2)执行POST请求

axios.post('http://localhost:8000/goods/', {
	name: '大枣',
  price: '59'
}).then(function (response) {
	console.log(response)
}).catch(function (error) {
	console.log(error)
})

实际在具体的项目中，还需要进一步地封装和改造

用Vuex实现状态管理

Vuex是一个专为Vue.js应用程序开发的状态管理库。它采用集中存储来管理应用的所有组件的状态，并以相应的规则保证"状态以一种可预测的方式发生变化"。Vuex能够高效地实现组件之间的数据共享，从而提供开发效率。

基本用法

安装vuex库

npm install vuex --

Vuex默认的4种基本对象如下.

state:数据存储状态。

getters:对外输出的数据，可以将其理解为state的计算属性。

mutations：同步改变状态值，在组件中使用$store.commit()进行操作。

actions:异步操作，在组件中使用$store.dispath()进行操作

基本用法

(1)新建src/vuex目录，在该目录下创建store.js文件，添加如下代码:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  count:10
}
const store = new Vuex.Store({
  state
})
export default store

将store对象导出,之后可以在new Vue{{}}处引入使用。

(2)打开src/main.js，引入Vuex

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'  //引入路由,会去寻找index.js配置文件
import store from "./vuex/store"; //引入Vuex

Vue.config.productionTip = false //关闭生产模式下的提示

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, //在框架中使用路由功能
  store, //在框架中使用vuex功能
  components: { App },
  template: '<App/>'
})

(3)打开文件"/src/components/HelloWorld.Vue"，获取 $初识前端开发利器-Vue.js_vue.js_03$ state.count变量，如下:

<template>
  <div class="hello">
    <h1>{{$store.state.count}}</h1>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    data(){
      return {
        msg: "Welcome to Your Vue.js App"
      }
    }
  }
</script>

用mutaion和action操作变量

可以使用mutaions去改变Vuex中state的状态。mutaions必须是同步参数。在使用state.commit()方法提交mutaions时，还可以传入额外的参数。

打开Vuex/store.js文件。示例:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  count:10
}
const mutations = {
  mutationAdd(state, n=10){
    return state.count+=n
  },
  mutationReduce(state, n=0){
    return state.count-=n
  }
}
const store = new Vuex.Store({
    state,
    mutations
})
export default store

在store.js中定义了mutationAdd()函数和mutationReduce()函数,这两个函数均有两个参数，第一个参数默认为state，第2个参数为自定义参数。

打开components/HelloWorld.vue，编辑以下内容

<template>
  <div class="hello">
    <h1>{{$store.state.count}}</h1>
    <button @click="addclick(1)">+</button>
    <button @click="reduceclick(1)">-</button>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    methods:{
      addclick(n){
        this.$store.commit('mutationAdd', n)
      },
      reduceclick(n){
        this.$store.commit('mutationReduce', n)
      }
    }
  }
</script>

为了解决mutations只有同步的问题，Vuex提出了“异步处理概念”异步代码改用

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
  count:10
}
const mutations = {
  mutationAdd(state, n = 10) {
    return state.count += n
  },
  mutationReduce(state, n = 0) {
    return state.count -= n
  }
}
const  actions = {
  actionsAdd(context, n){
    return context.commit('mutationAdd', n)
  },
  actionsReduce(context, n){
    return context.commit('mutationReduce', n)
  }
}
const store = new Vuex.Store({
    state,
    mutations,
    actions,
})
export default store

HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{$store.state.count}}</h1>
    <button @click="async_add(5)">+</button>
    <button @click="async_reduce(5)">-</button>
  </div>
</template>
<script>
  export default {
    name: 'HelloWorld',
    methods:{
      async_add(n){
        this.$store.dispatch( 'actionsAdd', n)
      },
      async_reduce(n){
        this.$store.dispatch('actionsReduce', n)
      },
    }
  }
</script>

用getters获取变量

getters可以被认为时store的计算属性，类似于Vue中computed属性。

(1)在store.js文件中增加getters属性。

const getters={
	getCount(state){
  	return state.count
  }
}

(2)将getters属性导出

const store = new Vuex.Store({
	state,
  mutations,
  actions,
  getters
})

(3)在HelloWorld.vue中，定义一个名为count的computed属性。然后再html页面中使用{{count}}获取

<h1>我是getters{{count}}</h1>
...
computed:{
	count(){
  	return this.$store.getters.getCount
  }
}

小结:总得来说，虽然是不难，但是实际项目中应用肯定没有这么简单啊，但是基础得东西你不能不去了解，不然连代码都看不懂，写代码和学习也是一样，不积硅步难以致千里，很多人可能连第一步都不敢去迈，怕写的丑，写的垃圾就不敢写，这样会导致想法永远落实不到实践，大胆设想，小心验证，如果连小心验证的第一步你都没做，怕这怕那儿是不行的，感于去实践，虚心听取别人的建议，落实改进，永远带着问题去思考，去学习，而不是囫囵吞枣式的一锅端。