1.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
{{a}}
</div>

<script type="text/javascript">
<!--data为变量-->
var data={a:1};
<!--vm为ViewModel-->
<!--vm保存了vue的实例-->

var vm=new Vue({
el: '#app',
<!--data为属性-->
data: data
});

<!--改变data变量属性a的值-->
//ta.a="吾乃常山赵子龙也!!!"
//vm.a="aaa"能正常使用
//data.a=vm.a
//data.b="test"显示不出数据
//能显示出数据vm.b="吾乃常山赵子龙也!!!"
//这里唯一的例外是使用Object.freeze(obj)这会阻止修改现有的属性,也意味着响应系统无法再追踪变化
//Objet.freeze(vm);
//除了数据属性,Vue实例还暴露了一些有用的实例属性与方法,他们都有前缀$,以便与用户定义的属性区分开来

//vm.$watch()用来观察变量之前之后的变化
//里面有两个参数,第一个参数'需要观察的变量',第二个为回调函数;放到变量变化之前
vm.$watch('a',function(newVal,oldVal){
console.log(newVal,oldVal);
});
//观察console控制台从1变到test
vm.$data.a="test";

</script>

</body>
</html>

2.页面console变化截图

成功了!!!

第三节.vue.js属性与方法的更多相关文章

  1. vue 随笔 vue 的属性和方法

    新建的项目中main.js是项目的入口文件 npm run dev 运行文件 npm run bulid  编译 属性与方法 每个Vue实例都会代理其 data 对象里所有的属性: var data= ...

  2. Vue 计算属性与方法

    computed 基本使用 如果数据需要有复杂的计算,则可以在Vue实例中定义计算属性,再交由mustache进行渲染. computed内部其实是通过getttr实现的,所以不用加括号即可完成其下方 ...

  3. Vue.js学习 Item8 -- 方法与事件处理器

    方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet&quo ...

  4. Vue.js随笔四(方法的声明和使用)

    1.首先你需要新建路由,这个就不多说了 2.然后在你的新的.vue里面需要如下所示的添加methods:{方法},然后按钮的里面你会看到v-on:click,这就是点击这个按钮会触发的动作,这个就是触 ...

  5. iOS 或者Android调用vue.js 里面的方法

    1.原生调用vue.js 某个vue组件下的方法. 比如**.vue里面有个这样的方法: 如果这样的话,在iOS或者Android里面是调用不了这个ajax方法的. 需要在**.vue (我的版本是v ...

  6. vue.js中created方法作用

    这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数.一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中.每一个阶段都会有一个钩子函数 ...

  7. Vue.js NPM 安装方法

    由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v ...

  8. ES6 属性方法简写一例：vue methods 属性定义方法

    const o = { method() { return "Hello!"; } }; // 等同于 const o = { method: function() { retur ...

  9. js数据类型有哪些，js属性和方法的归属，

    1.js的数据类型有哪些? 2.全局方法和全局属性? 一 1.js的本质就是处理数据,数据来自后台的数据库.所以变量就起到一个临时存储数据的作用. ECMAScript 制定了js的数据类型. 数据类 ...

随机推荐

  1. 基于OpenCV制作道路车辆计数应用程序

    基于OpenCV制作道路车辆计数应用程序 发展前景 随着科学技术的进步和工业的发展,城市中交通量激增,原始的交通方式已不能满足要求:同时,由于工业发展为城市交通提供的各种交通工具越来越多,从而加速了城 ...

  2. 【题解】Luogu P4838 P哥破解密码

    原题传送门 考虑一个一个将字母加入字符串后面 设\(f[i][0/1/2]\)表示长度为\(i\)字符串末尾有\(0/1/2\)个A的种类数 易知: \(f[1][0]=1,f[1][1]=1,f[1 ...

  3. c# 获取网页的爬虫程序

    转载于:https://www.cnblogs.com/wzk153/p/9145684.html HtmlAgilityPack相关详解: https://www.cnblogs.com/asxin ...

  4. 易百教程人工智能python修正-人工智能数据准备-标记数据

    我们已经知道,某种格式的数据对于机器学习算法是必需的. 另一个重要的要求是,在将数据作为机器学习算法的输入发送之前,必须正确标记数据. 例如,如果所说的分类,那么数据上会有很多标记. 这些标记以文字, ...

  5. HTML学习摘要2

    DAY 2 HTML 标签可以拥有属性.属性提供了有关 HTML 元素的更多的信息. 属性总是以名称/值对的形式出现,比如:name="value". 属性总是在 HTML 元素的 ...

  6. 1、uiautomator2常用语法

    uiautomator2常用语法 连接设备 使用USB连接: d=u2.connect_USB('148b4090')输入手机序列号 d是给当前连接设备定位一个变量 获取设备的信息: print(d. ...

  7. obj + mtl 格式说明

    OBJ(或 .OBJ)是一种开放的几何定义文件格式,最初由Wavefront Technologies公司开发,用以描述其Advanced Visualizer动画包.该格式已被其他3D图形应用供应商 ...

  8. git修改提交历史中的author信息

    当次提交 当次的提交显示指定提交者信息: git commit -m "Initial commit" --author="mn <mn@furzoom.com&g ...

  9. 基于ATtiny85轻松制作一款智能手表

    这是基于ATtiny85系列的简约手表系列中的第三款.该款手表通过在微型64x48 OLED显示屏上绘制模拟的手表来显示时间.它使用独立的晶振控制的低功耗RTC芯片来保持每月几秒钟的时间,并在不显示时 ...

  10. 当安装、卸载件包时，出现依赖问题 error: Failed dependencies

    error: Failed dependencies:…… 依赖关系非常复杂,当你试图先安装任何一个包时都会出现这样的依赖关系错误,这时候你就应该强制安装了,我认为只要你把服务或软件需要的包都装上,强 ...