vue.js 快速入门

Vue.js 介绍

Vue.js 是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化思想构建的。

如果你之前习惯使用jQuery操作DOM，学习Vue.js请先抛开手动操作DOM的思想，因为Vue.js是数据驱动的，无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑起。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM将和数据保持同步，每当变更了数据，DOM也会相应更新。

使用Vue.js时，可结合其他库一起使用，比如jQery。

MVVM模式

MVVM模式：Model - View -ViewModel

Vue.js中ViewModel是如何和View以及Model进行交互。

ViewModel是Vue.js的核心，它是一个Vue实例。

Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

当创建了ViewModel后，双向绑定是如何达成的呢？

首先，将上图的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。

从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素

Hello World示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!-- 这是我们的view -->
    <div id="app">
        {{message}}
    </div>
</body>
<script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
    <script>
        // 这是我们的Model
        var myData = {
            message : 'halkglkghkg'
        }
        
        // 创建一个Vue实例或"ViewModel"
        // 链接View 与 Model
        new Vue({
            el: '#app',
            data: myData
        })
    </script>
</html>

用Vue的过程就是定义MVVM各个组成部分的过程的过程。

定义View
定义Model
创建一个Vue实例或"ViewModel"，它用于连接View和Model

在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。

在这个示例中：

　　选项对象的el属性指向View，el: '#app'表示该Vue实例将挂载到<div id="app">...</div>这个元素；

　　data属性指向Model， data: exampleData表示我们的Model是MyData对象。

Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出"Hello World!"。

双向数据绑定示例：

MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

<!--这是我们的View-->

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

将message绑定到文本框，当更改文本框的值时，<p>{{ message }}</p> 中的内容也会被更新。

反过来，如果改变message的值，文本框的值也会被更新，我们可以在Chrome控制台进行尝试。

myData.message= "hello"

Vue实例的data属性指向myData，它是一个引用类型，改变了myData对象的属性，同时也会影响Vue实例的data属性。

Vue.js的常用指令

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

内置指令：

v-if指令
v-show指令
v-else指令
v-for指令
v-bind指令
v-on指令

v-if指令

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它的基本语法如下：

v-if="expression"

expression是一个返回bool值的表达式，表达式可以是一个bool属性，也可以是一个返回bool的运算式。例如：

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>hello,Vue.js!</h1>
        <h1 v-if="yes">yes!</h1>
        <h1 v-if="no">No!</h1>
        <h1 v-if="age>=25">Age:{{age}}</h1>
        <h1 v-if="name.indexOf('jack')>=0">Name:{{ name }}</h1>
    </div>    
</body>
<script src="https://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
<script>
    var vm =new Vue({
        el: "#app",
        data: {
            yes: true,
            no: false,
            age: 28,
            name: 'anne'
        }
    })
</script>
</html>

这段代码使用了4个表达式：

数据的yes属性为true，所以"No!"不会被输出；
运算式age >= 25返回true，所以"Name: keepfool"不会被输出。

注意：v-if指令是根据条件表达式的值来执行元素的插入或者删除行为。

这一点可以从渲染的HTML源代码看出来，面上只渲染了3个<h1>元素，v-if值为false的<h1>元素没有渲染到HTML。

为了再次验证这一点，可以在Chrome控制台更改age属性，使得表达式age >= 25的值为false，可以看到<h1>Age: 28</h1>元素被删除了。

age是定义在选项对象的data属性中的，为什么Vue实例可以直接访问它呢？
这是因为每个Vue实例都会代理其选项对象里的data属性。

posted @ 2017-05-03 18:36 此夏_唯美阅读(465) 评论(0) 编辑收藏举报

此夏