VUE速成（基础知识）

文章目录

• • • 一、.Vue 环境搭建与创建项目
    • • 1. 搭建Vue环境
      • 2. vue-cli工程的目录
      
      
    • 二、Vue的基础知识
    • • 1. 模板语法
      • • 1.1 插值
        • 1.2 指令
        • 1.3 修饰符
        • 1.4 缩写
        
        
      • 2. 条件渲染
      • 3. 列表渲染
      • 4. 事件处理
      • 5. 数组更新检测
      • 6. 表单输入绑定
      • 7. 计算属性和侦听器
      • • 7.1 计算属性
        • 7.2 侦听器
        
        
      • 8. Class与 Style 绑定
      
      
    
    
  
  

一、.Vue 环境搭建与创建项目

首先需要安装nodejs。

# 查看nodejs是否安装成功（vue对nodejs版本要求不高只要v10+即可）
node -v
# nodejs的包管理工具是npm，而npm的镜像cnpm是淘宝推出的国内镜像。
npm -v
# 安装npm国内镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
# webpack是一个前端工程构建工具


1. 搭建Vue环境

• 前端开发工具使用VSCode
  官网：https://code.visualstudio.com/
  
  需要安装的插件如下：

# 产生vue的高亮语法效果
Vetur
# 中文语言包
Chinese (Simplified) Language Pack for Visual Studio Code
按 "Ctrl+Shift+P" 以显示“命令面板”，然后开始键入 "display" 以筛选和显示“配置显示语言”命令。
# 图标库
vscode-icons
# 其他插件
Auto Rename Tag
AZ AL Dev Tools/AL Code Outline
js-beautify
Debugger for Chrome
VS Code ESLint extension
Node npm
Git Patch
git start-bash
gitignore extension for Visual Studio Code
HTML CSS Support
HTML Snippets
Javascript (ES6) snippets
jQuery Code Snippets
language-stylus
Live Server
Markdown PDF
Markdown Preview Enhanced
Paste Image
Path Intellisense
Stylus Support
View In Browser
VS Color Picker
Vue 3 Snippets


• 官网：https://cn.vuejs.org/index.html
  
  Vue CLI是Vue开发的脚手架工具。
  Vue CLI的官网：https://cli.vuejs.org/zh/
• 修改镜像源加速npm

# 查看当前使用的镜像源
npm config get registry
# 临时修改镜像源
npm install 软件包名 --registry https://registry.npm.taobao.org/
# 全局修改镜像源
npm config set registry https://registry.npm.taobao.org/


还可以参考“修改镜像源加速npm”

• 安装

npm install -g @vue/cli


• 创建项目（项目名称不要使用大写字母）

vue create my-project
vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
You may want to run the following to upgrade to Vue CLI 3:
npm uninstall -g vue-cli
npm install -g @vue/cli
Vue CLI v4.5.13
Failed to check for updates
? Please pick a preset: (Use arrow keys)
> Default ([Vue 2] babel, eslint)
Default (Vue 3) ([Vue 3] babel, eslint)
Manually select features <---选择这个
? Check the features needed for your project: (Press to select, to toggle all, to invert selection)
>(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
? Check the features needed for your project: Babel, Router
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files
> In package.json
? Check the features needed for your project: Babel, Router
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies:
Use Yarn
> Use NPM