2018-08-22 vue.js

尝试安装node.js和vue.js

安装过程中出现的问题：

1、环境变量的配置，node_global文件夹没有写在系统变量中，导致vue.js安装过后不能使用vue命令

2、在建立了第一个vue项目之后，要在项目文件夹安装npm依赖包，才能运行项目

vue环境搭建：

1、node.js 安装

2、安装cnpm包，npm install -g cnpm --registry=http://registry.npm.taobao.org

3、安装vue-cli脚手架，npm install -g vue-cli

4、创建第一个项目：vue init webpack my-first-demo(项目文件夹名)

5、在项目文件夹中安装依赖包：cnpm install

6、项目运行：npm run dev

vue组件的定义，iview UI组件库的了解

1、组件是可复用的 Vue 实例，且带有一个名字

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

使用 Vue.component 来定义全局组件，在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中

2、使用import 可以对你想使用的组件进行导入，创建一个 components 目录，并将每个组件放置在其各自的文件中

组件基础：

定义一个全局组件，相当于定义一个新标签

prop 通过定义组件里的prop属性向组件实例传递数据（自定义的方式），和data是相同的作用，但是data是默认的

Vue事件分两部分，一是DOM绑定事件，二是自定义事件。DOM事件在Vue中可通过v-on指令或事件语法@来为DOM元素绑定事件;Vue自定义事件是为组件间通信设计，自定义事件提供$on、$off、$once、$emit、$broadcast、$dispatch 几个 api。

1、可以使用 props 把数据传给子组件。子组件在 props 中添加了元素之后，就不需要在 data 中再添加变量，父组件在调用组件的时，使用 v-bind 将值绑定到自己的变量中

2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件，参数传给监听器回调

vm.$on( event, fn );//监听event事件后运行 fn，fn接收$emit的参数；

vm.$off( [event, callback] ),移除自定义事件监听器,与$on是相反的操作；$emit和$on的事件必须使用一个空的 Vue 实例作为中央事件总线的实例上，才能够触发

如果没有提供参数，则移除所有的事件监听器；

如果只提供了事件，则移除该事件所有的监听器；

如果同时提供了事件与回调，则只移除这个回调的监听器

Vue.component 与 new vue的区别

// 注册
Vue.component('my-component', {
  template: 'HTML文本'
})
// 创建根实例
new Vue({
  el: '#example'
})

注意：要在初始化根实例之前注册组件

在v-bind 用于 class 和 style 时，Vue.js 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组，这里的对象其实是一个 JavaScript 对象

template v-if

因为 v-if 是一个指令，需要将它添加到一个元素上。但是如果想切换多个元素，可以把一个 template元素当做包装元素，并在上面使用 v-if，最终的渲染结果不会包含它。

v-show 的元素会始终渲染并保持在 DOM 中。v-show 是简单的切换元素的 CSS 属性 display，注意： v-show 不支持template

语法

v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别

 v-if 和v-show区别：

在切换 v-if 块时，Vue.js 有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。

同时v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。

相比之下，v-show  元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

v-for 指令基于一个数组渲染一个列表。形式为 item in items，items 是数据数组，item 是当前数组元素的别名，类似于symfony的twig模板中的用法

在 v-for 块内我们能完全访问父组件作用域内的属性，在for的作用域内特殊变量 $index，是当前数组元素的索引

v-for="(index, item) in items"为索引指定一个别名，如果 v-for 用于一个对象，则可以为对象的键指定一个别名

在遍历对象时，是按 `Object.keys()` 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

v-for 也可以接收一个整数，此时它将重复模板数次。

在进行事件处理时，使用内联语句事件处理器限制为一个语句，无论是使用内联还是直接绑定事件，都可以将event对象传入方法中使用原生的DOM事件对象，只是使用内联语句的时候，称作特殊变量$event

事件修饰符：

v-on提供两个事件修饰符：.prevent （event.preventDefault（））、.stop（event.stopPropagation（））

 v-model 指令在表单控件元素上创建双向数据绑定

v-model.trim="msg"   自动过滤掉用户输入内容的首尾空格

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

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

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 编译生成的虚拟节点。

oldVnode: 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。