Vue.js （一） 入门

官方网址 ✈️

第一次真正接触到 Vue.js 其实是源于一次头条中的视频教程（关注的程序员主题还是有不少干货的），这次决定好好学习下 Vue.js 源于一次面试，或者说可能成功的一次面试吧（没板上钉钉的事，谁也说不准，囧~~）。

加上好奇的心态也想整体的学习下 Vue.js，今天算是起步第一天，所以这篇博文算是第一篇自己对 Vue.js 入门的记录吧。

有想过整一个完整点的项目练练手，苦于没想到合适的点子，也由于没有完整的开发过，因此有点迈不出脚步的感觉（这也是 React 学习完之后迟迟没有进行完整的项目开发的原由 ~~~~）

还是进入正题 ~~

---

第一个示例：Hello Vue.js

// Vue 组件对象

var app = new Vue({
    id: '#app',
    data: {
        message: 'Hello Vue.js !'
    }
});

如上简单创建了个 Vue 组件，里面包含了组件范围（即：该组件最外层的元素），以及适用于组件内的数据，这些数据的变更会刷新绑定到该数据的元素的视图表现。

使用：

// 组件范围
<div id="app">
    // .......... 即组件内数据只适用于这个 div 里面
    <h1>{{ message }}</h1>
</div>

数据可以在组件范围内直接通过 {{ varName }} 来直接引用，这样就表示 h1 内容绑定到了 message 数据，只要数据一发生改变，就会立即刷新视图。

属性绑定，如：v-bind:title="dataAttrName"

其实属性绑定数据除了 v-bind: 还可以直接缩写成 :，比如：v-bind:title <==> :title。

属性绑定示例：
<span v-bind:title="titleMessage">这里是你看到的信息，请将鼠标放置在上面一会</span>

或

<span :title="titleMessage">这里是你看到的信息，请将鼠标放置在上面一会</span>

数据：

data: {
    titleMessage: '你看到了什么？'
}

条件与循环

v-if

用法：

<div v-if="seen"></div>

seen 就是 data: {} 里面定义的数据

上面 div 其实就是这么个效果

if ( seen === true ) {
    // 显示div
} else {
    // 隐藏div
}

所以通过 v-if 就可以控制元素的显示还是隐藏。

v-for

用法：

<ul><li v-for="name in names">{{ name }}</li></ul>

数据：

data: {
    names: ['lizc', 'fll', 'liwy']
}

结果：

事件绑定

用法：v-on:click="eventHandler"

比如通过点击按钮反转字符串

按钮：

<button v-on:click="reverseWord">{{message}}</button>

数据：

data: {
    message: '我需要倒着读！'
}

事件：(在组件对象中的 methods: {}定义)

methods: {

    reverseWord: {
        this.message = this.message.split('').reverse().join('');
    }
}

数据被反转视图亦发生变化。

v-model 双向绑定

通过输入控件，输入内容来改变视图

<p>我的名字叫：{{myName}}</p>

<label>输入姓名：</label>
<input type="text" name="name" v-model="myName" />

输入框输入什么，p 标签内就会实时显示什么，如果直接改变 myName 数据，输入框和p标签内的名字都会发生变化。

构建组件

方式：

创建一个名为 name-list 的组件

Vue.component('people-list', {
    props: ['people']
    template: '<li>{{people.name}}</li>'
});

组织元素

<br /><br /><br />
<label>人物列表：</label>
<ol><people-list v-for="p in peoples" v-bind:people="p"></people-list></ol>

上面意思是使用 peoples 作为数据，遍历数据数组，里面有几项就会创建几个 people-list 组件，然后通过 v-for="p in peoples" 将 p 即数组中的当前项传递给要创建的组件，作为其数据源，在 people-list 组件来说， v-bind:people="p"，就是把 p 传递个组件内 props 里面的 people。

props 支持多属性（不过这里除了 v-for 里面使用到的 peoples 其他的单独 v-bind 的将会被当做所有创建后的组件的共有属性）

比如：给每个人物添加年龄：

// 组件
Vue.component('people-list', {
    props: ['people', 'age']
    template: '<li>{{people.name}}, {{age}}</li>'
});

使用组件：

// 绑定多属性组件
<ol><people-list 
    v-for="p in peoples" 
    v-bind:people="p"
    v-bind:age="30"></people-list></ol>

// 固定值30或者用数据来代替

使用组件 v-for的时候回有个警告：

vue-2.0.js:498 [Vue tip]: <people-list v-for="p in peoples">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info. 
(found in <Root>)

意思大概就是每个组件使用 v-for 的时候都应该制定一个 key，这个跟 React 是一样的，主要将组件元素唯一化，致使组件元素更新的时候能快速确定到该元素上。

总结

这个算是自己的一个简单的对 Vue.js 入门指引吧，之前有了解过，并且了解到了双向绑定的实际原理。

这篇涉及的都是 vue.js 的最最基本的知识，后面跟着官文继续跟进学习。

本篇内容包含：

1. v-bind: 单向绑定
2. v-model：双向绑定
3. v-if：条件语句
4. v-for：循环语句
5. v-on:click：事件绑定
6. Vue.component：组件创建