Vue.component("greeting",{
     template:
     `<p>{{ name }}大家好
      <button v-on:click="changeName">改名</button></p>`,
     data:function(){
         return {
             name:'檐下听雨'
         }
     },
     methods:{
         changeName:function(){
             this.name='yanxiatingyu';
         }
     }
 });

 new Vue({
     el:'#vue-app-one'

 });

 new Vue({
     el:'#vue-app-two'

 });

Vue.js

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <title></title>
     <link rel="stylesheet" type="text/css" href="vue.css">
     <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
     <style type="text/css">
         .cr{
             color:red;
         }
     </style>
 </head>
 <body>
     <h3>初识Vue 组件</h3>
     <div id="vue-app-one">
         <greeting></greeting>

     </div>

     <div id="vue-app-two">
         <greeting></greeting>
     </div>

     <script src="app.js"></script>
 </body>
 </html>

HTML

vue 初识组件的更多相关文章

  1. vue学习目录 vue初识 this指向问题 vue组件传值 过滤器 钩子函数 路由 全家桶 脚手架 vuecli element-ui axios bus

    vue学习目录 vue学习目录 Vue学习一之vue初识 Vue学习二之vue结合项目简单使用.this指向问题 Vue学习三之vue组件 Vue学习四之过滤器.钩子函数.路由.全家桶等 Vue学习之 ...

  2. ES-6常用语法和Vue初识

    一.ES6常用语法 1.变量的定义 1. 介绍 ES6以前 var关键字用来声明变量,无论声明在何处都存在变量提升这个事情,会提前创建变量. 作用域也只有全局作用域以及函数作用域,所以变量会提升在函数 ...

  3. day 81 Vue学习一之vue初识

      Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js ...

  4. day 80 Vue学习一之vue初识

    Vue学习一之vue初识   本节目录 一 Vue初识 二 ES6的基本语法 三 Vue的基本用法 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 vue初识 vue称为渐进式js框架 ...

  5. Vue2.0 【第二季】第6节 Component 初识组件

    目录 Vue2.0 [第二季]第6节 Component 初识组件 第6节 Component 初识组件 一.全局化注册组件 二.局部注册组件局部 三.组件和指令的区别 Vue2.0 [第二季]第6节 ...

  6. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

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

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  8. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  9. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

随机推荐

  1. delphi 大文件的读写 使用 MapviewOffile

    unit filemap; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, For ...

  2. 6.面向对象 -类.md

    目录 1. static: 2. 类在内存中,每一个类在创建在栈内存中,当创建一个对象的时候,将非类变量再堆内存中创建,而类变量是不会因为创建对象而在堆中重新创建 3. 对象.引用和指针: 4. 类名 ...

  3. Javascript中构造函数的返回值问题和new对象的过程

    首先明确一点:javascript中构造函数是不需要有返回值的,这一点跟java很类似.可以认为构造函数和普通函数的最大差别就是:构造函数中没有return语句,普通函数可以有return语句:构造函 ...

  4. rsync sersync搭建

    目标服务器 192.168.100.47 源服务器    192.168.100.46 目标服务器配置 [root@node01 nodejs]# cat /etc/rsyncd.conf #日志文件 ...

  5. 用git bash 传数据到远程出错：git push origin master 出错：error: failed to push some refs to

    https://blog.csdn.net/qq_28055429/article/details/51007453

  6. Winform 各种属性、方法、控件

    窗体是程序与用户交互的可视界面,窗体也是对象,窗体类定义了生成窗体的模版,实例化一个窗体类就产生了一个窗体. .NET框架类库的System.Windows.Forms命名空间中定义的Form类是所有 ...

  7. MFC笔记1

    1.在对话框文档中定义两个定时器,每间隔5秒弹出一个消息框提示“定时器1”,每隔5秒弹出一个消息框提示“定时器2” UINT ID_TIMER1 = 1 , ID_TIMER2 = 2;   //设置 ...

  8. pandas 读取大文件 read_table C-engine CParserError: Error tokenizing data

    解决办法: pd_data = pd.read_table(comment_file,header=None,encoding='utf-8', engine='python') 官网解析: engi ...

  9. 04_web基础（四）之servlet详解

    16.17.18.servlet生命周期 javax.servlet.Servlet接口方法:public String getServletInfo():获取Servlet相关信息(作者,版权,版本 ...

  10. Java冒泡具体的原理，以及下标的变化

    原理:比较两个相邻的元素,将值大的元素交换至右端. 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面.即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后.然后比较第2个数和第3个数,将 ...