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. POJ 1083

    #include<iostream> #include<stdio.h> #include<algorithm> #define MAXN 400 using na ...

  2. webstorm 添加css前缀（兼容）自动添加

    Webstorm自动添加css前缀( 兼容) 百度了很多在webstorm中添加css前缀(兼容)自动添加,autoprefixer插件是首选,对于基本的css,还有less都支持,所以就选择了aut ...

  3. 对CAS机制的理解（一）

    先看一段代码:启动两个线程,每个线程中让静态变量count循环累加100次. public class CountTest { public static int count = 0; public ...

  4. hadoop2.x 安装配置

    hadoop2.x在系统架构上与hadoop1.x有很大的变化 原文地址: http://www.ibm.com/developerworks/cn/opensource/os-cn-hadoop-y ...

  5. 手机访问电脑中部署的tomcat应用

    手机访问电脑中部署的tomcat应用. 操作步骤: 第一种:有无线路由的情况. 1.建议局域通信. 操作如下:电脑,手机都自动连接到无线路由器中(无线路由不必非要联网). 2.启动电脑用的tomcat ...

  6. 【jQuery源码】select方法

    /** * select方法是Sizzle选择器包的核心方法之一,其主要完成下列任务: * 1.调用tokenize方法完成对选择器的解析 * 2.对于没有初始集合(即seed没有赋值)且是单一块选择 ...

  7. 【数组】Spiral Matrix II

    题目: Given an integer n, generate a square matrix filled with elements from 1 to n2 in spiral order. ...

  8. cmake:用add_subdirectory()添加外部项目文件夹

    一般情况下,我们的项目各个子项目都在一个总的项目根目录下,但有的时候,我们需要使用外部的文件夹,怎么办呢? add_subdirectory命令,可以将指定的文件夹加到build任务列表中.下面是将与 ...

  9. px、pt和em的区别

    (转载)http://www.1z1b.com/one-blog-a-week/px-em-pt/ 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网 ...

  10. Vue教程：windows下安装npm和cnpm

    [安装步骤] 一.安装node.js 1.前往node.js官网下载并安装工具,这里安装路径选到D盘,D:\Program Files\nodejs 安装完毕在命令行输入以下命令测试是否安装成功,正确 ...