浅谈Vue.js
Posted 宜信财富技术
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浅谈Vue.js相关的知识，希望对你有一定的参考价值。
一、介绍
Vue.js是当下很火的一个javascript MVVM库，是一款轻量级的以数据驱动的前端JS框架，它是以数据驱动和组件化的思想构建的。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
如果你之前已经习惯了用jQuery操作DOM，那么学习Vue.js的时候请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，无需手动操作DOM元素。它通过一些特殊的html语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步。每当变更了数据，DOM也会相应的更新。
二、MVVM模式
如上图所示，ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用在某一个HTML元素上的，这个元素可以使HTML的body元素，也可以是指定了id的某个元素。
那么当创建了ViewModel后，双向绑定是如何实现的呢？
首先，我们将上图中的DOMListeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
（1）从View侧看，ViewModel中的DOM Listeners工具会帮我们检测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
（2）从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
三、Hello World示例
学习一门语言或者新技术，编写Hello World例子是我们的必经之路。
<html>
<head>
<title></title>
</head>
<body>
<!-- 这是我们的view -->
<div id="app">
{{message}}
</div>
</body>
<scriptsrc="js/vue.js"></script>
<script>
//这是我们的Model
var messageData = {
message:'Hello World!'
}
//创建一个Vue实例或"ViewModel"
//它连接View与Model
var vm = new Vue({
el:'#app',
data: messageData
})
</script>
</html>
使用Vue的过程就是定义MVVM各个组成部分的过程。
（1）定义View；
（2）定义Model；
（3）创建一个Vue实例或“ViewModel”，它用于连接View和Model
在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据（data）、挂载元素（el）、方法（methods）、生命周期钩子（created）等等。不同的实例选项拥有不同的功能，如：
（1）el表明我们的Vue需要操作哪一个元素下的区域，表示了这个Vue实例的作用范围，‘#app’表示操作id为app的元素下区域。
（2）data表示Vue实例的数据对象，data的属性能够相应数据的变化。
Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{message}}会被数据对象的message属性替换，所以页面上会输出“Hello World!”。
四、Vue常用指令
在Vue项目开发中，使用最多的应该就是Vue指令了，通过Vue提供的常用指令，可以发挥Vue数据驱动的强大功能。
<divid="demo">
<p v-text="p1"></p>
<p v-html="p2"></p>
<p v-if="p3"></p>
<p v-else></p>
<p v-show="p4"></p>
<p v-for="item in items"></p>
<p v-on:click="show"></p>
<p v-bind:title="p5"></p>
<input v-model="p6">
<p v-clock>{{p7}}</p>
</div>
（1）v-text：用于更新绑定元素中的内容，类似于jQuery的text()方法；
（2）v-html：用于更新绑定元素的html内容，类似于jQuery的html()方法；
（3）v-if：用于根据表达式的真假条件渲染元素，如上代码中p3为false则不会渲染p标签；
（4）v-show：用于根据表达式的真假条件显示隐藏元素，切换元素的display CSS属性；
（5）v-else：可以为v-if或v-show添加一个“else块”。v-else元素必须跟在v-if或v-show元素的后面，否则它不能被识别；
（6）v-for：用于遍历数据渲染元素或模板，items是数组，item是数组中的每一个元素；
（7）v-on：用于在元素上绑定时间，以上代码中p标签绑定了show的点击事件；
（8）v-model：在表单控件或者组件上创建双向绑定；
（9）v-bind：动态的绑定一个或多个特性；
（10）v-clock：这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的Mustache 标签即“{{}}” 直到实例准备完毕。
以上是关于浅谈Vue.js的主要内容，如果未能解决你的问题，请参考以下文章