Vue中组件(.vue文件)

Vue组件

组件的构成

一个.vue文件就是一个组件

组件都是由三部分组成:html结构(html结构都是在template标签中)、js逻辑、css样式

  • 1)template只能解析一个根标签
  • 2)js逻辑都是在script标签中,必须设置导出,export default {...}
  • 3)css样式都是在style标签中,必须设置scoped属性,是样式组件化
<template>
    <div class="first-cp">
         <h1>第一个组件</h1>
    </div>
</template>

<script>
    // .vue文件类似于模块,可以直接相互导入,所以在组件内部要设置导出
    export default {

    }
</script>

<style scoped>
    /* scoped可以使样式组件化,只在自己内部起作用 */

</style>

原文地址:https://www.cnblogs.com/baohanblog/p/12305047.html

时间: 2024-07-30 06:44:44

Vue中组件(.vue文件)的相关文章

vue中引入样式文件

一.在vue中使用scss 首先进行安装如下依赖: cnpm i sass-loader node-sass -D 二.vue中引入样式文件 1)在index.html模板html文件中引入,这种方式引入的原样编译在生成的html文件中,如果想要通过link引入外部的样式文件,建议使用这种方式: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2imis&

vue中组件间的通信,父传子,子传父

参考文章 :https://www.cnblogs.com/yszblog/p/10135969.html 1 父传子 子组件Vue 父组件 注册子组件 子组件在props中创建一个属性,用以接收父组件传过来的值 父组件中注册子组件 在子组件标签中添加子组件props中创建的属性 把需要传给子组件的值赋给该属性 2 通过$emit  子组件向父组件传值 2.1 子组件Vue 2.2 父组件 2.3 父组件监听子组件发射的事件名 子组件中需要以某种方式例如点击事件的方法来触发一个自定义事件 将需要

vue中组件的四种方法总结

希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: 第一步:实例化Vue对象 var app = new Vue({ el:"#app" })     第二步:定义组件 var myComponent = Vue.extend({ template: '<h1>vue全局组件写法一</h1>' });     第三步

VUE中组件的使用

关于vue组件引用 使用Nodejs的方法 被引用的组件要暴露 module.exports={}; 引用时 用 var abc= require("组件的路径") 然后 就可以用abc点出来组件中的东西 属性或者方法 代码 ``` //cal.js的内容 一定要包裹在对象中 还要是顶级作用域 如不能再函数值暴露 没用 module.exports={ sayHi:function(){ console.log("你好啊") } }; //main.js 引用后就可

vue中引入外部文件js、css、img的方法

第一种方法,直接放到相对路径下,位置:./static/js/main.js,./static/css/main.css,./static/img/test.png 第二种方式: ES6的import方式引入,被引入文件test.js尾部加入 export default {    fn   }  //fn是被引入的方法:在main.js引入  import test from './assets/js/test.js'       Vue.prototype.$test= test; 全局引入

vue中组件通信

前面看官方文档一直不能理解在子组件模板中引用父组件的数据,看了很多遍也是模糊,今天无意中看到一个demo,突然就明白了一些. <div id="componentPhone"> <!--在子组件模板中引用父组件的数据,数据是article,通过绑定的detail属性--> <my-component v-bind:detail="article"></my-component></div> var cp =

vue中组件的嵌套(1)

1.组件的嵌套 组件嵌套:把组件与组件嵌套在一起, 在父组件下的模板中,以标签的形式调用子组件. 2 . 组件通信 组件通信 : 就是把同一个信息可以在不同的组件中共用 方式一 :   组件 父传子 用 Props    父组件将信息传给子组件,从而子组件获得父组件的信息 父组件和子组件,之间靠子组件标签取得关联,在子组件标签上所有的属性构成的集合在子组件的props属性可以接受到. <!DOCTYPE html> <html> <head> <meta char

Vue 中组件概念

1 为了能在模板中使用,组件必须先注册以便 Vue 能够识别.这里有两种组件的注册类型:全局注册和局部注册. 全局注册是通过Vue.component 来向Vue注册,例子 Vue.component('my-component-name', { // ... options ... }) 全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中. 2 通过 Prop 向子组件传递数据 Prop 是你可以在组件上注册的一些

vue中组件通讯--子到父

步骤: 父组件提供一个方法 这个方法是子组件调用的,数据通过方法的参数拿到 将这个方法传递给子组件 由子组件触发这个方法,将要传递的数据作为方法的参数传递 <div id="app"> <h1>{{ age }}</h1> <!-- 2 给子组件传递一个自定义事件 getmsg ,它的值是 getChildMsg 方法 --> <child @getmsg="getChildMsg"></child&