vue组件中的data与methods
时间:2019-10-23
本文章向大家介绍vue组件中的data与methods,主要包括vue组件中的data与methods使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <div id="app"> <mycom></mycom> <counter></counter> </div> <template id="temp"> <div> <input type="button" value="+1" @click="increment"> {{count}} </div> </template> </body> <script src="node_modules\vue\dist\vue.js"></script> <script> //组件中的data和实例中的不一样,实例中的data是一个对象,而组件中的data则是一个方法并且返回一个对象 Vue.component("mycom", { template: "<h3>{{msg}},这是一个组件</h3>", //引用时与实例一致 data: function () { return { //返回对象是为了区分各个组件中的数据,因为不同组件返回的对象的地址都不一致所以不会产生影响 msg: "hello" //组件中定义的数据 } } }) //添加一个增值函数 Vue.component("counter", { template:"#temp", data: function () { return { count: 0 } }, methods: { increment() { this.count++ } } }); let vm = new Vue({ el: "#app", data: { } }); </script> </html>
效果图
原文地址:https://www.cnblogs.com/angle-xiu/p/11728553.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python控制鼠标键盘,解放你的双手~
- 用腾讯云批量计算(batch-compute)调度GPU分布式机器学习
- R语言模拟保险模型中分类器的ROC曲线不良表现
- Linux xargs grep zgrep命令
- r语言空间可视化绘制道路交通安全事故地图
- 小知识:Oracle RAC添加服务名实现单节点访问
- Python去掉图片四周纯色边框
- R语言空间可视化:绘制英国脱欧投票地图
- CC攻击防御的一种方法
- 机器学习笔记之梯度下降算法原理讲解
- 使用OpenCV在Python中进行图像处理
- R语言对布丰投针(蒲丰投针)实验进行模拟和动态可视化生成GIF动画
- Shiny-R语言轻松开发交互式web应用
- SPSS中的等级线性模型Multilevel linear models研究整容手术数据
- Python花式表白