挂载点：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. Fedora 25技巧

    shell界面按F5插入-(波浪号,HOME) 同一个应用不同窗口切换alt + `

  2. git stash封存分支 以及关于开发新功能的处理

    有种情况,我们要修复项目的bug时,但别的分支有修改的代码,要修复的bug可能会影响(所有分支共用一个暂存区).可以单独创建一个bug分支,用于修复和提交bug,在修改前可以先stash封存分支修改的 ...

  3. Markdown测试2

    四级标题 内容测试 内容测试 内容测试 为知笔记发布博客时会添加一些HTML或CSS的标记,会影响文章的摘要显示. A B 一 二 α​" role="presentation&q ...

  4. minicom 的使用

    1.切换到 root 用户. [root@localhost btools]#su - 2. 查找有效的串设备. [root@localhost ~]#cat /proc/devices ... 4 ...

  5. cross compile 交叉编译 ffmpeg

    ffmpeg 支持各种压缩格式的视频解码库,经常出现在各种播放器中,交叉编译也是一项麻烦的事情. 1. 下载ffmpeg 源码包   http://ffmpeg.org/releases/ffmpeg ...

  6. github合并分支到master

    (1)切换到master分支 git checkout master (2) 将backup分支的代合并到master git merge backup (3) 查看状态 git status (4) ...

  7. shell脚本明文密码隐藏且加密

    将密码放到文件中去,比如/root/.pass.txtpassword=`</root/.pass.txt`还怕密码泄露的话,就把pass.txt权限设置下. chattr +i /root/. ...

  8. Python中的网络爬虫怎么用？

    爬虫概述 (约2016年)网络爬虫个人使用和科研范畴基本不存在问题,但商业盈利范畴就要看对方了. 通过网站的Robots协议(爬虫协议)可以知道可以和不可以抓取的内容,其中User-Agent: 为允 ...

  9. HDU3605: Escape-二进制优化建图-最大流

    目录 目录 思路: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 目录 题意:传送门  原题目描述在最下面.  \(n(n\leq 100000)\)个人\(m(m\leq 10) ...

  10. [转]WinForm DataGridView 绑定泛型List(List<T>)/ArrayList不显示的原因和解决

    背景:无意间遇到了一个不大不小的问题,希望对一些遇到的人有所帮助! 一.问题 WinForm DataGridView 绑定泛型List (List<T>)/ArrayList不显示,UI ...