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

原创 2018年04月14日 22:53:08

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'
})

从一个奇怪的错误出发理解 Vue 基本概念

有人在学习 Vue 过程中遇到一个奇怪的问题,并为之迷惑不已——为什么这么简单的一个项目都会出错。 这是一个简单到几乎不能再简单的 Vue 项目,在 index.html 的 body 中有一个 i...
  • csdn_yudong
  • csdn_yudong
  • 2017-03-01 16:02:30
  • 14122

vue-component

vue-componentvue组件简介组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树 什么是...
  • qq_25371579
  • qq_25371579
  • 2017-11-08 11:47:41
  • 319

Failed to mount component: template or render function not defined. 错误的解决方法

Vue.js 2 遇到 vue.runtime.common.js?d43f:511 [Vue warn]: Failed to mount component: template or render...
  • zhangchao19890805
  • zhangchao19890805
  • 2016-11-27 23:18:01
  • 15491

Vue2+Webpack报错:Failed to mount component: template or render function not defined.

需要在webpack.config.js文件中添加以下配置: resolve: { /** * Vue v2.x之后NPM Package默认设置只会生成runti...
  • guoquanyou
  • guoquanyou
  • 2017-02-22 09:40:12
  • 10683

vue + webpack 起手式

介紹https://segmentfault.com/a/1190000005363030 2016-10-04 更新為使用 Vue.js 2.x 前端的世界變化之快速,從 2010 ...
  • sinat_17775997
  • sinat_17775997
  • 2016-10-07 20:29:32
  • 5971

vue使用过程中遇到的错误提示一

vue错误提示:template syntax error Component template should contain exactly one root element. If you are...
  • z1035075390
  • z1035075390
  • 2017-07-05 15:05:55
  • 4894

添加自定义vue全局方法,同时给自定义的方法 传递component调用其方法

添加自定义vue全局方法,同时给自定义的方法 传递component调用其方法, 参数传递,components, transition, vue veevalidate,alert,confirm...
  • ling369523246
  • ling369523246
  • 2017-11-05 17:41:33
  • 754

vue组件的3种书写形式

第一种 使用script标签
  • u012123026
  • u012123026
  • 2017-05-18 11:05:24
  • 30689

vue父子组件嵌套的时候遇到 - Component template should contain exactly one root element. If you are using v-i

今天在学习vue组件的嵌套时页面报错。大概的意思是:组件模板应该包含一个根元素。错误代码: var childComponent = Vue.extend({ template: 't...
  • yangyiboshigou
  • yangyiboshigou
  • 2017-05-14 23:26:20
  • 2796

vue component 组件使用

component 使用
  • wngzhem
  • wngzhem
  • 2016-11-28 17:11:41
  • 28843
收藏助手
不良信息举报
您举报文章:vue之component中的template另一种定义方式
举报原因:
原因补充:

(最多只允许输入30个字)