Vue 框架-09-初识组件的应用
Vue 框架-09-初识组件的应用
今天的第一个小实例，初步使用组件：
在 app.js 中定义模板组件，在 html 文件中使用自定义标签来显示 js 文件中定义的 html 代码块
比如说，下面定义一个模板，提示我的 csdn 连接，可以这样使用：
源代码 app.js 文件：
//定义模板，因为在 html 中对应一个自定义标签模板，所以内容也只能是一对标签内有多个标签的格式，而不能是 两个标签并列的格式
Vue.component("tocsdn",{
template:'<h2>大家好，大家可以在百度搜索：肖朋伟csdn 找到我的博客</h2><a href="https://blog.csdn.net/qq_40147863">点击跳转</a>'
})
//实例化 vue 对象
new Vue({
//注意代码格式
//el：element 需要获取的元素，一定是 html 中的根容器元素
el:"#vue-app",
data:{
},
//存储自己的方法
methods:{
welcome: function(){
alert(" welcome to learn with me!");
}
}
});
源代码 html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VueLearn2-cnblogs/xpwi</title>
<!--引入自定义的样式-->
<link rel="stylesheet" href="css/style.css" />
<!--引入 vue 核心 js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->
<div id="vue-app">
<!--在 html 中使用模板的名称（标签内容在 js 中定义）就可以应用-->
<tocsdn></tocsdn>
</div>
<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->
<script type="text/javascript" src="js/app.js" ></script>
</body>
</html>
第二个小实例：
然后我们也可以加入数据：
源代码 js 文件：
Vue.component("tocsdn",{
template:'<h2>大家可以在百度搜索：肖朋伟csdn 找到我的博客:{{csdnUrl}}</h2>',
data:function(){
return{
csdnUrl:"https://blog.csdn.net/qq_40147863"
}
}
})
//实例化 vue 对象
new Vue({
//注意代码格式
//el：element 需要获取的元素，一定是 html 中的根容器元素
el:"#vue-app",
data:{
},
//存储自己的方法
methods:{
welcome: function(){
alert(" welcome to learn with me!");
}
}
});
原代码 html 文件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VueLearn2-cnblogs/xpwi</title>
<!--引入自定义的样式-->
<link rel="stylesheet" href="css/style.css" />
<!--引入 vue 核心 js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->
<div id="vue-app">
<!--在 html 中使用模板的名称（标签内容在 js 中定义）就可以应用-->
<tocsdn></tocsdn>
</div>
<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->
<script type="text/javascript" src="js/app.js" ></script>
</body>
</html>
提示：在 js 文件中使用的：
data:function(){
return{
csdnUrl:"https://blog.csdn.net/qq_40147863"
}
}
和
var theUrl = {
csdnUrl:'csdnUrl:https://blog.csdn.net/qq_40147863'
}
两种方式的区别，
上面一种方式 csdnUrl 是在内部定义，当只需要在单个组件中使用，修改时不会修改其他组件里面的数据
更多文章：
Vue 框架-09-初识组件的应用的更多相关文章
- VUE框架的初识
VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...
- Vue框架：vue-cookies组件
目录 一.vue-cookies简介 二.vue-cookies安装与配置 三.vue-cookies的使用 一.vue-cookies简介 vue-cookies组件是vue框架用来操作浏览器coo ...
- vue框架之自定义组件中使用v-model
通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...
- Vue框架之初识
介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式.实际的DOM操作和输出格式被抽象的方式到 ...
- WijmoJS V2019.0 Update2发布：再度增强 React 和 Vue 框架的组件功能
前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...
- vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...
- Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置
Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置 这是上一篇对目录简单介绍: 关于编辑器,可以使用轻量级的 Sublime Text 3,我使用的是 HBuilder, 但 ...
- vue框架中的日期组件转换为yyy-mm-dd格式
最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式
- Vue框架（三）——Vue项目搭建和项目目录介绍、组件、路由
Vue项目环境搭建 1) 安装node,在官网下载好,然后在本地安装 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm ins ...
随机推荐
- h5在线1v1客服|web在线客服系统|h5即时聊天
网上有很多环信.美恰之类的客服系统,最近也使用h5+css3+fontJs+swiper+wcPop等技术架构开发了一个在线客服(1v1沟通聊天),可以应用到在线临时聊天.在线咨询等情景.实现了消息. ...
- Ubuntu之tar与curl操作
1,压缩备份: tar cfvj /tmp/test.tar.bz2 /tmp/test tar cfvz /tmp/test.tar.gz /tmp/test tar xfvj /tmp/tes ...
- 批量导入数据到HBase
hbase一般用于大数据的批量分析,所以在很多情况下需要将大量数据从外部导入到hbase中,hbase提供了一种导入数据的方式,主要用于批量导入大量数据,即importtsv工具,用法如下: Us ...
- SSH 转发学习【转】
本地端口转发 假定有三台主机A.B.C.由于种种原因(无论是防火墙还是路由原因),AC两台主机之间无法连通.但是B却可以和A.C连通.这时候就可以用本地端口转发来实现A和C通过B来连通. A 192. ...
- dos命令行运行.class源文件错误解决办法
dos命令行运行java源文件 public static void main(String[] args) throws IOException { // TODO Auto-generated m ...
- Linux 目录流管理
目录 1. 打开/关闭文件 1). 打开目录 / opendir 2). 关闭文件 / fclose 2. 读/写目录流 1). 目录流-读 / readdir & readdir_r 3. ...
- 工程中添加工程依赖 Xcode iOS
有时我们需要在一个主工程中添加其他的子工程,用来对子工程进行编写修改或者是利用子工程中的库文件等等操作,这时候我们需要用到工程的嵌套. 步骤:(看图说话) 1.新建主工程,名为TestTTTT ...
- 骆驼拼写法（CamelCase)
在英语中,依靠单词的大小写拼写复合词的做法,叫做"骆驼拼写法"(CamelCase).比如,backColor这个复合词,color的第一个字母采用大写. 这种拼写法在正规的英语中 ...
- JS获取地址栏参数&jquery
第一种:字符串拆分法 window.location.href 或者 location.href 或者 window.location 获得地址栏中的所有内容 decodeURI()可以解码地址栏中的 ...
- fzu 2154 YesOrNo
Problem 2154 YesOrNo Accept: 14 Submit: 29Time Limit: 1000 mSec Memory Limit : 32768 KB Proble ...