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. javaWeb知识点学习（一）

    1.静态页面的传递过程 在静态WEB程序中,客户端使用WEB浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Request),告诉服务器我现在需 ...

  2. 【Java并发编程】：线程中断

    使用interrupt()中断线程 当一个线程运行时,另一个线程可以调用对应的Thread对象的interrupt()方法来中断它,该方法只是在目标线程中设置一个标志,表示它已经被中断,并立即返回.这 ...

  3. spark 中如何查看单个RDD分区的内容（创建分区，查看分区数）

    spark 创建分区 val scores = Array(("Fred", 88), ("Fred", 95), ("Fred", 91) ...

  4. Exception message: /bin/bash: line 0: fg: no job control

    这个错误是 我本地idea 远程调试hadoop集群出现的 Diagnostics: Exception from container-launch. Container id: container_ ...

  5. MYSQL 中的日期操作（不包含跨年问题）

    先从一个简单的SQL说起 当前week的第一天:select date_sub(curdate(),INTERVAL WEEKDAY(curdate()) + 1 DAY): DATE_SUB() 函 ...

  6. 【原】中文Ubuntu主目录下的文档文件夹改回英文

    想把中文Ubuntu主目录下的文档文件夹改回英文,在Terminal下面操作的时候要输入中文特别不方便,于是便用了更改名字的想法 方法一: 首先把那几个中文名称修改成相应的英文,比如 Desktop. ...

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

  8. C#开发一应用的总结

    要搭建测试环境. Webbrowser使用方面: 重新加载一页面后,要获取新的内容要使用重新使用browser.Document获取: HtmlElement的GetElementsByTagName ...

  9. hadoop学习笔记（十）：MapReduce工作原理（重点）

    一.MapReduce完整运行流程 解析: 1 在客户端启动一个作业. 2 向JobTracker请求一个Job ID. 3 将运行作业所需要的资源文件复制到HDFS上,包括MapReduce程序打包 ...

  10. SQL语句的增删改查（详细）--转载

    转载源: http://blog.csdn.net/a88055517/article/details/6736284/ 一.增:有2种方法 1.使用insert插入单行数据: 语法:insert [ ...