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. warning: LF will be replaced by CRLF in application.yml. The file will have its origina解决方法

    环境: windows提交时报错如图所示: 原因是存在符号转义问题 windows中的换行符为 CRLF, 而在linux下的换行符为LF,所以在执行add . 时出现提示,解决办法: git con ...

  2. Matalb中英双语手册-年少无知翻译版本

    更新: 20171207: 这是大学期间参加数模翻译的手册 正文: 愚人节快乐,突然发现自己在博客园的一篇文章.摘取如下: MATLAB 语言是一种工程语言,语法很像 VB 和 C,比 R 语言容易学 ...

  3. java之hibernate之组件映射

    1.在开发中,有的类信息比较复杂,而且某几个信息可以组成某一个部分,这个时候可以采用组件映射,组件映射是一张表映射到多个类.表结构 2.类的设计 Link.java public class Link ...

  4. java之hibernate之session中对象的生命周期

    1. session是用来执行对象的crud操作,并且session是对象事务工厂.session是线程级别的,所以生命周期比较短. 2.session中对象的生命周期图: 3.session中对象的 ...

  5. js 使用 "use strict"

    "use strict"是JavaScript中一个非常好的特性,而且非常容易使用. 使用方法 // file.js "use strict" function ...

  6. webpack4 从零学习常用配置梳理

    webpack 的核心价值就是前端源码的打包,即将前端源码中每一个文件(无论任何类型)都当做一个 pack ,然后分析依赖,将其最终打包出线上运行的代码.webpack 的四个核心部分 entry 规 ...

  7. UIAlertController 修改文字显示实现方法

    UIAlertController修改文字显示 不废话先上完整代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 UIAlertControll ...

  8. mysql 优化修复表

    OPTIMIZE TABLE `table_name` 优化表 MyISAM 引擎清理碎片 OPTIMIZE语法: OPTIMIZE [LOCAL | NO_WRITE_TO_BINLOG] TABL ...

  9. ssmtp脚本发中文邮件的笔记

    ( echo "From:<test@abc.com>"; \ echo "TO:def@abc.com"; \ echo "Subjec ...

  10. Python入门篇-基础数据类型之整型（int），字符串（str），字节（bytes），列表（list）和切片（slice）

    Python入门篇-基础数据类型之整型(int),字符串(str),字节(bytes),列表(list)和切片(slice) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Py ...