vue组件 is ref
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
<style>
.active {
color:red
}
</style>
</head>
<body>
<div id="app">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div> <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('row',{
template: '<tr><td>this is row</td></tr>'
})
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>
注意：table 里面只能写tr>td, 使用is=row,若直接使用<row></row>则template模板不在table里面。其它select ,ul, ol等都是用is
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
<style>
.active {
color:red
}
</style>
</head>
<body>
<div id="app">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div> <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('row',{
data: function() {//子组件里的data是function而不是object, 且使用return
return {
content: 'this is row'
}
},
template: '<tr><td>{{content}}</td></tr>'
})
var app = new Vue({
el: '#app'
})
</script>
</body>
</html>
/子组件里的data是function而不是object, 且使用return
让每一个子组件都拥有一个独立的数据存储，不会出现多个子组件之间互相影响的情况
ref
vue一般不操作dom节点，但如果要操作的话可以用ref
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
<style>
.active {
color:red
}
</style>
</head>
<body>
<div id="app">
<div ref="hello" @click="handleDivClick">Hello World</div>
</div> <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script> var app = new Vue({
el: '#app',
methods: {
handleDivClick: function() {
console.log(this.$refs.hello);
console.log(this.$refs.hello.innerHTML);
}
}
})
</script>
</body>
</html>
用ref实现的子组件相加得到父组件的total值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue</title>
<style>
.active {
color:red
}
</style>
</head>
<body>
<div id="app">
<counter ref="one" @change="handleChange"></counter>
<counter ref="two" @change="handleChange"></counter>
<div>{{total}}</div>
</div> <!-- 开发环境版本，包含了用帮助的命令行警activeOne告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('counter' , {
data: function() {
return {
num: 0
}
},
template: '<div @click="handleDivClick">{{num}}</div>',
methods: {
handleDivClick: function() {
this.num++;
this.$emit('change');
}
}
})
var app = new Vue({
el: '#app',
data: {
total:0
},
methods: {
handleChange: function() {
console.log(this.$refs.one);
console.log(this.$refs.two);
return this.total = this.$refs.one.num + this.$refs.two.num;
}
} })
</script>
</body>
</html>
vue组件 is ref的更多相关文章
- vue组件最佳实践
看了老外的一篇关于组件开发的建议(强烈建议阅读英文原版),感觉不错翻译一下加深理解. 这篇文章制定一个统一的规则来开发你的vue程序,以至于达到一下目的. 1.让开发者和开发团队更容易发现一些事情. ...
- 关于vue组件的一个小结
用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维 ...
- Vue组件实例间的直接访问
前面的话 有时候需要父组件访问子组件,子组件访问父组件,或者是子组件访问根组件. 在组件实例中,Vue提供了相应的属性,包括$parent.$children.$refs和$root,这些属性都挂载在 ...
- 写一个vue组件
写一个vue组件 我下面写的是以.vue结尾的单文件组件的写法,是基于webpack构建的项目.如果还不知道怎么用webpack构建一个vue的工程的,可以移步到vue-cli. 一个完整的vue组件 ...
- vue2.0 如何自定义组件（vue组件的封装）
一.前言 之前的博客聊过 vue2.0和react的技术选型:聊过vue的axios封装和vuex使用.今天简单聊聊 vue 组件的封装. vue 的ui框架现在是很多的,但是鉴于移动设备的复杂性,兼 ...
- vue组件，可以通过npm引用的组件
本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用. 功能说明 多层弹出时,只有一个背景层. 弹出层嵌入内部组件. 弹出层按钮支持回调 源码下载 ...
- 移动端无限滚动 TScroll.vue组件
// 先看使用TScroll.vue的几个demo 1.https://sorrowx.github.io/TScroll/#/ 2. https://sorrowx.github.io/TScrol ...
- 如何把一个vue组件改为ionic/angular组件
同是mvvm框架,他们之间是很相似的,如何你已经熟悉其中的一个,那么另一个也就基本上也就会的差不多了. 一.动态属性.值.事件绑定 vue中使用v-bind:或者之间分号:进行绑定 ng中左括号[]进 ...
- webAPP如何实现移动端拍照上传（Vue组件示例）？
摘要:使用HTML5编写移动Web应用,主要是为了尝试一下“一套代码多处运行”,一个webapp几乎可以不加修改的运行在PC/Android/iOS等上面运行.但是写到现在觉得虽然这种方式弊大于利,不 ...
随机推荐
- js 对象属性和使用方法学习笔记
对象的引用 在ECMAScriipt中,不能访问对象的物理表示,只能访问对象的引用.每次创建对象,存储在变量中的都是对象的引用,而不是对象本身. 对象的废除 ECMASript拥有无用存储单元收集程序 ...
- HumanNet v2：用于疾病研究的人类基因网络 X科研网
HumanNet v2:用于疾病研究的人类基因网络人类基因网络已被证明在疾病研究的许多方面都很有用,已经开发了许多基于网络的策略来产生关于基因 - 疾病 - 药物关联的假设.预测和组织与特定疾病最相关 ...
- Security Spring 配置
<?xml version="1.0" encoding="UTF-8"?><beans:beans xmlns="http://w ...
- AcWing 224. 计算器 （BSGS算法）打卡
题目:https://www.acwing.com/problem/content/226/ 题意:有一个计算器能完成三种功能 1.给定Y,Z,P,计算YZModPYZModP 的值: 2.给定Y,Z ...
- linux基础知识汇总(二）-vi/vim
转:http://blog.csdn.net/sky04/article/details/5662582 vi与vim一样都是编辑器,不同的是vim更高级一些,可以理解是vi的高级版本.vi就像Win ...
- Emgucv图像处理工具
此工具是当年自己在学习Emgucv的时候,慢慢积累的,包含了常用的图像处理算法,非常适合新人学习,现放出源码,由于是以前做的,功能不全. 当时Emgucv的学习资料非常之少,没有一本书是讲Emgucv ...
- ROS的使用
1．输入roscore时出现错误:Unable to contact my own server at 修改: 在.bashrc文件中添加以下内容: export ROS_HOSTNAME=local ...
- MySQL 小数处理函数 round 和 floor
一. 在mysql中,round函数用于数据的四舍五入,它有两种形式: 1.round(x,d) ,x指要处理的数,d是指保留几位小数 这里有个值得注意的地方是,d可以是负数,这时是指定小数点左边的 ...
- 56、salesforce学习笔记（三）
Date类型 Datetime nowDatetime = Datetime.now(); Datetime datetime1 = Datetime.newInstance(2015,3,1,13, ...
- Java面试题一览
Java面试题一览