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. JDBC是如何执行SQL脚本的

    (1) 加载JDBC驱动程序: Cllass.forName(" 驱动程序" );   //你要连接的数据库对象 (2) 建立连接 Connection conn=DriverMa ...

  2. MYSQL数据库中,常见的数据类型有哪些?它们与java中的数据类型如何对应

    A.常规 映射 integer 或者 int int 或者 java.lang.Integer INTEGER 4 字节 long long Long BIGINT 8 字节 short short  ...

  3. TCP工作过程；TCP Flood的攻击的原理和现象；TCP协议设计的安全隐患与防范对策

    TCP分三个阶段 连接建立(三次握手) 数据传输 连接释放(四次挥手) TCP工作过程 TCP连接建立阶段 第一次握手:Client将标志位SYN置为1,随机产生一个值seq=J,并将该数据包发送给S ...

  4. JS简单示例

    首先感谢海棠学院提供的优质视频资源 学习总是一个由简单到难的过程,由浅入深,一步一个脚印,将学过的点玩的深入一点,才能有所进步,单学习总是枯燥而乏味的,切忌焦躁; 示例代码另存放在github:htt ...

  5. 解决：python 连接Oracle 11g 报错：ORA-12514: TNS: 监听程序当前无法识别连接描述符中请求的服务

    其次,将查询到的service_name替换sid即可:conn=cx_Oracle.connect('hr/admin@localhost:1521/EE.oracle.docker')

  6. 吴裕雄 19-Mysql 连接的使用

    JOIN 按照功能大致分为如下三类:INNER JOIN(内连接,或等值连接):获取两个表中字段匹配关系的记录.LEFT JOIN(左连接):获取左表所有记录,即使右表没有对应匹配的记录.RIGHT ...

  7. servlet中的执行顺序

  8. tomcat 启动脚本

    #!/bin/bash##干掉运行中的tomcat  results=把结果赋值给变量,可以保证命令上条执行完再执行下一条#也可以用这句简单的代码按进程名kill: ps -ef | grep 进程名 ...

  9. 使用Js控制ReactRouter路由

    [使用Js控制ReactRouter路由] 首先引入PropTypes: const PropTypes = require('prop-types'); 然后定义context的router属性: ...

  10. metasploit framework（六）：信息收集

    nmap 扫描 扫描完毕之后,hosts查看扫描的结果 auxiliary 扫描 使用arpsweep模块扫描 查看设置 设置网卡和目标IP 设置伪造的源IP和源MAC set SHOST <伪 ...