vue.js入门笔记 记录

vue.js入门

模板语法

1. 文本 {{}}
2. HTML v-html
3. 属性 v-bind 实例判断 class值，如果为 true 使用 class类的样式，否则不使用该类：
4. 表达式
5. 指令 v-
6. 参数 在指令后用冒号指明
7. 修饰符
8. 用户输入 input框可以用v-model指令实现双向数据绑定
9. 过滤器 接收表达式的值作为第一个参数

循环语句

1. v-for=”site in sites”
2. v-for=”value in object”
3. v-for=”(value, key) in object”
4. v-for=”(value, key, index) in object”
5. v-for=”n in 10”
6. v-for=”n in [1,3,5]”

计算属性

computed
computed vs methods

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

vue.js样式绑定

1. class属性绑定 v-bind：class
2. style样式绑定 v-bind:style

vue.js事件处理

1. v-on 时间监听

2. 事件修饰符处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
   .stop
   .prevent
   .capture
   .self
   .once

3. 按键修饰符 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

   .enter
   .tab
   .delete (捕获 “删除” 和 “退格” 键)
   .esc
   .space
   .up
   .down
   .left
   .right
   .ctrl
   .alt
   .shift
   .meta

vue.js表单

1. mvvm 实现数据的双向绑定 即热响应
2. 修饰符
   .lazy
   在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步
   .number
   如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值
   .trim
   如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入

vue.js组件

1. Vue.component(tagName, options)tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
   
<tagName></tagName>


vue.js自定义指令

钩子
钩子函数

指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次， 指令与元素解绑时调用。

钩子函数参数

钩子函数的参数有：

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
    name: 指令名，不包括 v- 前缀。
    value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
    oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
    expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
    arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。
    modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
vnode: Vue 编译生成的虚拟节点，查阅 VNode API 了解更多详情。
oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

没看明白

vue.js路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

Vue.js 路由需要载入 vue-router 库