vue语法规则总结
- 前言
- 一、npm安装的Vue项目结构展示
- 1.build
- 2.config
- 3.node_modules
- 4.src
- 5.static
- 6.test
- 7. .XX文件
- 8.index.html
- 9.package.json
- 10.README.md
- 二、数据绑定
- 1.实例与数据
- 2.指令与事件
- 2.语法糖
- 三、 计算属性
- 1.用法
- 2.计算属性缓存
- 四、V-bind及class与style绑定
- 1.对象语法
- 2.数组语法
- 3.绑定内联样式
- 五、内置指令
- 六、表单与v-model
- 1.基本用法
- 2.绑定值
- 3.修饰符
- 七、组件
- 1.组件注册
- 2.父子组件通信
- 3.子组件到父组件通讯
- 引用
前言
在刚开始学习vue的时候,对vue的语法结构不是很明确,所以在此进行简单的总结。
一、npm安装的Vue项目结构展示
1.build
项目构建(webpack)相关代码
2.config
配置目录,包括端口号等
3.node_modules
npm加载的项目依赖的模块
4.src
src文件目录下是我们要开发的目录,开发的内容基本上都在这里
- assets
放置一些图片,比如logo等 - components
组件在这里编辑 - router
路由相关内容 - main.js
项目的核心文件 - App.vue
项目的入口,也可以直接将组件写在这里
5.static
静态资源目录,如图片、字体等
6.test
测试相关目录
7. .XX文件
一些配置文件,包括语法配置,git配置等
8.index.html
首页入口文件,可以添加一些meta信息或统计代码
9.package.json
项目的配置文件,使用npm生成项目时,所输入的配置信息,包括项目名称,作者等
10.README.md
Markdown格式的项目说明文档
二、数据绑定
1.实例与数据
- 生命周期
- created
实例完成创建后,尚未挂载,$el还不能用 - mounted
el挂载到实例后调用,一般我们的第一个业务逻辑会在这里处理 - beforeDestroy
销毁之前调用,主要解绑使用addEventListener事件的监听
- 插值与表达式
- {{ }}
- v-pre标签内容不会被编译
- 过滤器
| {{ }}插值的尾部添加一小管道符“。”对数据进行过滤
2.指令与事件
- 带前缀V,当表达式的值改变时,相应的将某些行为应用到Dom上
- v-if
- v-bind
动态更新html元素上的属性,比如id,class等 - v-on
绑定事件监听器
2.语法糖
语法糖也可以说是缩写
- v-bind直接可以省略写为“:”
- v-on可以省略写为“@”
三、 计算属性
1.用法
- 计算属性都以函数的形式写在Vue实例内的compute d选项内,最终返回计算后的结果
- 每个计算属性都有一个getter和setter方法,getter方法用于获取用户中的data数据;setter用于向data中写入数据
- 计算属性可以依赖其他计算属性
- 计算属性不仅可以依赖当前Vue的数据,还可以依赖其他实例的数据
2.计算属性缓存
计算属性可以用method实现,为什么还需要计算属性?
- 计算属性基于缓存,当计算属性所依赖的数据发生变化时,它才会重新获取值
- method是响应式依赖
- 遍历大数组和做大量计算的时候,使用计算属性
四、V-bind及class与style绑定
1.对象语法
- <div :class="{‘className’ : isActive}"></div>
- data: {isActive: true}
- : class可以与普通的类共存
- 对象中也可以传入多个属性,来动态切换class
- 当:class的表达式过程或逻辑复杂时,还可以绑定一个计算属性
2.数组语法
- <div :class="[ activeCls,errorCls]"></div>
- data: {activeCls:‘active’,errorCls: ‘error’}
- 可以在数组语法中使用对象语法
- <div :class="[ activeCls,errorCls]"></div>
- 计算属性动态的给元素设置类名
3.绑定内联样式
- 对象语法
<div :style="{‘color’ : color,‘fontSize’ : fontSize + ‘px’}">文本</div> - 数组语法
<div :style="[styleA,styleB]">文本</div>
五、内置指令
- v-bind
响应并更新DOM特性;例如:v-bind:href v-bind:class v-bind:title 等等 - v-on
用于监听DOM事件; 例如:v-on:click v-on:keyup - v-show
条件渲染指令,为DOM设置css的style属性 - v-model
数据双向绑定;用于表单输入等;例如:< input v-model= “message”>,用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的 - v-if
条件渲染指令,动态在DOM内添加或删除DOM元素 - v-else
条件渲染指令,必须跟v-if成对使用 - v-else-if
判断多层条件,必须跟v-if成对使用 - v-text
更新元素的textContent;例如:<span v-text=“msg”></span> 等同于 < span>{{msg}} </ span> - v-html
更新元素的innerHTML;会把标签名也带上 - v-for
循环指令 - v-cloak
不需要表达式,这个指令保持在元素上直到关联实例结束编译; v-cloak 是一个解决初始化慢导致页面闪动的最佳实践 - v-once
也是一个不需要表达式的指令,作用是定义它的元素或组件只渲染一次,包括元素或组件的所有子节点。首次渲染后,不再随数据的变化重新渲染,将被视为静态内容; v-once 在业务中也很少使用,当你需要进一步优化性能时,可能会用到 - v-pre
不需要表达式,跳过这个元素以及子元素的编译过程,以此来加快整个项目的编译速度 - label for
绑定对应的form标签 - el:element
需要获取的对应元素,html中的容器,(id名)
六、表单与v-model
1.基本用法
- input
对于汉字如果需要实时更新的话可以使用@input来替代v-model - textarea
不再关心初始化时 value 属性 - 单选按钮input:radio
单独使用的时候不需要使用v-model, 只需要单向绑定一个数据到checked属性上即可;互斥的效果的话则需要使用v-model - 复选框input:checkbox
单独使用的时候v-model,多个一起使用的时候类似于单选框
绑定到一个数组里面 - 选择列表 select-option
设置了value
v-model 绑定了 option 元素上的 value
没设置value
v-model 绑定了 option 元素上的 text
与v-for结合, text 和 value 也通过v-bind 绑定到视图模型上
2.绑定值
- 单选框
: 和 v-model 的结合使用 - 复选框
在input:checkbox 上面可以动态绑定两个属性true-value 和 false-value
:true-value=“value1” 和 :false-value=value2
选中的时候app.picked = app.value1
没选中的时候 app.picked = app.value2 - 选择列表
TODO: 选择列表内容的编写
3.修饰符
- .lazy
此时v-model绑定的数据并不会实时更新, 按回车或者失焦才会更新;在 change 事件中同步 - .number
转化成数字 - .trim
消除空格
七、组件
组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树
1.组件注册
- 组件名应该始终是多个单词的,根组件 App 除外
- 单文件组件的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接
- 使用 kebab-case
使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case - 使用 PascalCase
当使用 PascalCase (驼峰式命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的
2.父子组件通信
- 父组件到子组件通讯
子组件接受使用父组件的数据,这里的数据包括属性和方法(String, Number, Boolean, Object, Array, Function)。vue提倡单项数据流,因此在通常情况下都是父组件传递数据给子组件使用,子组件触发父组件的事件,并传递给父组件所需要的参数 - 通过 props 传递数据 (推荐)
父子通讯中最常见的数据传递方式就是通过props传递数据,就好像方法的传参一样,父组件调用子组件并传入数据,子组件接受到父组件传递的数据进行验证使用
props 可以是数组或对象,用于接收来自父组件的数据。props 可以是简单的数组,或者使用对象作为替代,对象允许配置高级选项,如类型检测、自定义校验和设置默认值
- 通过 $on 传递父组件方法
通过$on传递父组件方法是组件通信中常用的方法传递方式。它可以与通过props传递方法达到相同的效果。相比于props传递function,它更加的直观和显示的表现出了调用关系
3.子组件到父组件通讯
- 通过 $emit 传递父组件数据 (推荐)
与父组件到子组件通讯中的$on配套使用,可以向父组件中触发的方法传递参数供父组件使用 - refs 获取
可以通过在子组件添加ref属性,然后可以通过ref属性名称获取到子组件的实例。准确来说这种方式和 this.$parent 一样并不属于数据的传递而是一种主动的查找。
引用
- 岁月如同马匹 - 简书
- Vue.js组件 - 菜鸟教程
- vue简单语法规则总结 - ONLY&YOU