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等上面运行.但是写到现在觉得虽然这种方式弊大于利,不 ...
随机推荐
- nginx的虚拟主机和反向代理和一些技巧应用
前言 nginx是什么,一般用来做反向代理,也可以用来放静态htnl等文件..当然代理tcp协议也没啥问题,但做好是别用哈.性能不咋样. 虚拟主机 什么是虚拟主机? 个人理解,比如一台主机装一个ngi ...
- error: device unauthorized.
1 执行 adb install com.taobao.taobao_250.apk 报错 2 先看手机是不是未授权,执行命令之后,手机回弹出授权信息,点击确认就行了
- CentOS 安装 docker-compose
1.sudo curl -L "https://get.daocloud.io/docker/compose/releases/download/1.24.1/docker-compose- ...
- zabbix监控nginx status页面
在需要添加监控的nginx配置文件中添加下列配置 #zabbix监控nginx配置 location /nginx_status { stub_status on; access_log off; a ...
- html打开子窗口
第一个参数是打开的链接,第二个参数是窗口的名字,第三个参数是窗口的属性 window.open ("page.html", "newwindow", " ...
- postgres服务安装，启动和配置
安装以及启动 yum install readline-devel tar xf postgresql-11.1.tar.gz cd postgresql-11.1 ./configure --pre ...
- Spring 讲解(二 )
1.Spring 容器加载的3种方式 public class ServiceTest { public static void main(String[] args) { //Spring容器加载有 ...
- ZOJ 1610 Count the Colors （线段树区间更新与统计）
Painting some colored segments on a line, some previously painted segments may be covered by some th ...
- vue中引入路由，如果你懒得写那么
可以npm i vue-router --save,项目中自动给你写好,vuex也可以
- vue登录页和主页路由配置问题
登录页和主菜单首页是同一级的,都是用一个router-view,对于home页面里还有菜单,这里边还可以再增加一个router-view,那么在配置时候就是在home的路径增加个children路径配 ...