挂载点：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. Spring Boot Restful WebAPI集成 OAuth2

    系统采用前后端分离的架构,采用OAuth2协议是很自然的事情. 下面开始实战,主要依赖以下两个组件: <dependency> <groupId>org.springframe ...

  2. [已解决]报错Could not install packages due to an EnvironmentError

    安装OpenCV过程中出现错误 代码: pip-conda install -i https://pypi.douban.com/simple/ opencv-python 报错内容如下: Could ...

  3. POJ 2135 /// 最小费用流最大流 非负花费 BellmanFord模板

    题目大意: 给定一个n个点m条边的无向图 求从点1去点n再从点n回点1的不重叠(同一条边不能走两次)的最短路 挑战P239 求去和回的两条最短路很难保证不重叠 直接当做是由1去n的两条不重叠的最短路 ...

  4. pytest的断言、跳过、运行的按需要处理

    def test_one(): assert 1==1 assert 1!=2 assert {'name':'linda','age':19}=={'name':'linda','age':190} ...

  5. leetcode-168周赛-1296-划分数字为连续数字的集合

    题目描述: 自己的提交: class Solution: def isPossibleDivide(self, nums: List[int], k: int) -> bool: c = col ...

  6. HTML+CSS项目——模拟京东网页

    项目准备 项目名称:京东商城 项目描述:京东首页公共部分的头部和尾部制作,京东首页中间部分. 设计目标 保证浏览器 ie7及以上, 火狐, 360, safari,chrome等.谁让我再测ie6,就 ...

  7. 揭秘！2周实现上云上市，阿里云SaaS上云工具包如何打造新云梯？

    提到“上云”,很多人会理解成上IaaS,比如买一些计算.存储和网络云产品,把自己的应用系统部署上去.这的确是通常意义的上云.但对SaaS而言,需要从产品.商业.服务,三个维度考虑SaaS伙伴和客户的痛 ...

  8. 阿里云POLARDB如何帮助百胜软件应对数据库的“巅峰时刻”

    POLARDB是阿里云自研的下一代关系型云数据库,100%兼容MySQL,存储容量最高可达100TB,性能最高提升至MySQL的6倍,适用于企业多样化的数据库应用场景.POLARDB采用存储和计算分离 ...

  9. NX二次开发-UFUN创建工程图注释UF_DRF_create_note

    NX9+VS2012 #include <uf.h> #include <uf_drf.h> #include <NXOpen/Annotations_Note.hxx& ...

  10. Java设计模式简单总结

    1.单例模式:在应用程序整个生命周期中,单例类的实例只有一个,并且会自动实例化.单例类的构造方法必须为私有,并且提供一个全局访问点 public class Test { private Test() ...