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 ...
随机推荐
- 使用js栈stack类的实现
使用js栈stack类的实现 /*使用栈stack类的实现*/ function stack() { this.dataStore = [];//保存栈内元素,初始化为一个空数组 this.top = ...
- heroku 部署ruby项目后 未连接数据库显示（We're sorry, but something went wrong. If you are the application owner ）
如何部署请参照: http://blog.csdn.net/xz360717118/article/details/62422741 部署后如果发现显示:We're sorry, but someth ...
- ubuntu 下 重启 mongo 后 遇到蛋疼问题。
以后,切忌 mongo 正常关闭后 ,再重启ubuntu. 否则后果这是很严重. 2014.8.6日 PM 6点. 网站莫名打不开了,全部是空白,又是老问题. 幸亏 及时发现,那就重启下. 蛋疼,重启 ...
- 如何使用Android Studio提高App质量
Android Studio作为现在谷歌主推的Android开发功能,除了提供了大量的功能帮助快速开发Android代码之外,在代码质量控制方面也提供了很多工具,这些工具都放在Analyze菜单下, ...
- jquery获取input的checked属性
1.经常需要判断某个按钮是否被选中. 2.基于jquery. <!DOCTYPE html> <html lang="en"> <head> & ...
- Java虚拟机（一）：JVM简介
JVM简介 Java虚拟机(JVM)是由Java虚拟机规范定义的,其上运行的是字节码指令集.这种字节码指令集包含一个字节的操作码(opcode),零至多个操作数(oprand),虚拟机规范明确定义了每 ...
- xgboost与gbdt区别
1.基分类器的选择:传统GBDT以CART作为基分类器,XGBoost还支持线性分类器,这个时候XGBoost相当于带L1和L2正则化项的逻辑斯蒂回归(分类问题)或者线性回归(回归问题). 2.二阶泰 ...
- InterView之PHP（2）
PHP 理论知识 常用的超全局变量(8个) $_GET ----->get传送方式 $_POST ----->post传送方式 $_REQUEST ----->可以接收到get和po ...
- mysql 设置隔离级别
查看隔离级别: mysql> select @@tx_isolation; +-----------------+ | @@tx_isolation | +-----------------+ ...
- C++调用C代码的两种方式
由于C++支持函数重载,在编译函数代码的时候会加上参数类型的信息,而C编译只有函数名信息,导致C++直接调用C代码在链接的时候会出现函数未定义的问题.解决这种问题有两种方法.方法一:在写C代码的时候考 ...