vue template 复用_vue-组件基础

1.基础介绍

vue的组件是以.vue结尾的，这是毋庸置疑的。vue的组件由三个部分组成<template>，<script>和<style>。

<template>
//template里面只能存在一个根组件<div></div>
</template>
<script>
export default {name: 'HelloWorld,//name属性首字母必须大写，一般与文件名相同。data(){ //data必须是一个函数return{msg:0}},
}
</script>
<style lang="less" scoped>
//可以写less语法，sass语法，scss语法，或者把lang去掉就是css语法
//scoped就是只能作用于当前组件，可以解决属性冲突
</style>

2.组件的复用

添加一个按钮实施复用

<template><div>{{ msg }}<button @click="addCounterHandler">按钮</button></div>
</template>
<script>
export default {name: 'Counter',data(){return{msg:0}},methods:{addCounterHandler(){this.msg++}}
}
</script>
<style scoped>
</style>

每个组件都会各自独立维护它的状态

<template><div>
//复用<Counter /><Counter /><Counter /></div>
</template>
<script>
//引用按钮
import Counter from "./components/Counter"
export default {name: 'HelloWorld,components:{//依赖注入Counter}
}
</script>
<style scoped></style>

点击一个按钮不会影响其他按钮，每一个组件都是独立的实例状态，这就是复用。

vue template 复用_vue-组件基础相关推荐

vue template 复用_Vue之组件、路由
组件: 组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树.(通俗点讲,如果你在页面上需要显示4个物品 ...
vue学习第八天——组件基础
基本示例(官网找去) 因为组件是可复用的 Vue 实例,所以它们与 new Vue 接收相同的选项,例如 data.computed.watch.methods 以及生命周期钩子等.仅有的例外是像 e ...
vue变量传值_vue组件与组件之间传值
目录一.父组件向子组件传值二.子组件向父组件传值三.兄弟组件之间的传值如上图所示,2是1的子组件,1是3的父组件,2和3是兄弟组件一.父组件向子组件传值: html代码: <div i ...
before vue路由钩子_vue组件级路由钩子函数介绍，及实际应用
正如其名,vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 有多种方式可以在路由导航发生时执行钩子:全局的.单个路由独享的.或者组件级的. 一.全局钩子你可以使用 rout ...
vue底部选择器_Vue组件-极简的地址选择器
一.前言本文用Vue完成一个极简的地点选择器,我们接下来带大家实现这个.当然其中也有一些值得学习与注意的地方.话不多说,我们先上demo图.因为每个人的需要不一样,我这边就不在实现更多的功能,所以留 ...
关于vue中表单和组件的笔记
关于vue中表单和组件的笔记今天内容表单文本多行文本单选框多选框下拉选择框修饰符 .lazy .number .trim 案例:用户注册搭建界面定义数据绑定数据绑定事件组件 ...
vue就地复用不是更快吗_Vue.js从零开始——组件（1）
其实本来应该把这个章节也放在入门里面的,但是想想这个部分是 Vue 的核心功能之一,所以就独立出来吧,专门进行介绍也挺好的. 这个章节主要是对 Vue 的组件(Component)有个基础的了解先,也 ...
【Vue.js 牛刀小试】：第九章 - 组件基础再探（data、props）
系列目录地址一.基础知识概览第一章 - 一些基础概念(posted at 2018-10-31) 第二章 - 常见的指令的使用(posted at 2018-11-01) 第三章 - 事件修饰符的 ...
Vue组件基础知识总结
组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树. 那么什么是组件呢?组件可以扩展HTML元素,封装 ...

vue template 复用_vue-组件基础

vue template 复用_vue-组件基础相关推荐

最新文章

热门文章