vue学习笔记14模板引用&组件组成

模板引用

虽然Vue的声明性渲染模型为你抽象了大部分对DOM的直接操作，但在某些情况下，我们仍然需要直接访问底层DOM元素。要实现这点，我们可以用特殊的ref attribute

挂载结束后引用都会暴露在this.$refs之上

<template>
    <div ref="container"  class="container">{{content}}</div>
    <button @click="getElementHandle">获取元素</button>
</template>

<script>
/*内容改变：{{模板语法}}
属性改变:v-bind：指令
事件：v-on:click
*/
export default {
    data(){
        return{
            content:"内容"
        }
    },
    methods:{
        getElementHandle(){
            console.log(this.$refs.container.innerHTML="哈哈哈");
        }
    }
}
</script>

点击按钮

组件组成

组件的最大的优势就是可复用性

当使用构建步骤时，我们一般会将vue组件定义在一个单独的.vue文件中，这叫单文件组件简称SFC

<template>
  <div>承载标签</div>
</template>
//承载所有HTML标签

<script>
export default {}
</script>
//承载所有的业务逻辑标签

<style scoped>

</style>
//所有的样式写在这

将根组件App.vue里面的东西删完，输入如下代码

<template>
  <Mycomponent/>
<!--第三部：显示组件-->
</template>
  
<script>
//第一步：引入组件
import Mycomponent from "./components/Mycomponent.vue";

export default {
  //第二步：注入组件
  components:{
    Mycomponent
  }
}
</script>

<style>



</style>

ps:

<Mycomponent/>= <my-component/>两者功效相同更推荐第一种

scoped

有scoped,样式就只在当前组件生效

如上截图我在根组件写”测试“的就没有 样式

如果去掉，scoped,则样式为全局样式，在任何组件中都生效