Vue数据绑定
Posted qingshanyici
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue数据绑定相关的知识，希望对你有一定的参考价值。
一、Vue实例与数据绑定
1、实例与数据
通过构造函数Vue创建一个Vue的根实例，并启动Vue应用。
var app=new Vue({ //选项 })
这个变量app就是Vue实例。几乎所有的代码都是一个对象，写入到Vue实例的选项内。
首先，必不可少的一个选项就是el。el用于指定一个页面中已经存在的DOM元素来挂载Vue实例，它可以是htmlElement，也可以是css选择器。注意语句结束后没有分号。
var app=new Vue({ el:document.getElementById("app") })
然后，挂载成功后，通过app.$el来访问该元素。
-
看下面这段代码，input标签上，会有v-model指令，他的值对应于我们创建的Vue实例的data选项中的name字段，这就是Vue的数据绑定。注意Vue的引用和js文件的引用是放在HTML后面的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>数据绑定</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="你的名字">
<h1>你好哇，{{name}}</h1>
</div>
<script type="text/javascript" src="../node_modules/vue/dist/vue.js"></script>
<script type="text/javascript" src="./js.js"></script>
</body>
</html>
var app=new Vue({ el:"#app", data:{ name:"" } })
效果图：
从上面可以看出，通过Vue实例的data选项，可以声明应用内需要双向绑定的数据。建议所有会用到的数据都要预先在data内声明，方便维护。
-
（未完，不想写）
2、生命周期
每个Vue实例在创建时，都会经历一系列的初始化过程，同时调用相应的生命周期钩子。常用的生命周期钩子有：
（1）created：实例创建完成后调用。此阶段完成了数据的观测，但尚未挂载，$el还不可用。
（2）mounted：el挂载到实例上后调用。
（3）beforeDestroy：实例销毁之前调用。
这些钩子与el和data类似，也是作为选项写在Vue实例内。并且钩子的this指向的是调用它们的Vue实例。
3、插值与表达式
使用双花括号是最基本的文本插值方法，它会自动将我们双向绑定的数据实时显示出来。
4、过滤器
二、指令与事件
三、语法糖
在不影响功能的情况下，添加某种方法实现同样的效果。
v-bind指令与v-on指令都提供了语法糖，说白了就是缩写。
v-bind指令的语法糖是“：”。v-on的语法糖是“@”。
以上是关于Vue数据绑定的主要内容，如果未能解决你的问题，请参考以下文章