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. Linux进程状态详解及状态转换

        学而不思则罔,思而不学则殆.    Linux下,进程状态有五种 : 运行态,可中断睡眠态,不可中断睡眠态,停止态和追踪态 运行态表示进程可执行或者正在执行, 可中断睡眠态表示进程被阻塞,等条 ...

  2. golang --iota 用法

    package main import "fmt" func main() { const ( a = iota //0 b //1 c //2 d = "ha" ...

  3. application.yml报错：a global security auto-configuration is now provided

    报错原因: Spring Boot 1.5升级到2.0改动 security开头的配置及management.security均已过期 Actuator 配置属性变化 Endpoint变化 参考来源: ...

  4. vs、eclips、Idea调试技巧

    vs F5:进入下一个断点 F10:不进入子函数 F11:进入子函数 Ctrl + M + O: 折叠所有方法 Ctrl + M + M: 折叠或者展开当前方法 Ctrl + M + L: 展开所有方 ...

  5. React 中的 定义组件的 两种方式

    React 中创建 Components 的方式有两种:Function and Class 定义一个组件最简单的方法就是写一个 JavaScript 函数 function Welcome(prop ...

  6. Java 之 Servlet 基础入门

    Servlet 一.什么是 Servlet 1.概念 Servlet:server applet,是指运行在服务器端的小程序 2.Servlet   servlet 就是一个接口,定义了 Java 类 ...

  7. OS UIButton之UIButtonType详解-转

    我做了一个关于UIButtonType的Demo,效果如下图: UIButtonType各个类型的解释: typedef NS_ENUM(NSInteger, UIButtonType) { UIBu ...

  8. MySQL Network--域名与VIP

    VIP与域名1.域名能在多个IDC切换,而VIP通常在特定网段内切换.2.VIP切换可以立即生效,而域名切换存在一定时间延迟. DNS解析顺序:1.查询本地域名映射配置(/etc/hosts)2.查查 ...

  9. 【转】三个重复的ACK意味着发生拥塞?

    三次重复的ACK,可能是丢包引起的,丢包可能是网络拥塞造成的,也可能是信号失真造成的. 三次重复的ACK,也有可能是乱序引起的,而乱序和网络拥塞没有直接关系. 如果就写这两行,感觉什么都没写,接下来的 ...

  10. wampserver环境配置局域网访问

    安装好wamp后,想用手机通过局域访问电脑上wamp下的网页,结果出现如下提示403错误: 第一步:找到 conf 这个文件: 找到下图中红色方框中的onlineoffline tag - don’t ...