从零开始 Vue.js 笔记

安装 on macOS

brew install npm
npm install cnpm -g  # 从此用 cnpm 代替 npm，因为下载文件更快
cnpm install -g vue-cli

安装完成，即可打开 IDEA，安装 Vue plugin，开始创建第一个 Vue 项目、添加 configuration（npm） 此系列过程省略。

备忘命令

命令行创建项目：

vue init webpack my-project
cd my-project
cnpm install
cnpm run dev

成功执行以上命令后访问 http://localhost:8080/ 即可。热更新，开发极其方便。

目录解析

目录 / 文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的。
node_modules	npm 加载的项目依赖模块
src	开发目录，基本上要做的事情都在这个目录里。里面包含：

src	说明
assets	图片
components	里面放了一个组件文件，可以不用
App.vue	项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录
main.js	项目的核心文件
static	静态资源目录，如图片、字体等
test	初始测试目录，可删除
.xxxx文件	一些配置文件，包括语法配置，git配置等
index.html	首页
package.json	项目配置文件
README	说明文档

学习笔记 （仅留作备忘）

Vue 对象，其成员取出方式：vm.$data

插值

文本： {{ msg }}
html：<div v-html=“msg”></div> , msg 是 data的一个K，V是 html 代码字符串
属性：v-bind 响应式更新属性, e.g. v-bind:href="" e.g. v-bind:class="{‘class_name’: data_bool, ‘c2’: d2}"，实际上，class=可以对应一个对象字典，可以保存到 data、computed 里，{class_name: bool}；也可以是一个数组[c1, c2] e.g. v-bind:style="{ color: ‘green’, …}" =后一个字典、数组，可以是保存到对象

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      use: false,
      test_data1: 'test data'
    }
  },
  methods: {
    test_func1: function () {
      return this.test_data1 + ' from test func'
    },
    change_func1: function () {
      this.test_data1 = 'clicked' // 会使 使用 test_func1 的元素重新调用 test_func1
    }
  }
}
</script>

computed 与 methods

一般 computed 只有相关依赖发生改变时才会重新取值。而 methods 总会重新调用；
computed 可以实现 getter 和 setter， e.g

    site: {
      get: function () {
        return ......
      },
      set: function (newValue) {
        var ....... 
      }
    }

v-if

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后；条件判断可以用库函数
对于简单条件显示的元素如果需要非常频繁地切换，则使用 v-show；如果在运行时条件不太可能改变，则使用 v-if

v-on

v-on 指令，它用于监听 DOM 事件，e.g. v-on:click=“function”
vue_obj.$watch(’’, function(newv, oldv) {}); // 即在那个字典里扩充一项

v-model，修饰符

在 input 等输入类元素中 使用 v-model 实现双向数据绑定；复选框checkbox输出可以是一个数组
修饰符 .lazy .number：<input v-model.number="age" type="number"> .trim
修饰符，以 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
如 .prevent 使 v-on 触发的事件调用 event.preventDefault()。修饰符可以串联
e.g. <form v-on:submit.prevent="onSubmit"></form> 提交事件不再重载页面；
e.g. v-on:click.stop 阻止单击事件冒泡； capture；self；once
按键修饰符
keyup,keypress,keydown; <input v-on:keyup.13="func">: keycode 为 13时调用 func；keyup.enter 等助记

过滤器

可用在两个大括号或指令中，格式 msg | formatter , 函数 formatter 第一个参数为 msg，可以直接再增加参数，formatter(arg2, arg3… )

缩写

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

组件

全局：

Vue.component('runoob', {
  template: '<h1>自定义组件!</h1>'
})

局部组件：在某实例内注册 components: { 'runoob': child_dict }
child_dict 格式：{ props: ['msg1', 'msg2'], template: '<span>{{ msg1 + msg2 }}</span>' }
prop 是父组件用来传递数据给子组件的一个自定义属性，子组件需要显式地用 props 选项声明 “prop”
<runoob msg1="test" msg2=" compo"></runoob>
当 prop 是一个对象而不是字符串数组时，prop验证：props:{ pA: Number, pB:[Number, String, ..] pC:{type: String, required: true}, pD: {type, default}, pF:{ validator: function(value) { return value > 10 }}}, type 支持自定义构造器 instanceof

自定义组件可以直接使用 v-bind、v-for 等等。

需要把子组件数据传回父组件，要自定义事件，思想：监听子组件的行为 $on(eventName) 或 v-on: 监听事件，$emit(eventName) 触发事件
在某个自定义组件（根元素）上监听一个原生事件，使用 .native 修饰

自定义指令

e.g. 注册一个全局自定义指令 v-focus

Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部指令 同理， directives: { dir1: {}, dir2: {} }
钩子：
bind；inserted；update；componentUpdated；unbind
指令的名字、修饰符等都在参数中：
el: 指令所绑定的元素，可以用来直接操作 DOM

binding: 一个对象，包含以下属性：

• name: 指令名，不包括 v- 前缀。
• value: 指令的绑定值， 例如： v-my-directive=“1 + 1”, value 的值是 2（支持Vue data、js对象等）。
• oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
• expression: 绑定值的表达式或变量名。 例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”。
• arg: 传给指令的参数。例如 v-my-directive:foo.bar， arg 的值是 “foo”。
• modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。
• vnode: Vue 编译生成的虚拟节点。

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

路由

一个根实例，有 router
router 是一个 VueRouter 实例，实例内部有 routes
routes 是一个数组，一个数组元素是一个 字典，path 和 component
总之刚开始非常难理解，这里不知道怎么解释，只知道怎么用。

<router-link> 属性

to，tag 属性

<!-- to 加一个字符串，目标地址 -->
<router-link to="home">Home</router-link>
<!-- 默认渲染后是一个 a，指定其他标签如 tag="li" -->
<a href="home">Home</a>

使用 v-bind:to 可以扩展功能类似前面，再想加字符串要 "'str'"
其他如 “{ path: ‘home’ }”
命名路由 “{ name: ‘user’, params: { userId: 123 }}”
带查询参数，下面的结果为 /register?plan=private
“{ path: ‘register’, query: { plan: ‘private’ }}”

replace 属性

点击调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录:
<router-link :to="{ path: '/abc'}" replace></router-link>

append 属性

从 /a 导航到一个相对路径 b，没有配置 append 则路径为 /b，配了则为 /a/b
<router-link :to="{ path: 'relative/path'}" append></router-link>

（exact-）active-class

设置 链接激活（准确激活）时使用的 CSS 类名。
router-link 默认情况下的路由是模糊匹配，e.g. 访问 /article/1也会激活 <router-link to="/article">；当设置 exact-active-class 以后，这个 router-link 只有在当前路由被全包含匹配时才会被激活 exact-active-class 中的 class

event

声明可以触发导航的事件。可以是一个字符串或是一个包含字符串的数组，如 mouseover

混入 mixins，Vue.mixin

有一些在某些组件中可复用的方法或者计算属性，使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。如果 methods 选项中有相同的函数名，则 Vue 实例优先级会较高。

ajax

和其他框架大同小异，略，主要就是 this.$http

Vue.set

在运行过程中实现属性 (data中的某个对象）的添加或删除，则可以使用全局 Vue: Vue.set 和 Vue.delete 方法