vue入门__Vue脚手架以及基础API

cv工程师_
397 阅读5分钟

OIP-C.jpg 安装：vue-evtools ，这是学习和调试vue必备利器

Vue基本概念

vue是一个渐进式的javascript框架 ，框架：拥有自己的规则和元素，比库强大的多，库是封装的属性或者方法（例如jquery.js）

1.渐进式：就是逐渐按需添加，想用什么就用什么，不必全都使用

image (1).png

vue的特点

  • 1.渐进式
  • 2.数据驱动视图（响应式）
  • 3.组件系统

vue已经是国内最流行的框架，越来越成为前端工程师的一项基础技能。开发更加高率和简洁, 易于维护, 快!快!快!就是块 (甚至测试, Java, Python工程师都要学点vue, 方便与前端沟通)

通过vue可以开发：

  1. pc 项目
  2. 移动端项目
  3. 小程序
  4. 桌面应用

Vue-cli脚手架介绍

vue-cli是vue官方提供的一个全局模块包(通过命令工具行来使用), 用来快速创建一个脚手架项目。

  • 基于webpack
  • 开箱即用,零配置

脚手架是为了保证各施工过程顺利进行而搭设的工作平台

  • 脚手架工程就是一套固定的文件夹+文件+配置的工程, 我们在此基础上开发业务
  • 在开发过程中，脚手架工具是有用的，开发完成（项目上线生产环境），它就没有用了

好处和能力

  • 统一的项目结构(文件夹+文件+配置代码)
  • 开发过程中的webpack各系列支持
    • babel支持
    • eslint约束语法风格（代码风格）
    • 样式预处理器less
    • vue单文件支持
  • 提供一个开发时服务器，预览代码（预览项目）
    • 自动刷新，方便预览
    • 热更新 (只刷新修改的部分)
  • 基于nodejs的命令行工具

安装vue-cli

把@vue/cli模块全局安装： npm install -g @vue/cli

测试是否安装成功：vue --version

创建项目

# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

. 启动项目

进入脚手架项目下, 启动服务，查看效果

cd vuecil-demo

npm run serve

vue-cli项目说明和运行介绍

 vuecil-demo        # 项目目录
    ├── node_modules # 项目依赖的第三方包
    └── public       # 静态文件目录
      ├── favicon.ico# 浏览器小图标
      └── index.html # 单页面的html文件(网页浏览的是它)
    ├── src          # 业务文件夹=》写代码
      ├── assets     # 静态资源
          └── logo.png # vue的logo图片
      ├── components # 组件目录
          └── HelloWorld.vue # 欢迎页面vue代码文件 
      ├── App.vue    # 整个应用的根组件
      └── main.js    # 入口js文件
    ├── package.json # 描述项目及项目
    ├── .gitignore   # git提交忽略配置
    ├── babel.config.js  # babel配置 
    ├── README.md    # 项目说明
	  └── package-lock.json # 项目包版本锁定和下载地址

vue-cli 覆盖webpack配置

目标

使用vue.config.js覆盖webpack的配置。

背景

项目中没有webpack.config.js文件，因为vue用的vue.config.js

操作

项目根目录下新建vue.config.js（和src同级）

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true,
    port: 3000
  },
  lintOnSave: false // 关闭eslint检查
}

重启项目，查看效果

.vue是什么？

在项目中，可以看到很多.vue结尾的文件，它们是什么呢？

.vue文件是单文件组件

  • 后缀名是.vue
  • webpack会使用额外的loader来处理它
  • 一个.vue文件就是一个组件（页面）
  • 整个项目（页面）就是由多个组件构成的

基本组成

由三个部分组成：template + script + style

  • template : 决定模块。类似于.html
  • script： 代码逻辑。类似于.js
  • style: 样式

vue基础-插值表达式

vue有一个最基本的功能： 数据渲染。 将数据（变量，或者利用ajax从后端获取到的数据）展示到页面上。

这里它不会直接操作dom，而是有自己的语法。

功能

将data中定义的数据显示到模板上。

在vue中{{ }}语法，叫做：插值表达式，大白话就是输出{{ }}中的表达式的值的语法。

把{{ }} 理解为一个占位符（一个坑）， {{ msg }} 就是把msg显示在这个占位符中（把msg插到坑里面边去）

语法

{{ }} 可以：

  • 写data数据字段名称
  • 对data数据字段进行表达式运算
    • 拼接
    • 算术运算
    • 三元运算
    • ...

{{}}不能：

  • js语句：声明变量，分支，循环
  • 访问在vue实例中的data之外定义的自定义的变量

vue中的指令

{{ }}可以用来把数据显示在视图上，但它的功能还是相当有限的。例如，如果是一个列表数据（数组）希望使用循环来显示，它就做不到了。所以我们需要继续学习vue的指令系统。

vue提供了指令（directive）功能，这些指令都是以v-开头(例如：v-for )，它们从形式上来看是标签的自定义属性（只不过是由vue提供的） 。

vue中的常用指令：

每个指令都有不同的作用，下面是一些常见的，必须要掌握的指令：

v-on 给标签绑定事件

v-model 把value属性和vue数据变量, 双向绑定到一起

v-for 列表渲染, 所在标签结构, 按照数据数量, 循环生成

v-text 把值当成普通字符串显示, v-text ===> innerText

v-html 把值当做html解析,v-html ===> innerHTML

v-if 直接从DOM树上添加或移除

v-show 用的display:none隐藏   (频繁切换使用)

v-if,v-else-if, v-else 模板中的选择结构

v-bind 用来动态绑定标签上的属性的值。（标签上的属性值不能使用插值表达式来设置）。

avatar
文章
阅读
粉丝