vue.js 快速入门

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>
    
    <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各个组成部分的过程的过程。
1. 定义View
2. 定义Model
3. 创建一个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指令在表单元素上创建双向数据绑定。
```

```
```
<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属性。
```
相关阅读:
python-ConfigParser模块【读写配置文件】
MinGW安装和使用
 mybatis批量操作
 SSM框架的简单搭建
 idea录制宏
 数据导出,导入
 JS中调用android和ios系统手机打开相机并可选择相册功能
 get请求中url传参中文乱码问题
 hibernate criteria中Restrictions的用法
 hibernate报错
原文地址：https://www.cnblogs.com/CinderellaStory/p/6803353.html

vue.js 快速入门

MVVM模式

Hello World示例

Vue.js的常用指令

v-if指令