简介
特点: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-cli
npm install -g @vue/cli
# 创立一个新的我的项目
vue create project-name
# 启动
cd project-name
yarn server
# or
# 可视化的治理界面
vue ui
整个我的项目都用 Vue 开发
我的项目构造
须要开发的我的项目文件都在 src 目录上面
补充:node_modules:我的项目依赖包(通过 npm install
装置)
常用命令
- 装置依赖:
npm install
/yarn
/cnpm install
- 启动服务:
npm run dev
/npm run serve
- 我的项目打包:
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.js
import 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 文件夹放到服务器即可
练习
- v-if 和 v -show 的区别?
- 动静绑定 class 的用法?
- 试着封装 / 应用一个组件?
来自九旬的原创文章