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-初识组件的应用的更多相关文章

  1. VUE框架的初识

    VUE框架的初识 初步了解Vue.js框架(渐进式前端框架) Vue.js是一种轻量级的前端MVVM框架.同时吸收了React(组件化)和Angular(灵活指令页面操作)的优点.是一套构建用户界面的 ...

  2. Vue框架：vue-cookies组件

    目录 一.vue-cookies简介 二.vue-cookies安装与配置 三.vue-cookies的使用 一.vue-cookies简介 vue-cookies组件是vue框架用来操作浏览器coo ...

  3. vue框架之自定义组件中使用v-model

    通常 vue在html常见表单空间支持v-model双向绑定例如 <input v-model="message" placeholder="edit me&quo ...

  4. Vue框架之初识

    介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式的ViewModel层,它连接视图和数据绑定模型通过两种方式.实际的DOM操作和输出格式被抽象的方式到 ...

  5. WijmoJS V2019.0 Update2发布：再度增强 React 和 Vue 框架的组件功能

    前端开发工具包 WijmoJS 在2019年的第二个主要版本 V2019.0 Update2 已经发布,本次发布涵盖了React 和 Vue 框架下 WijmoJS 前端组件的功能增强,并加入更为易用 ...

  6. vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)

    第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...

  7. Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置

    Vue 框架-11-介绍src文件流程及根组件app+HBuilder 配置 这是上一篇对目录简单介绍: 关于编辑器,可以使用轻量级的 Sublime Text 3,我使用的是 HBuilder, 但 ...

  8. vue框架中的日期组件转换为yyy-mm-dd格式

    最近在用vue框架写一个app,这个是用到的日期格式转换,把下面的标准格式转换为字符串连接格式

  9. Vue框架（三）——Vue项目搭建和项目目录介绍、组件、路由

    Vue项目环境搭建 1) 安装node,在官网下载好,然后在本地安装 官网下载安装包,傻瓜式安装:https://nodejs.org/zh-cn/ 2) 换源安装cnpm >: npm ins ...

随机推荐

  1. (转)Linux Shell系列教程之（十四） Shell Select教程

    本文属于<Linux Shell 系列教程>文章系列,该系列共包括以下 18 部分: Linux Shell系列教程之(一)Shell简介 Linux Shell系列教程之(二)第一个Sh ...

  2. CAJ Viewer安装流程以及CAJ或Pdf转换为Word格式

        不多说,直接上干货! pdf转word格式,最简单的就是,实用工具 Adobe Acrobat DC 首先声明的是,将CAJ或者Pdf转换成Word文档,包括里面的文字.图片以及格式,根本不需 ...

  3. windows设置多用户模式

    在实际使用我们较多使用的都是windows系统的单用户模式,它意味着当我们登录一个用户的时候如果另外一个用户也在登录,那么就得等待另外一个用户退出后才可以登录我们这个用户,但是实际需求中,我们经常会遇 ...

  4. 自动换行的两种代码(C#)

    最近有个需求,需要将C# winform中的listBox中的内容自动换行, 其实在用listBox前,已经用textBox实现了大部分功能,可惜最后还是有个焦点的问题, 就是textBox中的文字会 ...

  5. jetty9优化的两处地方

    http://www.cnblogs.com/LBSer/p/3637387.html jetty 9两个优化: https://webtide.intalio.com/2013/01/jetty-9 ...

  6. 玩转mongodb（五）：mongodb 3.0+ 查询性能分析

    mongodb性能分析方法:explain() 为了演示的效果,我们先来创建一个有200万个文档的记录.(我自己的电脑耗了15分钟左右插入完成.如果你想插更多的文档也没问题,只要有耐心等就可以了.) ...

  7. 终于完成了-- github.com/salomon1184/METP

  8. [codeup] 2044 神奇的口袋

    题目描述 有一个神奇的口袋,总的容积是40,用这个口袋可以变出一些物品,这些物品的总体积必须是40.John现在有n个想要得到的物品,每个物品的体积分别是a1,a2--an.John可以从这些物品中选 ...

  9. 产环境部署node记录（三）： centOS 7 mySQL和mongoDB的安装

    [mySQL的安装]: CentOS7默认数据库是mariadb,现在来安装mySQL 1.下载安装包 这里下载了四个安装包,后面会用到 yum -y install perl perl-devel ...

  10. 追踪MySQL中长时间运行的事务

    接上一篇,未提交的事务导致锁等待,锁住一段时间后又提交了(也可能是回滚),锁释放业务继续运行.那么我们如何知道产生锁的事务是在跑什么SQL? 今天讲的这个工具,就可以通过监听3306端口的数据,把每个 ...