vue 挂载点 实例 模板
挂载点：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 挂载点 实例 模板的更多相关文章
- vue入门之创建第一个实例，挂载点、模板和实例之间的关系
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue入门 0 小demo (挂载点、模板、实例)
vue入门 0 小demo (挂载点.模板) 用直接的引用vue.js 首先 讲几个基本的概念 1.挂载点即el:vue 实例化时 元素挂靠的地方. 2.模板 即template:vue 实例化时挂 ...
- vue学习笔记 实例（二）
var data = {a: 1} var vm = new Vue({ el: '#example', data: data, created: function () { // `this` 指向 ...
- Vue 介绍,优点,实例
一 认识vue 1.什么是vue 以数据驱动的web渐进式框架 三大主流框架: Angular React Vue 设计模式:MVVM 2.vue优点 - 以数据驱动,不直接操作DOM,效率高- 单页 ...
- Vue简单基础 + 实例 及 组件通信
vue的双向绑定原理:Object.defineProperty() vue实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty() 来劫 ...
- Vue组件开发实例（详细注释）
Vue组件开发实例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
- 浅谈Vue下的components模板
浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...
- 用Vue-cli生成vue+webpack的项目模板怎么设置为vue1.0版本？
用Vue-cli生成vue+webpack的项目模板 $ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ ...
- vue四、实例
1.new Vue创建根实例 2.data对象,所有的属性加入到 Vue 响应式系统-值发生改变时,视图自动变更为新值 只有实例被创建时存在的属性才会响应式改变,后增加的不会 vue定义的实例属性和方 ...
随机推荐
- UserCF算法和ItemCF算法的对比
- nodejs的npm修改源
在国内用npm install时,速度总是不尽如人意,解决办法是修改npm的数据源 npm config set registry https://registry.npm.taobao.org 修改 ...
- JAVA 调用c++ 扩展 批评那些垃圾,
//本人喜欢用命令行的方式,这样好理解原理 { 1 生成的要是X64 并且是release版本 不要预编译头的dll项目,就是创建的时是一个空dll项目 2 java 调用时要import com.m ...
- delphi 键盘常用参数（PC端和手机端 安卓/IOS）
常数名称(红色手机端) 十六进制值 十进制值 对应按键(手机端) Delphi编程表示(字符串型)_tzlin注 0 0 大键盘Delete键 #0 VK_LBUTTON 1 1 鼠标的左键 #1 V ...
- DOM——创建元素的三种方式
document.write() document.write('新设置的内容<p>标签也可以生成</p>'); innerHTML var box = document. ...
- 获取ThinkPHP
获取ThinkPHP的方式很多,官方网站(http://thinkphp.cn)是最好的下载和文档获取来源. 官网提供了稳定版本的下载:http://thinkphp.cn/down/framewor ...
- hive的数据压缩
hive的数据压缩 在实际工作当中,hive当中处理的数据,一般都需要经过压缩,前期我们在学习hadoop的时候,已经配置过hadoop的压缩,我们这里的hive也是一样的可以使用压缩来节省我们的MR ...
- NX二次开发-弹出选择文件夹对话框
这个UFUN和NOPEN里没有对应的函数和类,要用C++的方法去做. #include "afxdialogex.h"//弹出选择文件夹对话框头文件 #include " ...
- Vue-cli中使用vConsole，以及设置JS连续点击控制vConsole按钮显隐功能实现
最近发现了一个鹅厂的仓库,实现起来比我这个方便[捂脸].https://github.com/AlloyTeam/AlloyLever 一.vue-cli脚手架中搭建的项目引入vConsole调试 1 ...
- Android 配置正式签名和debug签名
为了测试微信分享,微信分享必须有签名信息才能成功调用微信,所以需要debug 下设置签名,方便调试build.gradle里,配置2个签名: signingConfigs { release { ke ...