运维开发网

的用法,Vue中的vue文件

运维开发网 https://www.qedev.com 2022-04-26 14:51 出处:网络
这篇文章主要介绍了Vue中的.vue文件的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

这篇文章主要介绍了Vue中的.vue文件的使用方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

需要vue-loader。

npm i vue-loader vue-template-complier -D

然后在配置文件中添加匹配规则。

{test:/\.vue$/,use:'vue-loader'}


定义.vue文件lt;templategt;lt;!--这里定义html模板--gt;lt;/templategt;lt;scriptgt;//这里定义js//在这里导入文件import Vue from 'vue'export default {?? ?//在这里定义组件的数据和方法?? ? data(){? ? ? ? return {? ? ? ? ? ? chart:null? ? ? ? }? ? },? ? methods:{?? ??? ??? ?}}lt;/scriptgt;lt;!--这里定义样式?? ?可以使用scoped属性,使得这里的样式只有这个文件中的组件可以使用--gt;lt;stylegt;lt;/stylegt;


引用.vue文件

应用于。js文件

从# 39;导入组件名称;的路径。vue文件# 39;


使用render函数var vm=new Vue({?? ?render:function(createElements){?? ??? ?return createElements(组件名称)?? ?}})

渲染的简称:

render:c=gt;c(组件名称)

该页面将使用写入。vue文件。

更便于vue的组件化开发。


什么是.vue文件,它的作用是什么

A.vue文件是一个(或部分)组件,或者在导出时是一个对象。

在vue.createapp ({app})中,app是一个. vue文件,包含模板和js css三个部分。

然后对比下图,是不是很像?下面这个需要模板js来注册一个组件,所以,。vue文件是一个组件,或者一个对象。

这里引用一个vue的官方全局组件实例来说明。

// 创建一个Vue 应用const app = Vue.createApp({})// 定义一个名为 button-counter 的新全局组件app.component('button-counter', {? data() {? ? return {? ? ? count: 0? ? }? },? template: `? ? lt;button @click="count++"gt;? ? ? You clicked me {{ count }} times.? ? lt;/buttongt;`})

以上个人经验,希望能给你一个参考,也希望你能支持一下搜源网。


0

精彩评论

暂无评论...
验证码 换一张
取 消