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. Go语言( 流程控制)

    流程控制是每种编程语言控制逻辑走向和执行次序的重要部分,流程控制可以说是一门语言的“经脉”. Go语言中最常用的流程控制有if和for,而switch和goto主要是为了简化代码.降低重复代码而生的结 ...

  2. IDEA远程DEBUG Tomcat配置

    IDEA远程DEBUG Tomcat配置 IDEA远程DEBUG Tomcat很简单,配置如下: 1.修改tomcat服务器配置 打开tomcat/bin/catalina.sh 在空白处添加如下参数 ...

  3. Springboot打包执行源码解析

    一.打包 Springboot打包的时候,需要配置一个maven插件[spring-boot-maven-plugin] <build> <plugins> <plugi ...

  4. oracle数据库 TIMESTAMP(6)时间戳类型

    时间戳类型,参数6指的是表示秒的数字的小数点右边可以存储6位数字,最多9位.由于时间戳的精确度很高,我们也常常用来作为版本控制. 插入时,如下方式:insert into test4 values(t ...

  5. selenium用法详解以chrome为例

    selenium 是一套完整的web应用程序测试系统,包含了测试的录制(selenium IDE),编写及运行(Selenium Remote Control)和测试的并行处理(Selenium Gr ...

  6. 【洛谷 P4137】 Rmq Problem / mex（主席树）

    题目链接 容易发现,可能答案只有\(0\).每个数,每个数\(+1\) 于是把这\(2n+1\)个数建立一个权值线段树,可持久化一下,每个节点记录这个子树中最后加入数加入的时间的最小值\(latest ...

  7. 规格化设计——OO第三单元总结

    规格化设计--OO第三单元总结 一.JML语言理论基础.应用工具链 1.1 JML语言 ​ JML(java modeling language)是一种描述代码行为的语言,包括前置条件.副作用等等.J ...

  8. 【转载】Javascript使用Math.random()随机数函数生成1至1000的随机数

    在Javascript代码编写过程中,有时候我们需要使用Js来生成随机数,清除ajax的get请求缓存的时候我们会带上一个随机数来解决此问题,此外在其他应用中也可能使用到随机数,在Javascript ...

  9. Git使用整理

    [本文由水木桶首发于博客园,原文地址:https://www.cnblogs.com/shuimutong/p/11404664.html,未接允许,严禁转载] 背景 很久之前使用的是svn,直接在E ...

  10. 73.移动端Web界面滚动性能优化 Passive event listeners

    题,滚动时候不仅滚动了希望滚动的部分,整体的页面也跟随者上下滚动,整个页面非常卡顿. 这两个页面都用了touch事件 控制台打印如下警告: [Intervention] Unable to preve ...