挂载点：vue实例 里面的el属性 对应的 id 所在的dom节点

模板：指的是挂载点内部的内容
          模板可以写在挂载点内部
          也可以写在属性里面

demo

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>vue入门</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  7. </head>
  8. <body>
  9.   <div id="first">
  10.  
  11.   </div>
  12.   <script>
  13.       new  Vue({
  14.         //绑定上面的id el指的是vue实例跟哪个dom节点绑定
  15.         el:"#first",
  16.         template:'<h1>hello{{msg}}</h1>',
  17.         data:{
  18.           msg:"world"
  19.         }
  20.       })
  21.   </script>
  22. </body>
  23. </html>

　效果：

　

2018-05-01    11:20:11

vue 挂载点 实例 模板的更多相关文章

  1. vue入门之创建第一个实例，挂载点、模板和实例之间的关系

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue入门 0 小demo (挂载点、模板、实例)

    vue入门 0 小demo  (挂载点.模板) 用直接的引用vue.js 首先 讲几个基本的概念 1.挂载点即el:vue 实例化时 元素挂靠的地方. 2.模板 即template:vue 实例化时挂 ...

  3. vue学习笔记 实例（二）

    var data = {a: 1} var vm = new Vue({ el: '#example', data: data, created: function () { // `this` 指向 ...

  4. Vue 介绍,优点,实例

    一 认识vue 1.什么是vue 以数据驱动的web渐进式框架 三大主流框架: Angular React Vue 设计模式:MVVM 2.vue优点 - 以数据驱动,不直接操作DOM,效率高- 单页 ...

  5. Vue简单基础 + 实例 及 组件通信

    vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...

  6. Vue组件开发实例（详细注释）

    Vue组件开发实例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  7. 浅谈Vue下的components模板

    浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...

  8. 用Vue-cli生成vue+webpack的项目模板怎么设置为vue1.0版本？

    用Vue-cli生成vue+webpack的项目模板 $ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ ...

  9. vue四、实例

    1.new Vue创建根实例 2.data对象,所有的属性加入到 Vue 响应式系统-值发生改变时,视图自动变更为新值 只有实例被创建时存在的属性才会响应式改变,后增加的不会 vue定义的实例属性和方 ...

随机推荐

  1. 网络编程（四）——基于udp协议的套接字socket、socketserver模块的使用

    基于udp协议的套接字.socketserver模块 一.UDP协议(数据报协议) 1.何为udp协议 不可靠传输,”报头”部分一共只有8个字节,总长度不超过65,535字节,正好放进一个IP数据包. ...

  2. Java控制台

    Console类的目的是使Java程序和控制台之间的交互更容易.Console类是java.io包中的一个实用程序类,用于访问系统控制台.控制台不能保证在所有机器上的Java程序中可访问. 例如,如果 ...

  3. LCA的 Trajan 算法

    参考博客 参考博客 根据博客的模拟,就可以知道做法和思想. 现在就是实现他. 例题 :hdu  2586  题意:m 个询问,x  到  y  的距离,我们的思想就是求出:x到根的距离+y到根的距离- ...

  4. react 点击事件传值

    test(e){ console.log(e.target) } <button onClick={(e)=>{this.test(e)}}></button> 有时要是 ...

  5. UPDATE - 更新一个表中的行

    SYNOPSIS UPDATE [ ONLY ] table SET column = { expression | DEFAULT } [, ...] [ FROM fromlist ] [ WHE ...

  6. centos WPS 字体安装

    首先下载字体,解压后将整个wps_symbol_fonts目录拷贝到/usr/share/fonts目录下,然后赋予可读可执行权限. 权限设置操作如下: cd /usr/share/fonts/ ch ...

  7. node 模板引擎使用的步奏

    //定义模板引擎 app.engine('html',swig.renderFile);//设置模板引擎所存放的位置app.set('views','/views');//注册所使用的模板引擎app. ...

  8. Codeigniter Session: Configured save path is not a directory

    Codeigniter 3.x Message: Session: Configured save path '' is not a directory, doesn't exist or canno ...

  9. JRebel安装部署，激活

    1.安装部署 2.激活 去官网获得激活码,首先进行注册,之后获得激活码 官网:https://jrebel.com/software/jrebel/trial/getkey/ 查看是否激活

  10. js 浮点数计算问题

    //说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加法结果. //调用:jsAdd(arg1,arg2) //返回值:arg1加上arg2的精确 ...