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

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

demo

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue入门</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

</head>

<body>

  <div id="first">

  </div>

  <script>

      new  Vue({

        //绑定上面的id el指的是vue实例跟哪个dom节点绑定

        el:"#first",

        template:'<h1>hello{{msg}}</h1>',

        data:{

          msg:"world"

        }

      })

  </script>

</body>

</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. nginx展示目录及美化

    1.下载nginx 2.下载fancyindex git clone https://github.com/aperezdc/ngx-fancyindex.git ngx-fancyindex 3.下 ...

  2. 枚举对象中的属性 for . . in

    枚举对象中的属性:把对象中所有的属性和值都取出来 使用 for . . . in 语句 语法: for(var  变量  in  对象){ } for  . . . in 语句  对象中有几个属性,循 ...

  3. mysql的各种锁简单总结

    表总体上分为三种: 1.表锁 Myisam 开销小,并发低,加锁快,不会出现死锁问题:锁粒度大,发生锁冲突的概率最高. 2.行锁 innodb  开销大,并发高,加锁慢,会出现死锁问题:锁粒度小,发生 ...

  4. matlab计时超好用

    方法一: profile on <body?> profile viewer 会把所有代码的时间,都显示出来,每行每个函数用时统计,一目了然: 方法二: tic; <body-par ...

  5. rsync+inotify同步备份文件

    前言 rsync作用:man rsync可以看到解释为a fast, versatile, remote (and local) file-copying tool,主要进行文件的同步. inotif ...

  6. Java位运算总结

    关于位运算,以前也见过,搜过,当时会用了,过后就忘了,今天好好学习一遍,然后整理一下. Java中的位运算,涉及到计算机的二进制,位用bit表示,1Byte=8bit,根据各种基本数据类型占用的字节空 ...

  7. Lua的控制流程

    一.条件语句 if语句 if语句是由一个布尔表达式作为条件判断,或者紧跟其他语句组成. if else语句 if语句可以是else搭配使用,在if条件表达式为false时执行else语句代码 if嵌套 ...

  8. flume配置参数的意义

    1.监控端口数据: flume启动: [bingo@hadoop102 flume]$ bin/flume-ng agent --conf conf/ --name a1 --conf-file jo ...

  9. NX二次开发-UFUN修改当前导出CGM文件选项设置UF_CGM_set_session_export_options

    文章转载自唐康林NX二次开发论坛,原文出处: http://www.nxopen.cn/thread-126-1-1.html 刚才有同学问到这个问题,如果是用NXOpen来做,直接录制一下就可以了: ...

  10. 6 Accessing and Managing Symbols with armlink

    6.4 Image$$ execution region symbols The linker generates Image$$ symbols for every execution region ...