第三节.vue.js属性与方法
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属性与方法的更多相关文章
- vue 随笔 vue 的属性和方法
新建的项目中main.js是项目的入口文件 npm run dev 运行文件 npm run bulid 编译 属性与方法 每个Vue实例都会代理其 data 对象里所有的属性: var data= ...
- Vue 计算属性与方法
computed 基本使用 如果数据需要有复杂的计算,则可以在Vue实例中定义计算属性,再交由mustache进行渲染. computed内部其实是通过getttr实现的,所以不用加括号即可完成其下方 ...
- Vue.js学习 Item8 -- 方法与事件处理器
方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet&quo ...
- Vue.js随笔四(方法的声明和使用)
1.首先你需要新建路由,这个就不多说了 2.然后在你的新的.vue里面需要如下所示的添加methods:{方法},然后按钮的里面你会看到v-on:click,这就是点击这个按钮会触发的动作,这个就是触 ...
- iOS 或者Android调用vue.js 里面的方法
1.原生调用vue.js 某个vue组件下的方法. 比如**.vue里面有个这样的方法: 如果这样的话,在iOS或者Android里面是调用不了这个ajax方法的. 需要在**.vue (我的版本是v ...
- vue.js中created方法作用
这是它的一个生命周期钩子函数,就是一个vue实例被生成后调用这个函数.一个vue实例被生成后还要绑定到某个html元素上,之后还要进行编译,然后再插入到document中.每一个阶段都会有一个钩子函数 ...
- Vue.js NPM 安装方法
由于 npm 安装速度慢,本教程使用了淘宝的镜像及其命令 cnpm,安装使用介绍参照:使用淘宝 NPM 镜像. npm 版本需要大于 3.0,如果低于此版本需要升级它: # 查看版本 $ npm -v ...
- ES6 属性方法简写一例：vue methods 属性定义方法
const o = { method() { return "Hello!"; } }; // 等同于 const o = { method: function() { retur ...
- js数据类型有哪些，js属性和方法的归属，
1.js的数据类型有哪些? 2.全局方法和全局属性? 一 1.js的本质就是处理数据,数据来自后台的数据库.所以变量就起到一个临时存储数据的作用. ECMAScript 制定了js的数据类型. 数据类 ...
随机推荐
- js光标定位操作
1. 自动选中区域内容 <html> <meta http-equiv="Content-Type" content="text/html; chars ...
- BBR 安装
谷歌云申请搭建翻墙 1.申请谷歌账号 2.申请免费一年谷歌云使用 https://console.cloud.google.com/ 3.设置客户端 xshell/ putty ssh客户端设置 vi ...
- 解决unzip解压中文乱码问题
使用 unzip XXX.zip 方式解压的时候会出现中文乱码 很多人推荐以下方式: 在windows执行命令,可显示字符集数字一般为936: # chcp // 解压时加上-O cp936,xxx为 ...
- jQuery框架"风云榜"案例
<title>电影风云榜</title> <style> /*清空默认样式*/ *{padding:0;margin:0;border:0;list-style:n ...
- get merge --no-ff和git merge区别、git fetch和git pull的区别
get merge --no-ff和git merge区别 git merge -–no-ff可以保存你之前的分支历史.能够更好的查看 merge历史,以及branch 状态. git merge则不 ...
- LOJ3120 CTS2019 珍珠 生成函数、二项式反演、NTT
传送门 题目大意:给出一个长度为\(n\)的序列\(a_i\),序列中每一个数可以取\(1\)到\(D\)中的所有数.问共有多少个序列满足:设\(p_i\)表示第\(i\)个数在序列中出现的次数,\( ...
- JAVA MyBybatis分页
java: import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.ResultSet; impo ...
- Thread-specific data(TSD)线程私有数据
Thread-specific data(TSD)线程私有数据 http://blog.chinaunix.net/uid-26885237-id-3209913.html linux多线程编程中引入 ...
- Celery定时任务细讲
Celery定时任务细讲 一.目录结构 任务所在目录 ├── celery_task # celery包 如果celery_task只是建了普通文件夹__init__可以没有,如果是包一定要有 │ ├ ...
- 并发编程之Disruptor并发框架
一.什么是Disruptor Martin Fowler在自己网站上写了一篇LMAX架构的文章,在文章中他介绍了LMAX是一种新型零售金融交易平台,它能够以很低的延迟产生大量交易.这个系统是建立在JV ...