挂载点: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. 从零开始 Code Review,两年实战经验分享!

    作者:wenhx http://www.cnblogs.com/wenhx/p/5641766.html 前几天看了<Code Review 程序员的寄望与哀伤>,想到我们团队开展 Cod ...

  2. hdu6393 /// 树链剖分

    题目大意: 给定n q 在n个点n条边的图中 进行q次操作 0 k x 为修改第k条边的值为x 1 x y 为查询x到y的最短路 https://blog.csdn.net/nka_kun/artic ...

  3. 如果手工启动chromedriver

    使用selenium模拟登陆网站时,有些网站会识别chrome driver里的json信息,从而判断是不是爬虫程序,做到反爬效果.(比如知乎) 下面说明下怎么手动启动chromedriver 1). ...

  4. jsk

    题目描述 码队的女朋友非常喜欢玩某款手游,她想让码队带他上分.但是码队可能不会带青铜段位的女朋友上分,因为码队的段位太高(已经到达王者),恐怕不能和他的女朋友匹配游戏. 码队的女朋友有些失落,她希望能 ...

  5. 多渠道打包工具Walle源码分析

    一.背景 首先了解多渠道打包工具Walle之前,我们需要先明确一个概念,什么是渠道包. 我们要知道在国内有无数大大小小的APP Store,每一个APP Store就是一个渠道.当我们把APP上传到A ...

  6. 驾驶心率和呼吸,疲劳检测系统,通过安全带,坐垫等内置sensor

    HARKEN - Heart and respiration in car embedded nonintrusive sensors 2 https://www.youtube.com/watch? ...

  7. 召回率、AUC、ROC模型评估指标精要

    混淆矩阵 精准率/查准率,presicion 预测为正的样本中实际为正的概率 召回率/查全率,recall 实际为正的样本中被预测为正的概率 TPR F1分数,同时考虑查准率和查全率,二者达到平衡,= ...

  8. java mysql 数据库

    1. jdbc 驱动名还是数据库 String driver = "com.mysql.jdbc.Driver"; //URL指向要访问的数据库名mydataString url ...

  9. Ruby 中文编码

    Ruby 中文编码 前面章节中我们已经学会了如何用 Ruby 输出 "Hello, World!",英文没有问题,但是如果你输出中文字符"你好,世界"就有可能会 ...

  10. NX二次开发-UF_MODL_create_bplane创建有界平面

    这里要注意一点,有界平面是body,不是face,以前我刚开始做项目的时候一直以为有界平面是face,后来发现不对.是body NX9+VS2012 #include <uf.h> #in ...