.vue 文件介绍

时间:2020-09-20
本文章向大家介绍.vue 文件介绍,主要包括.vue 文件介绍使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

.vue文件介绍

  • .vue文件(组件)的三大部分

    • <template></template>

    • <script></script>
    • <style></style>

快捷键 sca +回车 或者 <> + 回车

使用组件的注意事项:

​   1.里面 必须用 根标签包裹 (就是template下面只有一个div)

      <template>
          <div>
              <h1>我是组件1</h1>
          </div>  
      </template>

​   2.代码写到 exprot default 里面

      <script>
        export default {
  
        };
      </script>   
 3.<style></style>标签:
.vue文件的样式文件

    
    
  • 详细过程:

    ​ 第一步:在components文件夹下,新建组件

    • sca

    • 创建子组件

      代码如下:

      <template>
          <div>
              <h3>我是hello vue</h3>
              <button @click="tips">点我呀</button>
          </div>
      </template>
      
      <script>
      export default {
          methods:{
              tips(){
                  alert('我被点了');
              }
          }
      
      }
      </script>
      
      <style>
      
      </style>
      

      第二步:

    1. 来到 main.js

    2. 使用 import 名字 from '组件路径' 引入

    3. 调用Vue.componment('组件id',组件名字) 来注册 (Vue的V是大写)

    4. 在需要用到这个组件地方,写 组件id的标签 就可以了

      代码如下:

      // 进入main.js 文件
      import Vue from 'vue'
      import App from './App.vue'
      // 导入子组件 hellovue
      import hellovue from './components/hellovue.vue'
      
      //注册组件
      Vue.component('hello',hellovue);
      
      // 是否打印提示信息,可以删除
      // 删除的话,默认值为true
      Vue.config.productionTip = false
      
      // new Vue({
      //   render: h => h(App),
      // }).$mount('#app')
      
      // 上面注释代码 相当于如下:
      new Vue({
        el: '#app',
        // 把App组件渲染出来
        render: h => h(App),
      })
      

注册局部组件

  • 顾名思义:在哪注册,就在哪可以使用
  • 用法:
    1. 在需要用的地方,引包 import 名字 from '组件路径' 引入`
    2. 在 export default 里写一个属性: componments 传入一个对象,对象里写 这个组件名
    3. 组件名叫什么,那么在html 里就可以写这个名字的标签

代码如下:

<template>
  <div>
    <h1>这是我创建的第一个cli项目</h1>
    <hello></hello>
    <localvue></localvue>
    <localvue></localvue>

  </div>
</template>

<script>

// 注册局部组件,在哪注册,在哪使用   在App.vue里注册的只能在App.vue里面使用
import localvue from './components/localvue.vue'
export default {
  components:{
    localvue
  }

}
</script>

<style>
    
</style>

组件的name属性

  1. 直接在组件的内部写name:值即可

  2. 不能用中文

  3. 写了之后,chrome的vue插件中可以看到这个名字,更加利于检索,利于编码

    代码如下:

    <script>
    export default {
    	name:'hellovue'
    }
    </script>

原文地址:https://www.cnblogs.com/KoBe-bk/p/13701131.html