Vue1.0烂笔头笔记
2018-06-06 本文已影响5人
仰望天空的人
- Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
{{ message.split('').reverse().join('') }}
{{ ok ? 'YES' : 'NO' }}
{{5+5}} 双括号里可以计算，可以绑定数据，可以写表达式，可以用js方法
{{ message | capitalize }} 过滤器 第一个是一个字符串 参数，第二个是函数 函数可以传值
{{ message.split('').reverse().join('') }} 字符串反转
- v-html：插入一个字符串，字符串里可以是dom元素或文本
v-bind：绑定属性的 v-bind:class="{'class222': class1}"，前者是他类名，后者是一个变量真假 （缩写-：href）
v-model：与bind配合使用，点击出来隐藏，也可以双向数据绑定
v-if：真为显示，假为隐藏，也可以来判断
v-else：条件不符合时显示 v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
v-on：用于监听dom事件 （简写@）
v-show：根据条件来判断真假 （不支持 <template> 语法）
v-for：有三个参数 "(value, key, index) in object" 值 属性 和下标，可单独用。也可以在上直接写数组 of 替代 in 作为分隔符
v-bind:style：用对象的语法写，也可以直接写在对象了 直接变量名调用，如果多个对象，用数组 逗号隔开
- 官网：
v-once 指令，执行一次性地插值，当数据改变时，插值处的内容不会更新
注意，v-show 不支持 <template> 元素，也不支持 v-else。
数组变异方法：push() pop() shift() unshift() splice() sort() reverse()
Vue.set(vm.userProfile, 'age', 27) 对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性
你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名： this.$set(this.userProfile, 'age', 27)
修饰符 .lazy 在change 事件中同步 .number .trim
watch 组件 计算属性那一章 列表渲染
除了 data 属性， Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的 data 属性区分
自定义组件，自定义指令：这两个区别局部一个实例和全部实例
- 事件修饰符：
阻止单击事件冒泡
<a v-on:click.stop="doThis"></a>
提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>
修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
只有修饰符
<form v-on:submit.prevent></form>
添加事件侦听器时使用事件捕获模式
<div v-on:click.capture="doThis">...</div>
只当事件在该元素本身（而不是子元素）触发时触发回调
<div v-on:click.self="doThat">...</div>
click 事件只能点击一次，2.1.4版本新增
<a v-on:click.once="doThis"></a>
只有在 keyCode 是 13 时调用 vm.submit()
<input v-on:keyup.13="submit">
同上
<input v-on:keyup.enter="submit">
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。
- 生命周期钩子的函数：【data里放数据，methods里放方法】
比如 created 钩子可以用来在一个实例被创建之后执行代码：
也有一些其它的钩子，在实例生命周期的不同场景下调用，如 mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。
钩子函数：
created 进入页面自己执行，
methods 调用执行
computed 计算属性
表达式：
{{ var a = 1 }} <!-- 这是语句，不是表达式 -->
{{ if (ok) { return message } }} <!-- 流控制也不会生效，请使用三元表达式 -->
methods: { reverseMessage: function} 这个名字不可以自定义
组件： 【暂停】
创建在实例外的全局组件，在里面的是局部组件
props 自定义属性暂时理解为style属性
组件： （组件里写html 换行时，每一行后面加反斜杠\）
vue属性：
Vue 实例暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
生命周期钩子：比如 created mounted、updated、destroyed。钩子的 this 指向调用它的 Vue 实例。
created 进入页面自己执行，methods 调用执行
Vue所有的实例属性和方法都是以前缀$开头的。
模板语法：
v-once 这个命令可以让元素不再双向数据绑定 就是改变modle 数据不变化了 慎用
计算属性和观察者：【暂停】 watch
computed 里面的函数可以放到双括号里 计算属性的getter
getAnswer: _.debounce 这是一个函数 相当于setTimeout函数 限制输入频率
条件渲染：
v-if v-show
列表渲染：
v-for （2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。）
数组更新方法：push() pop() shift() unshift() splice() sort() reverse()；例如：filter(), concat() 和 slice() 。这些不会改变原始数组
对象更改检测注意事项：Vue.set(vm.userProfile, 'age', 27)
已有对象赋予多个新属性：Object.assign() 或 _.extend()
Vue.set(vm.dd, 'age', '27'); vm.$set(vm.dd, 'user', 'zhang'); 前一个局部，后一个全局$
DOM 模板解析注意事项：<ul>、<ol>、<table>、<select> 自定义组件 <my-row> 会被当作无效的内容，因此会导致错误的渲染结果。变通的方案是使用特殊的 is 特性
Object.freeze() 这会阻止修改现有的属性，也意味着响应系统无法再追踪变化
除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在vm.a改变后调用
})
<span v-once>这个将不会改变: {{ msg }}</span>通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。
实例生命周期钩子：
比如 created 钩子可以用来在一个实例被创建之后执行代码：
app.$destroy(); 但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。
修饰符 ：
<form v-on:submit.prevent="onSubmit">...</form>
计算属性和侦听器：
计算属性computed （页面开始就执行的写这里） methods（页面加载完点击的方法在这里） mounted created watch
注册一个全局自定义指令 v-focus
Vue.directive
注册一个全局自定义组件 v-focus
Vue.component
API：
Vue.config 是一个对象，包含 Vue 的全局配置。可以在启动应用之前修改下列属性：Vue.config.silent = true 取消 Vue 所有的日志与警告。
