学习Vue的三点好处是什么?

  • 开发更快速, 更高效
  • 企业开发都在使用
  • 前端工程师必备技能, 高薪

Vue 是什么?

渐进式javacript框架, 一套拥有自己规则的语法
官网地址: https://cn.vuejs.org/ (作者: 尤雨溪)
库: 封装的属性或方法 (例jQuery)
框架: 拥有自己的语法规则和元素, 比库强大的多 (例Vue)

@vue/cli脚手架

脚手架是为了保证各施工过程顺利进行而搭设的工作平台
代码里体现: 一套固定标准文件夹+文件+webpack配置代
好处:开箱即用, webpack0配置

@vue/cli脚手架安装 使用

1 yarn global add @vue/cli 安装最新版本 vue-V 查看版本
2. 创建项目 vue create 项目名
3. 选择 Vue 2 版本
4. 启动项目 cd 项目目录 yarn serve
5. 认识目录结构
main.js 入口文件
App.vue 根组件
index.html 项目中唯一的 html 文件
6. 修改配置 vue.config.js 关闭 ESLint
lintOnSave: false
7. 清理欢迎界面 删除 assets
删除 components 将 App.vue 的所有代码删除, 留下一个基本结构

Vue指令

Vue语法-插值表达式

又叫: 声明式渲染/文本插值
作用 将表达式的结果插入到标签中
语法: {{ 表达式 }}

Vue指令_v-bind

作用 动态绑定属性
用法 v-bind:属性名=“Vue 变量”
:属性名=“变量”

Vue指令_v-bind

作用 绑定事件
用法 事件处理函数要写在 methods 中
v-on:事件名=“事件处理函数”
@事件名=“事件处理函数”
传参 @事件名=“事件处理函数(实参)”
事件对象 无传参 第一个参数就是事件对象 e
有传参 手动传入 $event
修饰符 事件修饰符
.prevent 阻止默认行为
.stop 阻止冒泡
用法 @事件名.修饰符
按键修饰符 只能用于键盘事件
.enter 捕获回车
.esc 捕获 ESC

Vue指令_v-bind

作用 双向数据绑定目前只能用于表单
用法 v-model=“变量”
下拉框 v-model 要写在 select 上, 绑定的值是 option 的 value 属性
复选框 绑定的变量是数组 绑定的值是 value
非数组 绑定的值是 checked
修饰符.number 转成 number 类型
.trim 去除首尾空白
.lazy 将 input 事件改为 change 事件

Vue指令_v-html v-text

作用 等同于 innerHTML 和 innerText
用法 v-html=“变量”

Vue指令_v-show v-if

作用 循环创建元素
用法 v-for="(循环变量, 索引值) in 目标结构" :key=“id”
作用 控制元素显示隐藏
区别 v-show 设置的是 display: none
v-if 将 DOM 添加 / 删除
v-if 可以接 v-else 或 v-else-if
用法 v-show=“变量”

Vue指令_v-for

作用 循环创建元素
用法 v-for="(循环变量, 索引值) in 目标结构" :key=“id”