原创 Vue实例分析 学习干货

存放数据的data是vue实例的对象，且data的数据变化也会被Vue框架检测到，自动更新到html上。本文是一篇实实在在的学习干货，将从实例化Vue、el参数和定义数据对象三方面分析Vue实例。

实例

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例</title>

<script src="../static/vue.min.js"></script>

</head>

<body>

<div id="vue_data">

<h1>title : {{title}}</h1>

<h1>url : {{url}}</h1>

<h1>{{info()}}</h1>

</div>

<script type="text/javascript">

var vm = new Vue({

el: '#vue_data',

data: {

title: "Vue.js",

url: "https://cn.vuejs.org"

},

methods: {

info: function() {

return this.title + " - 坚持学习！";

}

}

})

</script>

</body>

</html>

1、每个Vue应用都需要实例化Vue来实现

var vm = new Vue({

//*******

})

2、el参数

在上面实例中的id为vue_data，在div元素中：

<div id="vue_data"></div>

意味着所有的改动均在这个id为vau_data的div中，外部不受影响。

3、定义数据对象

data用于定义属性，在上述实例中有2个属性，分别为：title、url。

methods用于定义函数，可以通过return来返回函数值。

{{ }}用于输出对象属性和函数返回值。

当一个Vue实例创建时，Vue的响应系统加入了data对象中能找到的所有属性。当这些属性的值发生改变时，html视图也会产生相应的变化。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例</title>

<script src="../static/vue.min.js"></script>

</head>

<body>

<div id="vue_data">

<h1>title : {{title}}</h1>

<h1>url : {{url}}</h1>

</div>

<script type="text/javascript">

//数据对象

var data = {title: "Vue.js",url: "https://cn.vuejs.org"}

var vm = new Vue({

el: '#vue_data',

data: data

})

//设置属性会影响到原始数据

vm.title = "spring";

document.write(data.title + "<br>");

//同样

data.url = "https://spring.io";

document.write(vm.url);

</script>

</body>

</html>

Vue还提供了实例属性与方法，以前缀$与用户定义的属性区分开来。

document.write(vm.$data === data) // true

以上就是有关Vue实例分析的学习干货，大家都明白了吗？对Vue还有学习兴趣的同学，可以上博学谷观看视频学习，相信会有不少的收获。