简介

特点：MVVM框架，双向绑定，数据驱动，单页面，组件化。

区别

Vue 和 jQuery 的区别：不间接操作DOM，而是操作数据。

案例：Hello World => 你好，世界

HTML代码：

<h1>{{msg}}</h1>

jQuery实现

$("h1").text("你好，世界");

Vue 实现

this.msg = '你好，世界'

创立我的项目

1、CDN

<!-- 开发环境版本，蕴含了有帮忙的命令行正告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

适宜在已有的非Vue我的项目中，增加Vue，用于页面交互，晓得就行了，用的不多。

2、Vue-Cli（举荐）

前后端拆散我的项目的开发，

装置Node.js（Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。）

应用 NPM（Node Packages Modules，Node的包管理工具）下载

下载 Vue-Cli（基于 Vue.js 进行疾速开发的残缺零碎）

应用命令行工具 cmd 、Git bash、VScode的终端都能够

# 全局装置vue-clinpm install -g @vue/cli# 创立一个新的我的项目vue create project-name# 启动cd project-nameyarn server# or# 可视化的治理界面vue ui

整个我的项目都用 Vue 开发

我的项目构造

须要开发的我的项目文件都在 src 目录上面

补充：node_modules：我的项目依赖包（通过npm install装置）

常用命令

  1. 装置依赖：npm install/yarn/cnpm install
  2. 启动服务：npm run dev/npm run serve
  3. 我的项目打包：npm run build

2-3参考package.json文件的script对象

切换源

解决 npm 服务器在国内网速慢、丢包的问题。

  • cnpm

  • yarn

    开发工具

下载开发工具：VScode下载

装置插件：Extensions for VScode

  • Vetur

  • ESLint

    调试工具

Vue-Devtool插件装置

  • 火狐浏览器插件（不必迷信上网）：下载地址
  • 蓝灯（迷信上网）：下载地址
  • Google浏览器插件（迷信上网）：下载地址

  • 应用办法：vue-devtools 官网

    根本语法

参考：Vue.js中武官网

v-for / v-key

v-if / v-show

v-bind / :

v-model

v-on:click / @click

生命周期

参考：Vue生命周期，示意图：图片

  • beforeCreate（创立之前）
  • created（创立之后）
  • beforeMount（挂载之前）
  • mounted（挂载之后）
  • beforeUpdate（更新之前）
  • updated（更新之后）
  • beforeDestory（销毁之前）

  • destroyed（销毁之后）

    组件

组件化开发是 Vue 的一大特点，组件化开发极大的晋升了代码的可复用性，也不便团队分工协作开发。

封装组件

# /src/components/Button.vue<template>  <div>    <button>{{ text }}</button>  </div></template><script>export default {  props: {    text: String,  },};</script>

应用组件

# /src/view/about.vue<template>  <div class="about">    <h1>This is an about page</h1>    <Button :text="ButtonText"></Button>  </div></template><script>import Button from "@/components/Button.vue";export default {  components: {    Button,  },  data: function() {    return {      ButtonText: "我是一个按钮",    };  },};</script>

组件传参

应用 props

第三方组件库

PC端：iView、Element、Ant Design

挪动端：Vant、cube-ui

iView

官网地址：iView

下载组件

npm install view-design --save

全局应用组件

// main.jsimport ViewUI from 'view-design';import 'view-design/dist/styles/iview.css';Vue.use(ViewUI);

ivew-admin

iView-admin是iView生态中的成员之一，是一套采纳前后端拆散开发模式，基于Vue的后盾管理系统前端解决方案。iView-admin2.0脱离1.x版本进行重构，换用Webpack4.0 + Vue-cli3.0作为根本开发环境。内置了开发后盾管理系统罕用的逻辑性能，和开箱即用的业务组件，旨在让开发者可能以最小的老本开发后盾管理系统，升高开发量。

地址：iview-admin

其余插件

Vue-router

路由插件

两种模式

  • hash / #

  • history / 历史记录

    Axios

HTTP申请库

装置

npm install axios --save

vue.config.js 配置代理

const URL = 'https://cnodejs.org'; // 申请的地址module.exports = {    outputDir: 'dist',    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',    devServer: {        disableHostCheck: true,        port: 8080,        open: true,        proxy: {            '/api': { // /api =》'https://cnodejs.org'                target: URL            }        }    }};

Vuex

状态治理

打包上线

在我的项目开发实现之后，应用npm run build命令来打包我的项目，打包实现后会生成 dist 文件夹

我的项目上线时，间接将dist文件夹放到服务器即可

练习

  1. v-if和v-show的区别？
  2. 动静绑定class的用法？
  3. 试着封装/应用一个组件？
来自九旬的原创文章