VUE学习笔记

第一个DEMO

        



{{ msg }}

       

`

文本

使用“Mustache”语法 (双大括号) 输出vm的data数据到页面

V-html指令

innerHTML，vm视图绑定技术

Attribute

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令

使用 JavaScript 表达式

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

指令的所需

v-bind ----- 》 : v-on----------------->@

v-on指令

指令的事件列表：https://www.runoob.com/jsref/dom-obj-event.html

指令缩写：@

事件名称请参见：https://www.runoob.com/jsref/dom-obj-event.html，所有的事件名需要去除on

事件只能在vm中的methods中定义，事件的响应函数的第一个参数event代表事件对象本身

订阅事件不需要加“（）”

计算属性

1、计算属性本质是一个函数，函数的返回值作为属性值存在

2、操作类似属性，编写类似函数

3、计算属性有数据缓存功能

4、只在相关响应式依赖发生改变时它们才会重新求值，如果计算属性依赖data属性，则在依赖的data属性值发生改变后，计算属性会重新计算