vue2.0学习笔记之组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<Demo></Demo>
</div>
</body>
<script src="vue.js"></script>
<script>
Vue.component("Demo",{
template:"<h3>全局组件</h3>"
})
new Vue({
el:"#app"
})
</script>
</html>
写法二：全局组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<my-temp></my-temp>
</div>
<template id="DemoTemp">
<h3>全局组件</h3>
</template>
</body>
<script src="vue.js"></script>
<script>
var Home = {
template:"#DemoTemp"
};
Vue.component("my-temp",Home)
new Vue({
el:"#app"
})
</script>
</html>
写法三：局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<my-temp></my-temp>
</div>
<template id="DemoTemp">
<h3>局部组件</h3>
</template>
</body>
<script src="vue.js"></script>
<script>
var Home = {
template:"#DemoTemp"
};
// Vue.component("my-temp",Home)
new Vue({
el:"#app",
components:{
"my-temp":Home
}
})
</script>
</html>
vue2.0学习笔记之组件的更多相关文章
- vue2.0学习笔记之路由（二）路由嵌套+动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue2.0学习笔记之路由（二）路由嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue2.0学习笔记一 ：各种表达式
#,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性: #,过滤器可以串联 {{ message | filterA | ...
- vue2.0学习笔记（第八讲）（vue-cli的使用）
vue-cli相当于脚手架,可以帮助我们自动生成模板工程.其内部集成了很多的项目模板,如simple.webpack.webpack-simple等.其中webpack这个项目模板适用于大型项目的开发 ...
- Vue2.0学习笔记
环境搭建 vue-cli@3 vue-cli@2.X npm i -g @vue/cli 模板语法 文本 <span>Message: {{ msg }}</span> ...
- Vue2.0学习笔记：Vue事件修饰符的使用
事件处理 如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
- Vue2.0学习--Vue数据通信详解
一.前言 组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.组件间如何传递数据就显得至关重要.本文尽可能罗列出一些常见的数据传递方式,如p ...
- VUE2.0学习总结
摘要: 年后公司项目开始上vue2.0,自己对学习进行了总结,希望对大家有帮助! VUE2.0学习 vue介绍 vue是什么? https://vuefe.cn/guide vue也是一个数据驱动框架 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
随机推荐
- Android-远程Service
http://blog.csdn.net/guolin_blog/article/details/9797169 http://www.jianshu.com/p/eeb2bd59853f 将一个普通 ...
- TCP/IP 基础简介
引言本篇属于TCP/IP协议的基础知识,重点介绍了TCP/IP协议簇的内容.作用以及TCP.UDP.IP三种常见网络协议相关的基础知识. 内容TCP/IP协议簇是由OSI七层模型发展而来的,之所以存在 ...
- 本地服务器搭建服务：mysql
话不多少,mysql的优劣不再此讨论. 1.官网地址:https://dev.mysql.com/downloads/mysql/ 下载页面直接 No thanks,just start my do ...
- 排序算法(2)--Insert Sorting--插入排序[2]--binary insertion sort--折半(二分)插入排序
作者QQ:1095737364 QQ群:123300273 欢迎加入! 1.基本思想 二分法插入排序的思想和直接插入一样,只是找合适的插入位置的方式不同,这里是按二分法找到合适的位置,可 ...
- JavaSE——序列化和反序列化
序列化: 序列化对应写的操作.(读与写都是站在应用的角度上) 序列化就是一种用来处理对象流的机制,所谓对象流也就是将对象的内容进行流化.可以对流化后的对象进行读写操作,也可将流化后的对象传输于网络之间 ...
- hadoop重启后，hdfs目录权限问题
今天重启了下Hadoop集群,使用Eclipse调试hdfs api的时候报错: [WARNING] java.lang.NullPointerException at org.conan.kafka ...
- ActiveReports 报表控件V12新特性 -- 页面报表新增子报表
ActiveReports是一款专注于 .NET 平台的报表控件,全面满足 HTML5 / WinForms / ASP.NET / ASP.NET MVC / WPF 等平台下报表设计和开发工作需求 ...
- ionic开发之Android的focus起作用，而iOS不起作用
基于ionic的iOS的hybird APP无法使用focus获取焦点和键盘的问题. 解决办法就是: 原本APP的配置文件config.xml里面默认有一句 这句话的大概意思就是键盘的显示需要用户去触 ...
- Python+Selenium笔记（十二）：数据驱动测试
(一) 前言 通过使用数据驱动测试,实现对输入值和预期结果的参数化.(例如:输入数据和预期结果可以直接读取Excel文档的数据) (二) ddt 使用ddt执行数据驱动测试,ddt库可以将测试 ...
- GenyMotion the virtual device got no ip address 问题解决
不要再找答案了 升级你的virtual box到最新版本(目前是 5.0.26,已通过) 如果你是windows 10系统 必须关闭hyper-v 在管理员命令行下运行bcdedit /set hyp ...