<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<login></login>
</div>
</body>
</html>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
//全局组件
Vue.component('register',{
template:`<h2>注册</h2>`,
data() {
return {};
},
methods:{},//用来定义自己的一些相关方法
computed: {},//用来定义自己的计算属性
components:{},//用来定义自己的组件
});
//登录组件配置对象
const login = {
template:`<div>
<h2>用户登录</h2>
<h2>{{counter}}----{{counterSqrt}}-----{{counterSqrt}}</h2>
<h3>{{msg}}</h3>
<button v-on:click="test">点我</button>
<aa></aa>
</div>`, //用来书写组件html代码
data(){ //用来给当前组件定义属于组件自己的数据 组件中定义数据 data必须是一个函数
return {
counter:2,
msg:"我是组件msg",
}
},
methods:{
test(){
this.counter++;
}
},
computed:{//用来给组件自己定义一些计算方法
counterSqrt(){
return this.counter*this.counter;
}
},
//初始化阶段
beforeCreate(){
},
created(){
},
beforeMount(){},
mounted(){},
//运行阶段
beforeUpdate(){},
updated(){},
//销毁阶段
beforeDestroy(){},
destroyed(){},
components: {//只能在这个组件中使用这个子组件
aa:{
template: `<div><span>我是aa子组件</span></div>`
}
}
};
const app = new Vue({
el: "#app",
data:{
},
methods: {
},
components:{//用来定义局部组件
login,
}
});
</script>
18-组件的属性
转载本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。
下一篇:17-组件
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
antd组件库封装18-泛型4
前端
学习 前端 react native react.js -
spring学习18-首选bean
spring
spring 学习 junit java ci -
18-线性地址转换实验
概述上一篇介绍了有关页的概念,以及线性地址转换物理地址过程。受于篇幅限制,抱歉我把实验部分放在了这里
保护模式 页 线性地址转换 页表 二级