vue基础

Dawn云烟
144 阅读4分钟

vue简介

==渐进式==javacript==框架==, 一套拥有自己规则的语法

@vue/cli脚手架

  • 开箱即用
  • 0配置webpack
  • babel支持
  • css, less支持
  • 开发服务器支持

全局安装命令

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

查看脚手架
vue -V

创建项目
# vue和create是命令, vuecli-demo是文件夹名
vue create vuecli-demo

4.  进入脚手架项目下, 启动内置的热更新本地服务器
cd vuecil-demo
npm run serve
# 或
yarn serve

@vue/cli 目录和代码分析

image.png

主要文件及含义

image.png

@vue/cli 项目架构了解

image.png

_@vue/cli 自定义配置

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

联系可以把默认的关闭

image.png

重要词汇

  • 指令式
  • 声明式
  • 数据驱动视图
  • 双向绑定
  • mvvm设计模式 设计模式是对一般问题的通用解决方案
  • MVVM是什么? MVVM(模型,视图,视图模型双向关联的一种设计模式)
  • MVVM好处? 减少DOM操作,提高开发效率

vue 指令

vue变量 先声明在使用

  • 1 v-bind 绑定动态属性 目标:给标签属性设置
  • 语法：v-bind:属性名="vue变量"
  • 简写：:属性名="vue变量"

b6f504649822dc52b9d2e6e84766525.png

  • 2 v-on 和修饰 onClick 事件绑定 目标:给标签绑定事件 语法
  • v-on:事件名="要执行的==少量代码=="
  • v-on:事件名="methods中的函数"
  • v-on:事件名="methods中的函数(实参)"
  • 简写: @事件名="methods中的函数"

v-on事件对象

语法:

  • 无传参, 通过形参直接接收
  • 传参, 通过$event指代事件对象传给事件处理函数

-v-on修饰符

目的: 在事件后面.修饰符名 - 给事件带来更强大的功能

语法:
  • @事件名.修饰符="methods里函数"
  • .stop - 阻止事件冒泡
  • .prevent - 阻止默认行为
    • .once - 程序运行期间, 只触发一次事件处理函数
v-on按键修饰符

目标: 给键盘事件, 添加修饰符, 增强能力

语法:

  • @keyup.enter - 监测回车按键
  • @keyup.esc - 监测返回按键
3 v-model model:数据
vue指令 v-model

目标: 把value属性和vue数据变量, 双向绑定到一起

语法: v-model="vue数据变量" 双向数据绑定 1- 数据变化 -> 视图自动同步 2- 视图变化 -> 数据自动同步

v-model修饰符的作用

目标1: 让v-model拥有更强大的功能
目标2:能够自动监听表单元素的input事件,并且会自动将该事件传递过来的值赋值给v-model绑定的变量

语法:
v-model.修饰符="vue数据变量"
number   以parseFloat转成数字类型
trim     去除首尾空白字符
lazy     在change时触发而非inupt时  change表示失焦输入框的内容同步

  • 4 v-text和v-html innerHTML innerText

vue指令 v-text和v-html

目的: 更新DOM对象的innerText/innerHTML

语法:
v-text="vue数据变量"   
v-html="vue数据变量"
注意: 会覆盖插值表达式
总结: v-text把值当成普通字符串显示, v-html把值当做html解析

  • 5 v-show和v-if以及v-else

目标: 控制标签的隐藏或出现

语法:
v-show="vue变量" 
v-if="vue变量"
原理
v-show 用的display:none隐藏   (频繁切换使用)
 v-if 直接从DOM树上移除
 高级
 v-else使用
 总结: 使用v-show和v-if以及v-else指令, 方便通过变量控制一套标签出现/隐藏

6 v-for

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

语法
   v-for="(值, 索引) in 目标结构"
v-for="值 in 目标结构"
目标结构:
   可以遍历数组 / 对象 / 数字 / 字符串 (可遍历结构)
 注意:
   v-for的临时变量名不能用到v-for范围外
   
  ` 总结: vue最常用指令, 铺设页面利器, 快速把数据赋予到相同的dom结构上循环生成`

修饰符

image.png

image.png

小知识点

props组件的特性: 1-自定义组件的属性会自动成为组件内根 标签的属性(props中的属性除外) 2-props中的数据是只读
@imput事件,监听内容发生改变时

avatar
文章
阅读
粉丝