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