Vue1.0笔记

• 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：根据条件来判断真假 （不支持 语法）
  v-for：有三个参数 “(value, key, index) in object” 值 属性 和下标，可单独用。也可以在上直接写数组 of 替代 in 作为分隔符
  v-bind:style：用对象的语法写，也可以直接写在对象了 直接变量名调用，如果多个对象，用数组 逗号隔开

---

• 官网：
  v-once 指令，执行一次性地插值，当数据改变时，插值处的内容不会更新
  注意，v-show 不支持 元素，也不支持 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 属性区分
自定义组件，自定义指令：这两个区别局部一个实例和全部实例

---

• 事件修饰符：
  阻止单击事件冒泡
  

---

• 生命周期钩子的函数：【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 改变后调用
})

这个将不会改变: {{ msg }}通过使用 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 所有的日志与警告。