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学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
随机推荐
- .17-浅析webpack源码之compile流程-入口函数run
本节流程如图: 现在正式进入打包流程,起步方法为run: Compiler.prototype.run = (callback) => { const startTime = Date.now( ...
- 在Android开发中替换资源图片不起作用的解决方法
现象 在android开发中,经常会需要替换res\drawable中的图片,打开res\layout下的文件预览布局页面发现图片已经被替换,但在模拟器或者真实机器上运行时发现该图片并没有被替换,还是 ...
- [日常] Go语言圣经--接口约定习题2
练习 7.3: 为在gopl.io/ch4/treesort (§4.4)的*tree类型实现一个String方法去展示tree类型的值序列. package main import( "f ...
- <mvc:annotation-driven /> 作用
<mvc:annotation-driven /> 是一种简写形式,完全可以手动配置替代这种简写形式,简写形式可以让初学都快速应用默认配置方案.<mvc:annotation-dri ...
- PHP的openssl_encrypt方法的JAVA和JS的实现
这次在JAVA项目中遇到了要使用PHP的openssl_encrypt这个方法来进行加密以下是内容分享: 在PHP中加密内容是: // openssl_encrypt($data, $method, ...
- Java基础——collection接口
一.Collection接口的定义 public interfaceCollection<E>extends iterable<E> 从接口的定义中可以发现,此接口使用了泛型 ...
- Jave Web阿里云短信服务发送验证码
首先得在阿里云根据流程开通短信服务,申请签名和模版,具体看文档 因为这是个web项目,用到了thymeleaf模板,所以在pom.xml中加入如下依赖 <dependency> <g ...
- oracle逐步学习总结之oracle数字函数和日期函数（基础四）
原创作品,转自请注明出处:https://www.cnblogs.com/sunshine5683/p/10140716.html 继上篇总结,继续进行总结: 以下下数字函数: 1.abs(n):返回 ...
- C# Task注意事项
1.在Task中调用主线程控件 Task.Factory.StartNew(() => { }).ContinueWith(task => { this.Invoke(new Action ...
- hudson运行出现java.io.IOException Cannot run program的错误分析
作者:朱金灿 来源:http://blog.csdn.net/clever101 在昨天运行每日构建时hudson突然出错,错误信息如下: [MySoft3.1] $ cmd /c call &quo ...