VUE基础语法

VUE语法汇总

【1】响应式数据和插值表达式el&data

【2】逻辑代码封装methods

在methods中封装函数，在标签中可以便捷的调用

注意，methods与data属于并列关系，在methods中定义函数时，使用data中的数据变量时，可以通过this获取

【3】计算属性computed

注意，计算属性相对于普通函数，可以优化性能，只关注响应式数据的变化，无变化则直接用现有结果

【4】侦听器watch

注意，对title的修改是通过浏览器开发者工具实现的；侦听器内的数据必须是响应式的

【5】指令

内容指令

通过v-text修改标签内文字，通过v-html将响应式数据作为html语法识别。注意，这两个方式都会覆盖标签原本的文字。

循环指令

key代表数组内元素，index代表元素的索引

渲染指令if-show

此时修改bool为false，则会隐藏两个p标签

属性指令v-bind

方便属性修改

" v-bind:属性 " 可以简写为 " :属性 "

事件指令

这里通过v-on（简写为@），将鼠标点击事件与函数output绑定

表单指令

只用于表单元素，实现双向绑定效果（数据<=>视图）

此时，用户在前端修改输入框的内容，可以实现对该响应式数据的修改

【6】修饰符

用于简化代码和DOM操作

.trim 是v-model的修饰符，它用于自动过滤输入内容最开始 和 最后的 空格，中间的会保留一个空格，多的会被过滤掉