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等上面运行.但是写到现在觉得虽然这种方式弊大于利,不 ...
随机推荐
- 59th python下graphviz安装 砖
原文 摘录 感谢分享: https://www.cnblogs.com/liusx0303/p/9155305.html 参考链接:https://blog.csdn.net/u01325041 ...
- jenkins连接gitlab，提示returned status code 128，附解决办法
在项目中配置git仓库地址,报无权限 Failed to connect to repository : Command "D:\Program Files\Git\mingw64\bin\ ...
- hdu4857 拓扑排序
题目大意: 糟糕的事情发生啦,现在大家都忙着逃命.但是逃命的通道很窄,大家只能排成一行. 现在有n个人,从1标号到n.同时有一些奇怪的约束条件,每个都形如:a必须在b之前. 同时,社会是不平等的,这些 ...
- Es学习第二课， ES安装和客户端使用
Elasticsearch安装依赖于jdk,所以大家先保证自己电脑安装好Java环境(JDK7或更高版本),并配置好环境变量:这块的配置我就不细讲了,不管是Linux还是Windows,这块的安装和配 ...
- laravel 跨域解决方案
我们在用 laravel 进行开发的时候,特别是前后端完全分离的时候,由于前端项目运行在自己机器的指定端口(也可能是其他人的机器) , 例如 localhost:8000 , 而 laravel 程序 ...
- boost pointer container
1. boost::ptr_vector #include <boost/ptr_container/ptr_vector.hpp> #include <iostream> i ...
- Mybatis基于接口注解配置SQL映射器(一)
上文已经讲解了基于XML配置的SQL映射器,在XML配置的基础上MyBatis提供了简单的Java注解,使得我们可以不配置XML格式的Mapper文件,也能方便的编写简单的数据库操作代码. Mybat ...
- UNP学习 非阻塞I/O
缺省状态下,套接口时阻塞方式的.这意味着当一个套接口调用不能立即完成时,进程进入睡眠状态,等待操作完成.我们将可能阻塞的套接口调用分成四种. 1.输入操作:read.readv.recv.recvfr ...
- redis安装-1
redis安装 cd /opt/tools/ #包目录 tar -xf redis-.tar.gz cd redis- make#centos7安装 make MALLOC=libc && ...
- JSHOP2
JSHOP2是一个HTN(hierarchy task network)规划器,是SHOP2(simple hierarchy ordered planner )的java实现版本. SHOP2的官网 ...