Vue.js 组件中data的使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/Vue.js"></script>
</head>

<body>
    <div id="app">
        <connter></connter>
        <hr>
        <connter></connter>
        <hr>
        <connter></connter>
    </div>

    <template id="tmp">
        <div>
            <input type="button" value="+1" @click="TT">
            <!-- 组件中的data的使用方法与实例中的完全一样,但是组件的data必须是一个Function,并且返回值
                必须是内部中的一个对象,否则如果多次使用一个同一个组件,那么组件中的事件就会互相干扰 -->
            <h1>{{count}}</h1>
        </div>
    </template>
</body>
<script>
    var dt = {
        count: 0
    }

    Vue.component(‘connter‘, {
        template: ‘#tmp‘,
        data() {
            //return dt
            return {

                count: 0
            }
        },
        methods: {
            TT() {
                this.count++
            }
        }
    })

    var vm = new Vue({
        el: ‘#app‘,
        data: {

        },
        methods: {

        }
    })
</script>

</html>

原文地址:https://www.cnblogs.com/LittleDuan/p/11330857.html

时间: 2024-11-05 15:17:03

Vue.js 组件中data的使用的相关文章

vue.js 组件之间如何实现数据传递?

组件是 vue.js  最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一.本文和大家分享的就是vue.js  组件之间传递数据相关内容,一起来看看吧,希望对大家 学习vue.js有所帮助. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A  在它的模板中使用了组件  B ,那么组件  A  就是父组件,组件  B  就是子组件. //  注册

如何理解vue.js组件的作用域是独立的

vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内data数据,如果要用父组件的必须用props传递:3.子组件标签的数据,使用父组件内的data数据 案例代码: <div id="demo"> <my-component v-if="show" v-bind:my-message="messa

如何对第一个Vue.js组件进行单元测试 (上)

首先,为什么要单元测试组件? 单元测试是持续集成的关键.通过专注于小的.独立的实体,确保单元测试始终按预期运行,使代码更加可靠,你可以放心地迭代你的项目而不必担坏事儿. 单元测试不仅限于脚本.可以独立测试的任何东西都是可单元测试的,只要你遵循一些好的做法.这些实例包括单一责任.可预测性和松散耦合. 作为我们应用程序的可重用实体,Vue.js组件是单元测试的理想选择.我们将用不同的输入和交互测试做好的单个单元,并确保它始终按照我们的预期运行. 在开始之前 Vue CLI 3发布了.Vue Test

Vue.js 组件精讲

课程介绍:你会学到什么        了解 Vue.js 组件开发的精华        Vue.js 组件知识全覆盖        掌握多种 Vue.js 组件开发的模式        独立组件不依赖 Vuex 和 Bus 情况下,各种跨级通信手段(provide / inject.broadcast / dispatch.findComponents 系列)        7 个完整的 Vue.js 组件示例        如何做好一个开源项目        Vue.js 容易忽略的 API

vue.js 1中父组件跳到子组件中并传参让子组件显示不同的内容

父组件中的点击跳转: <ul class="insurance-entry clearfloat"> <li v-link="{name:'productlist',params:{id:1}}">1</li> <li v-link="{name:'productlist',params:{id:2}}">2</li> <li v-link="{name:'product

【学习笔记】Vue.js组件

一.组件的注册 组件的注册分为全局注册和局部注册 全局注册 1 Vue.component('my-component', { 2 // 选项 3 }) 局部注册 1 var Child = { 2 template: '<div>A custom component!</div>' 3 } 4 new Vue({ 5 // ... 6 components: { 7 // <my-component> 将只在父模板可用 8 'my-component': Child

vue.js 组件之间传递数据

组件是 vue.js  最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一.本文就这个知识点和大家一起来扒一扒,希望对大家 学习vue.js有所帮助. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A  在它的模板中使用了组件  B ,那么组件  A  就是父组件,组件  B  就是子组件. //  注册一个子组件 Vue.component(

Vue.js组件学习

组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) <!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件--> <the-component></the-

Vue.js 组件 component

什么是组件? 组件(component)是Vue.js最强大的功能之一,核心目标是扩展HTML元素,封装可重用的代码.我们可以把组件代码按照template.style.script的拆分方式,放置到对应的 .vue  文件中. Vue.js的组件可以理解为预先定义好行为的ViewModel类,一个组件可以预定义很多选项,但最核心的是以下几个: 模板(template) --  模板声明了数据和最终展现给用户的DOM之间的映射关系 初始数据(data) --  一个组件的初始数据状态.对于可复用