Vue 常见的一些指令
1.Vue 基本概念
为何学?
- 效率高
- 占有率高
- 薪资高
是什么?
-
渐进式 JavaScript 框架
-
渐进式
- 逐渐增加功能/学习
-
框架和库
-
库
- 方法和属性的集合
- jQuery / bootstrap
-
框架
- 有自己的一套语法规则, 必须按照规则去写代码
- Vue
-
怎么学
- 多学多用多总结 ( 了解Vue的学习方式和开发方式 )
2.脚手架-介绍
在代码里的体现, 就是一套固定标准的, 文件夹+文件+webpack配置
3.脚手架-准备
安装
- yarn global add @vue/cli
创建项目
- vue create 项目名
认识目录结构
- main.js
- index.html
- App.vue
配置
-
vue.config.js
- 配置和 webpack 一样
启动服务
- yarn serve
4.插值表达式
作用
- 将表达式的结果插入到当前位置
语法
- {{ 表达式 }}
指令
v-bind
-
作用
- 将 vue 变量动态绑定到元素属性上
- vue 变量改变, 元素的属性值也会随之改变
-
用法
v-on
-
作用
- 绑定事件
-
用法
- <a :href="vue变量" @click="事件处理函数">去百度
-
修饰符
-
事件修饰符
-
.stop
- 阻止冒泡
-
.prevent
- 阻止默认行为
-
-
按键修饰符
-
只有键盘事件才可使用
-
.enter
- 按下回车
-
.esc
- 按下 esc
-
-
v-model
-
作用
- vue 变量和表单元素的 value 进行双向绑定
-
用处
- 不需要程序员手动操作 DOM 获取 value 值
-
用法
<input v-model="vue变量" type="text" />
-
修饰符
-
.number
- 将值转为数字后赋给变量, parseFloat
-
.trim
- 将值的首尾空白字符删除后赋给变量
-
.lazy
- 当失去焦点时才赋给变量, change 事件
-
v-if
-
作用
- 控制元素的显示隐藏
-
原理
- 将元素从 DOM 树上添加/移除
-
用法
<input v-if="vue变量" v-model="vue变量" type="text" />
v-show
-
作用
- 控制元素的显示隐藏
-
原理
- 给元素设置 display: none
-
用法
- 同 v-if
v-html / v-text
-
作用
- 同 innerHTML 和 innerText
-
用法
- 默认值
-
注意事项
- 内部的插值表达式会被覆盖
v-for
-
作用
- 遍历目标结构, 根据数据数量渲染标签
-
用法
-
<ul> <li v-for="(item, index) in 目标结构"></li> </ul> -
目标结构
- 数组
- 对象
- 字符串
- 数字
-
item/index 只能在当前 v-for 作用域中使用, 出了 li 就无法使用了
-
Vue 对象核心成员
data
-
作用
- 存放当前 vue 组件变量的
-
注意事项
- 是一个函数, 在函数内部返回一个对象, 对象的属性就是变量名, 值就是变量值
- 如果在函数中访问, 需要加 this
methods
-
作用
- 存放当前 vue 组件函数的
