曹可爱之最可爱-Vue.js入门 (一)初识

本文是学习Vue官方文档所作的学习笔记。其中加入了个人的理解思考及困惑和为了解决学习中遇到的问题所查阅的有关资料。

一. 初识Vue

首先来看看Vue是什么？

Vue.js 是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。 - - vue.js官方文档

初读VUE的官方文档时即对定义的所谓”渐进式框架”产生了好奇。因为是在粗读文档后来写本篇博客，查阅资料后，自己对一下徐飞大大的观点还是表示很赞同。

在我看来，渐进式代表的含义是：主张最少。

每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
- -知乎用户”徐飞”

Vue 2.0，渐进式前端解决方案
这是尤大写的一片关于Vue渐进式框架的文章，相信在入门Vue的时候基本的困惑和对Vue框架的理解在阅读此篇后都能解决。

二.Vue上手

可以采用两种方式搭建一个Vue项目：

1.创建一个 .html 文件，然后通过如下方式引入 Vue：

<script src="https://unpkg.com/vue"></script>

2.命令行工具 (CLI)

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖
$ cd my-project
$ npm install
$ npm run dev

// 这里要感谢任志强同学在mac安装vue-cli中遇到的问题所给予的帮助

三.Vue基础

声明式渲染

Vue.js的核心是一个允许采用简洁的模版语法来声明式的将数据渲染进DOM的系统：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
        }
    })

除了文本插值，我们还可以采用这样的方式绑定 DOM 元素属性：

<div id="app-2">
    <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
</div>

var app2 = new Vue({
    el: '#app2',
    data: {
        message: '页面加载于 ' + new Data().toLocalString()
        }
    })

v-bind 属性被称为指令。它们会在渲染的 DOM 上应用特殊的响应式行为。
这里该指令的作用是：“将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”。

条件与循环

<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
    el: '#app-3',
    data: {
        seen:true
        }
    })

v-for指令可以绑定数组的数据来渲染一个项目列表：

<div id=''app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

var app4 = new Vue({
    el: '#app-4',
    data: {
        todos: [
            { text: '学习 JavaScript' },
            { text: '学习 Vue' },
            { text: '整个牛项目' }
            ]
        }
    })

处理用户输入

为了让用户和应用进行互动，可以用v-on指令绑定一个事件监听器，通过它调用我们Vue实例中定义的方法：

<div id="app-5">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">逆转消息</button>
</div>

var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Hello Vue.js!'
    },
     methods: {
         reverseMessage: function () {
         this.message = this.message.split('').reverse().join('')
    }
  }
})

v-model指令，能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

var app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Hello Vue!'
        }
    })

在控制台里，输入 app6.message= ‘caojiali’,改变状态。

组件化应用状态

组件系统允许我们使用小型，独立和通常可复用的组件构建大型应用。

在Vue里，一个组件本质上是一个拥有预定义选项的一个Vue实例，
在Vue中注册组件很简单：

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
    template: '<li>这是个待办项</li>'
})

现在可以用它构建另一个组件模版：

<ol>
    <!-- 创建一个 todo-item 组件的实例 -->
    <todo-item></todo-item>
</ol>

将数据从父作用域传到子组件。修改一下组件的定义，使之能够接受一个属性：

Vue.component('todo-item', {
    // todo-item 组件现在接受一个
    // "prop"，类似于一个自定义属性
    // 这个属性名为 todo
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>
})

现在我们可以使用v-bind指令将todo传到每一个重复的组件中：

<div id="app-7">
    <ol>
        <!--
            现在我们为每个 todo-item 提供 todo 对象
            todo 对象是变量，即其内容可以是动态的。
            我们也需要为每个组件提供一个"key"
        -->
        　<todo-item
            　v-for="item in groceryList"
            　v-bind:todo="item"
            　v-bind:key="item.id">
          <todo-item>
     </ol>
</div>

Vue.component('todo-item', {
    props:['todo'],
    template: '<li>{{ todo.text }}</li>
})

var app7 = new Vue({
    el: '#app-7',
    data: {
        groceryList: [
            {id: 0, text: 'aaa' },
            {id: 1, text: 'bbb' ),
            (id: 2, text: 'ccc' }
            ]
        }
    })

以上，完成了Vue最最基础的知识内容。再回头边写blog边理解觉得简直是soooooo easy啊～！ 下面的内容，曹佳丽小可爱还需要继续加油哦(=^.^=)