vue之component中的template另一种定义方式

最新推荐文章于 2024-06-20 16:15:29 发布
最新推荐文章于 2024-06-20 16:15:29 发布
阅读量6.6k 收藏 3
点赞数
分类专栏： vue 文章标签： vue component template
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duansamve/article/details/79945337
版权

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red{
            background:#FF0000;
        }
    </style>
</head>
<body>
<div id="app">
    <like></like>
</div>
<template id="like-component-tpl">
    <button :class="{red: liked}" @click="on_click">赞{{liked_count}}</button>
</template>
<script src="../lib/vue.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

main.js:

Vue.component('like', {
    template: '#like-component-tpl',
    data: function(){
        return {
            liked_count: 10,
            liked: false
        }
    },
    methods: {
        on_click: function(){
            if(!this.liked){
                this.liked_count++;
                this.liked = true
            }else{
                this.liked_count--;
                this.liked = false;
            }
        }
    }
})

new Vue({
    el: '#app'
})

duansamve
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-component-template：使用故事书开发Vue组件的快速环境
02-04
Vue组件故事书模板 关于 使用故事书，circ-ci，vue-cli，postcss，jest开发Vue组件的快速环境 入门 克隆此仓库。 将其用作创建和测试自己的Vue组件的模板 建立 # install dependencies yarn install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build 故事书 # run storybook yarn run storybook http://localhost:9001
快速搞懂Vue里面components和template
多凡的博客
08-12 3万+
vue可以把内容变成组件化，然后提高复用性,那是怎样进行组件化，然后使用呢？ 1.先写组件 2.引用组件 我们是单独写的一个js文件存放组件的所以它不是全局引用的，所以我就要把上面写好的registerForm组件引用过来，在这里它的名字被我指定做了loginForm 3.使用组件 上面我们只是 引用了，就好像声明一样，我还没有使用它，所以，要使用它就要在template：写出我们的引用后的...
vue的动态Template
最新发布
jansonKOU的博客
06-20 665
上面的配置是为了开启运行时编译的功能，正常情况下，是不开启的，在我们build项目后，我们的页面都已经打包成js文件，已经在js文件中生成了虚拟dom，只等我们访问页面后执行相关的代码即可，但是，template中的数据是在打包完成后的内容，尚未生成虚拟dom，是无法实现数据绑定的。对于前端工作的进行，我们在工作中大量使用了组件的开发思想，这样简化了我们的开发、提高了代码的复用、减轻了我们的维护或修改BUG的工作量、提高了团队开发的工作效率等多种优点。属性，指定该部分展示的组件。最后将该组件名赋值给。
vue---组件定义1（三种方式创建自定义组件）---component、template
DcTbnk的博客
07-09 1046
vue中的组件----组件定义 <title>vue中的组件</title> <style> .hello { border-bottom: solid deeppink 0.05rem; } </style> </head> <body> <!-- 3️⃣ --> <template id="tpl"> <div
关于vue项目中components和template的理解
GiornoGiovanna的博客
08-05 1万+
关于vue项目中 components: { App }, template: '<App/>'的理解 原代码： 效果： 根据名字猜想 new Vue({ el: '#app', router: router, components: { App }, template: '<App/>' }); 代码块中 components: { App }, ...
浅谈Vue下的components模板
服务好姐qa
04-11 1万+
组件 创建方式一： HTML:<div id="app"><c1></c1></div> /*要注意,局部模板的作用范围 只在 相对的vue对象 范围内, 比如此例子 <haha></haha>的作用范围 只在 <div id="app"></div>内*/ let vm = new Vue(...
Vue 将一个组件嵌入到另一个组件中
10-27
在Vue中，组件可以作为子组件被其他组件包含，形成一种嵌套结构。这种关系可以通过`<component>`标签或者使用`props`和`slots`来实现。 1. **使用`<slot>`标签**：Vue的`<slot>`元素用于定义父组件传递给子组件的...
【JavaScript源代码】Vue中引入svg图标的两种方式.docx
12-30
另一种引入SVG图标的方法是使用`vue-svg-component-runtime`库。首先，安装该库： ```bash npm install vue-svg-component-runtime --save ``` 然后，创建一个SVG组件模板，如`SvgIcon.vue`： ```html <template>...
3种vue组件的书写形式
08-28
使用 template 标签书写 Vue 组件是另一种常见的方法。下面是一个简单的示例： ```html <!DOCTYPE html> <title></title> <my-component></my-component> <template id="myComponent"> <div>This ...
在Vue中使用HOC模式的实现
10-14
HOC作为另一种解决方案，可以帮助我们更好地组织和复用组件逻辑，同时避免了Mixins的一些问题。 Vue HOC模式的关键在于理解和利用Vue组件的可组合性。通过接受一个组件作为参数，然后返回一个增强版的新组件，我们...
vue学习之Vue-Router用法实例分析
10-15
总结来说，Vue-Router通过定义路由、创建组件和设置导航元素，为我们提供了一种灵活且强大的方式来构建Vue.js应用的导航结构。理解并熟练掌握Vue-Router的用法对于开发单页应用至关重要，它能够帮助我们构建出更加...
VUE-组件（component）
damadashen的博客
05-20 8945
VUE组件介绍
VUE components和template配合使用
我想请你吃糖的博客
05-14 651
1.首先在VUE.JS中引用我们写好的VUE视图对象 2.接下来在HTML部分去使用我们引用的组件 MissionRecordOverviewPanel, PullableListContentPanel 这里要注意，在HTML部分中引用组件的命名规则要从PascalCase(首字母大写的驼峰命名法)→kebab-case(短横线分隔命名)，这是VUE的规定，否则无法引用组件，例如： MissionRecordOverviewPanel → mission-record-overview-pa
Vue之Vue.component解析
热门推荐
玉案轩窗的博客
12-01 4万+
前言 本篇文章打算分析梳理下Vue提供的创建组件的方法，打开Vue官网，在API中只有Vue.component和Vue.extend提供组件的创建。 严格意义上是这么说，但是在实际项目中常使用局部注册以及文件即组件这种方式来实现开发，这里先不讨论这种方式背后的处理，主要放在Vue.component和Vue.extend这两个API的逻辑处理。 具体梳理 结合简单实例来梳理下整个的处理逻辑，实例...
vue项目中components和template的解析
qq_51724639的博客
04-25 155
关于vue项目中components和template的理解
vue的学习之路（Vue中组件(component )
2401_84093054的博客
05-07 1154
1、传递以键值对的形式 定义在局部组件的调用处2、局部组件 核心：接收 props属性props:[传递数据时的键]注意：使用props属性接收的值 就相当于在data中定义对应的内容{key:value}{{msg}}
vue component 组件使用
wngzhem的博客
11-28 4万+
component 使用
【Vue】Vue3的系统性学习
woodwhale的博客
07-20 1790
系统性学习一下Vue3
vue中一个组件怎么调用另一个组件中的函数
07-25
在 Vue 中，一个组件可以调用另一个组件中的函数，可以通过以下几种方式实现： 1. 使用 `$refs`：在父组件中给子组件添加一个 `ref`，然后通过 `$refs` 来访问子组件的方法。例如： ```vue <template> <div> <child-component ref="childRef"></child-component> <button @click="callChildFunction">调用子组件函数</button> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { callChildFunction() { this.$refs.childRef.childFunction(); } } } </script> ``` 2. 使用事件：在子组件中定义一个触发事件，并在父组件中监听该事件来调用子组件的函数。例如： ```vue <!-- ChildComponent.vue --> <template> <div> <button @click="triggerEvent">触发事件</button> </div> </template> <script> export default { methods: { triggerEvent() { this.$emit('child-event'); } } } </script> <!-- ParentComponent.vue --> <template> <div> <child-component @child-event="callChildFunction"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, methods: { callChildFunction() { // 调用子组件的函数 } } } </script> ``` 3. 使用 Vuex：如果你使用了 Vuex 来进行状态管理，可以在子组件中触发一个 action 来调用其他组件中的函数。具体的代码逻辑会根据你的项目结构和需求而有所不同，这里无法提供具体示例。 希望这些方法能够帮助到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值