Vue基础—脚手架

deng_hao
1,998 阅读4分钟

Vue简介

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

铺垫

在学习Vue之前，需要安装的几个小插件（谷歌：vue-devtools，vs code：vetur，VueHelper）

库和框架

库: 封装的属性或方法 (例jquery.js)

框架: 拥有自己的规则和元素, 比库强大的多 (例vue.js)

脚手架准备

1.全局安装 @vue/cli 模块包

yarn global add @vue/cli
# OR
npm install -g @vue/cli

2.查看 Vue 命令

vue -V

脚手架创建项目-启动服务

1.创建项目 （注意: 项目名不能带大写字母, 中文和特殊符号）

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

2.选择模版（可以上下箭头选择, 回车确定, 弄错了ctrl+c从第1步来）

image.png 3.选择包管理器

image.png 4.等待下载脚手架项目, 需要的依赖包

image.png 5.按照步骤运行两行代码-开启服务器

image.png

脚手架目录分析

image.png 主要文件

node_modules      – 第三方依赖包
public/index.html – 浏览器运行的网页
src/main.js       – webpack打包的入口文件
src/App.vue       – Vue入口页面
package.json      – 依赖包列表文件和自定义命令

1627997238868.png

脚手架自定义配置

/* 覆盖webpack的配置 */
module.exports = {
  devServer: { // 自定义服务配置
    open: true, // 自动打开浏览器
    port: 3000
  }
}

脚手架-eslint了解

eslint是一个插件, 内置在脚手架项目里配置好了, 运行时检查你的代码风格

如何短暂关闭

module.exports = {
//其他代码...
    lintOnSave = false //关闭sslint检查
}

脚手架单Vue文件

  1. template里只能有一个根标签
  2. vue文件-独立模块-作用域互不影响
  3. style配合scoped属性, 保证样式只针对当前template内标签生效
  4. vue文件配合webpack, 把他们打包起来插入到index.html
<!-- template必须, 只能有一个根标签, 影响渲染到页面的标签结构 -->
<template>
  <div>欢迎使用vue</div>
</template>

<!-- js相关 -->
<script>
export default {
  name: 'App'
}
</script>

<!-- 当前组件的样式, 设置scoped, 可以保证样式只对当前页面有效 -->
<style scoped>
</style>

MVVM模型

  • MVVM，一种软件架构模式，决定了写代码的思想和层次

    • M： model数据模型 (data里定义)
    • V： view视图 （页面标签）
    • VM： ViewModel视图模型 (vue.js源码)

  • MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM

    • V （修改视图） -> M（数据自动同步）
    • M（修改数据） -> V （视图自动同步）

MVVM.png 1. 在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！ (思想转变)

Vue指令

vue指令, 实质上就是特殊的 html 标签属性, 特点: v- 开头

v-bind 指令

  • 语法：v-bind:属性名="vue变量"
  • 简写：:属性名="vue变量"
<!-- vue指令-v-bind属性动态赋值 -->
<a v-bind:href="url">我是a标签</a>
<img :src="imgSrc">

v-on 指令

  • 语法

    • v-on:事件名="methods中的函数"
    • v-on:事件名="methods中的函数(实参)"

  • 简写: @事件名="methods中的函数"

<!-- vue指令:   v-on事件绑定-->
<p>你要买商品的数量: {{count}}</p>
<button v-on:click="addFn">增加1个</button>
<button v-on:click="addCountFn(5)">一次加5件</button>

<button @click="subFn">减少</button>

<script>
    export default {
        // ...其他省略
        methods: {
            addFn(){ // this代表export default后面的组件对象(下属有data里return出来的属性)
                this.count++
            },
            addCountFn(num){
                this.count += num
            },
            subFn(){
                this.count--
            }
        }
    }
</script>

v-on事件对象(1.无传参, 通过形参直接接收 2.传参, 通过$event指代事件对象传给事件处理函数)

v-on修饰符:

  • .stop - 阻止事件冒泡
  • .prevent - 阻止默认行为
  • .capture - 事件捕获模式
  • .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调
  • .once - 只触发一次回调
  • .enter - 监测回车按键
  • @keyup.esc - 监测返回按键

v-model 指令

  • 语法: v-model="vue数据变量"

  • 双向数据绑定

    • 数据变化 -> 视图自动同步
    • 视图变化 -> 数据自动同步 v-model修饰符

  • v-model.修饰符="vue数据变量"

    • .number 以parseFloat转成数字类型
    • .trim 去除首尾空白字符
    • .lazy 在change时触发而非inupt时

v-html指令

  • 语法:

    • v-html="vue数据变量"

  • 注意: 会覆盖插值表达式

v-show/v-if 指令

  • 语法:

    • v-show="vue变量"
    • v-if="vue变量"

  • 原理

    • v-show 用的display:none隐藏 (频繁切换使用)
    • v-if 直接从DOM树上移除

  • 高级

    • v-else使用

v-for 指令

  • 语法

    • v-for="(值变量, 索引变量) in 目标结构"
    • v-for="值变量 in 目标结构"

  • 目标结构:

    • 可以遍历数组 / 对象 / 数字 / 字符串

  • 注意:

    v-for的临时变量名不能用到v-for范围外

    同级标签的key值不能重复

avatar
文章
阅读
粉丝