vue.js入门学习之数据与方法，一起来学习吧！

最新推荐文章于 2021-06-04 11:55:09 发布

Shmily_ox

最新推荐文章于 2021-06-04 11:55:09 发布

阅读量168

点赞数

文章标签： vue js

本文链接：https://blog.csdn.net/Shmily_ox/article/details/104948054

版权

数据与方法

当一个Vue实例被创建时，它将data 对象中的所有的属性加入到Vue的响应式系统中。当这些属
性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

< !DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type= "text/javascript" charset= "utf-8"></script>
</head>
<body>
<div id="app">   //通过`<div>`标签声明一个a变量
{{ a }}
</div>

<script type="text/javascript">    
var  data={ a:1 }   //我们的数据对象，在new vue之前创建一个data对象
var vm = new Vue({      //该对象被加入到一个Vue实例中
el: ' #app',      //使用id选择器选中div标签
data:  data     //属性data用于保存数据，在标签中声明了哪些变量，就需要注册这些变量并初始化赋值
});
data.a="HI !"     //改变之前声明的变量a的属性，视图会重新进行渲染
//获得这个实例上的属性
//返回源数据中对应的字段
vm.a="test" ;
data.a == vm.a ;      // 此时data渲染的视图和vm渲染的一样
//设置属性也会影响到原始数据
vm.a = 2
data.a    // => 2
//反之亦然
data.a=3
vm.a      //=> 3
</script>
</body>
</html>

当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时data 中存在的属性才
是响应式的。也就是说如果你添加一个新的属性，比如:

vm.b = 'hi

就需要在new vue之前进行一个声明，创建一个var data={ b:1 }的对象，这样该属性才可以是响应式的。
再来多学一招！
如果大家不想存在的属性是响应式的，就可以使用bject.freeze() ，这会阻止修改现有的属性，也意味若响应系统无法再追踪变化。

var obj={
foo:” bar'
Object. freeze(obj)
new Vue((
el: #app
data: obj
))
HTML
<div id=" app " >
<p> {{ foo }} </p>
<!--这里的foo”不会更新! -->
<button v-on:click="foo =' baz ' " >Change it</button>
</div>

除了数据属性，Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义
的属性区分开来。例如:

vardata={a:1}
var vm = new Vue({
el:‘#example' 。
data: data
})
vm.$data === data   // => true
vm.$el === document . getElementById(' example')    // =>true
// $watch 是一个实例方法
vm. $watch('a', function (newValue， oldValue) {
// 这个回调将在'vm.a" 改变后调用

代码中的watch是非常有用的方法，直译就是观察的意思，它可以观察一个变量的变化，并且可以获取变化之前和变化之后的结果，可以在控制台看到变化结果，语法格式如上述代码所示。
看个例子

< !DOCTYPE htm1>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script srcm"vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{a}}
</div>
<script type="text/javascript">
var data={a:1};
var vm = new Vue({
el
: "#app",
data : data
});
vm. $watch('a', function(newVal, oldVal){
console. 1og(newVa1, o1dVal);
})      //将watch放在变量变化之前
vm. $data.a = "test"
</script>
</body>
</html>

如图，可以看到变化的结果，控制台会有所记录。

以后你可以在API参考中查阅到完整的实例属性和方法的列表。
好啦，本次分享你get到了吗？

Shmily_ox

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js入门学习之数据与方法，一起来学习吧！

数据与方法当一个Vue实例被创建时，它将data 对象中的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。< !DOCTYPE html><html><head><meta charset="utf-8"><title></title><scrip...
复制链接

扫一扫