前端培训-Vue专题之Vue基础

九旬 等级 1445 1 1

前端培训-Vue专题之Vue基础

简介

特点: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 目录下面 前端培训-Vue专题之Vue基础 补充: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 服务器在国内网速慢、丢包的问题。

下载开发工具:VScode下载

安装插件:Extensions for VScode

  • Vetur
  • ESLint

    调试工具

Vue-Devtool插件安装

参考: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文件夹放到服务器即可

练习

  1. v-if和v-show的区别?
  2. 动态绑定class的用法?
  3. 试着封装/使用一个组件?

来自九旬的原创文章

收藏
评论区

相关推荐

Vue 组件通信方式及其应用场景总结
前言 相信实际项目中用过vue的同学,一定对vue中父子组件之间的通信并不陌生,vue中采用良好的数据通讯方式,避免组件通信带来的困扰。今天笔者和大家一起分享vue父子组件之间的通信方式,优缺点,及其实际工作中的应用场景 首先我们带着这些问题去思考 1 vue中到底有多少种父子组件通信方式? 2 vue中那种父子组件最佳通信方式是什么? 3
vue项目无配置文件解决方案
问题在开发vue项目时,需要重新设置项目的启动端口,发现项目目录中并没有相关的配置文件【config目录】vue脚手架版本【通过vue version查询】:@vue/cli 4.5.13解决方案在vue项目根目录下创建vue.config.js配置文件vue.config.jsmodule.exports devServer: d
vscode的eslint插件不起作用
最近在用vue进行开发,但是vsCode中的eslint插件装上之后不起作用 1.vsCode打开“设置”,选择"settings.json" ![](https://img2018.cnblogs.com/blog/921637/201905/921637-20190516165707540-1304630667.png) 2.输入一段脚本
Vite使Vue CLI过时了吗?
![](https://oscimg.oschina.net/oscnet/b9aed6aa-9d14-4fd3-82b8-e1724221ee71.jpg) **文末福利资源更新** Vue生态系统中有一个名为Vite的新构建工具,它的开发服务器比Vue CLI快10-100倍。 这是否意味着Vue CLI已经过时了?在本文中,我将比较这两种构
10分钟阅读一篇关于Vue
![file](https://oscimg.oschina.net/oscnet/up-4f8ccb1755bb73c4ffe6a7ba91253ddc.jpg "file") Vue-cli Vue脚手架的基本用法,vue脚手架用于快速生成vue项目基础架构: 地址: https://cli.vuejs.org/zh/ 使用方式,安装3.x版本
2016我的心路历程:从 Vue 到 Webpack 到 iView
> 2016年工作中做过最自豪的两件事情: * 把 Vue.js 和 Webpack 技术栈引进公司并逐步成为前端规范; * 开源 [iView](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fiview%2Fiview) 项目。 初识 Vue ===
Electron开发使用Vue Devtools
转自 \[[https://orchidflower.oschina.io/2017/03/29/Using-Vue-Devtools-in-Electron/](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Forchidflower.oschina.io%2F2017%2F03%2F29
Go在GitHub开源项目
后台管理系统 [https://github.com/flipped-aurora/gin-vue-admin](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fflipped-aurora%2Fgin-vue-admin) Gin-vue-ad
VUE AntDesign DatePicker设置默认显示当前日期
1:main.js中引入依赖 import Vue from "vue"; import { DatePicker } from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; #设置中文 import moment from 'm
Vue CLI 3搭建vue+vuex 最全分析
一、介绍 ==== Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件: **CLI**:`@vue/cli` 全局安装的 npm 包,提供了终端里的vue命令(如:vue create 、vue serve 、vue ui 等命令) **CLI 服务**:`@vue/cli-service`是一个开发环境依赖。构建于 [we
Vue CLI 2.x搭建vue,目录最全分析
一、vue-cli介绍 =========== vue-cli是一个用于快速搭建vue项目的 脚手架。 二、vue-cli安装、更新 ============== 安装过nodeJs 、cnpm 后,全局安装vue-cli(以后其他项目可直接使用): cnpm install -g vue-cli 更新: cnpm update
Vue 兼容 ie9 的全面解决方案
前言 -- **背景情况** * vue - 2.5.11 * vue-cli 使用模板 `webpack-simple` * http请求:axios Vue 官方对于 ie 浏览器版本兼容情况的描述是 ie9+,即是 ie9 及更高的版本。经过测试,Vue 的核心框架 `vuejs` 本身,以及生态的官方核心插件(VueRouter、V
Vue 开发必须知道的 36 个技巧
![](https://oscimg.oschina.net/oscnet/b77f0c050deecad634f32cd1bb74d303512.jpg) 作者: 火狼 https://segmentfault.com/a/1190000020620972 关注Vue中文社区,每日精选好文 前言 ==
vue cli创建项目失败
最近使用vue cli创建项目时总是失败,在此分享一下我的解决办法,简单粗暴: npm uninstall -g vue-cli npm uninstall -g @vue/cli npm cache clean --force npm install -g @vue/cli 如果这些操作之后还是不行的话,找到
vue echarts vue
1、git地址 [https://github.com/ecomfe/vue-echarts](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fecomfe%2Fvue-echarts) 2、使用 (1)安装 npm install vue-echa

热门文章

一次搞懂-JavaScript之异步编程nextTick原理解析

最新文章

nextTick原理解析一次搞懂-JavaScript之异步编程