美文网首页
Vue-组件

Vue-组件

作者: linlu_home | 来源:发表于2019-02-28 16:36 被阅读0次
<!-- Vue--初识组件 -->

<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Vue.js</title>
    <link rel="stylesheet" href="styledemo1.css">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>  
    <div id="vue-app-one">
    <greeting></greeting>
    </div>
    <div id="vue-app-two">
    <greeting></greeting>
    
    </div>
    <script src="app10.js"></script>
</body>
</html>
Vue.component("greeting",{
    template:
    `
    <div>
        <p> {{ name }}:hello,everyone!</p>
        <button v-on:click="changeName">changeName</button>
    </div>
    `,
    data:function(){
        return {
            name:"zouzou"
        }
    },
    methods:{
        changeName:function(){
            this.name = "Sally";
        }
    }
})



new Vue({
    el:"#vue-app-one"
})

new Vue({
    el:"#vue-app-two"
})

相关文章

  • Vue父传子、子传夫通信--小案例

    父传子 子传夫 如有不懂,可以看我的 Vue-组件通信

  • Vue-基础-04-重点

    Vue-基础-day04-重点 01-基础-组件-局部组件 组件: 封装html+css+js 两类+三步 定义 ...

  • 4 动画及组件

    vue-> 过渡(动画) (它的本质走的是css3: transtion ,animation) 组件 ...

  • 《目录》

    更新到 111、MD5在项目中的加密のmd5单向加密2、vue-组件化の封装组件、引用组件3、微信小程序开发...

  • vue-组件

    1.Vue中是如何引入组件(对象 构造函数 )1.1. Vue是vue实例的构造函数, 通过new Vue() ...

  • VUE-组件

    组件 组件就是为了拆分Vue实例的代码量的,能够让我们以不同的组件来划分不同的功能模块,将来我们需要什么样的功能,...

  • Vue-组件

    定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功...

  • Vue-组件

    一.组件 组件都具有模板,template new Vue()创建的是根组件 组件与实例一一对应,创建一个实例就是...

  • Vue-组件

  • vue-事件

    title: vue-事件处理date: 2017-03-23 vue 事件 本文介绍vue组件的事件处理,并通过...

网友评论

      本文标题:Vue-组件

      本文链接:https://www.haomeiwen.com/subject/hmhkuqtx.html