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 ...
随机推荐
- POJ 1014
#include<iostream>#include<stdio.h>#define num 6using namespace std; bool DFS(int i,int ...
- Android 手势识别——单击/双击
为什么需要手势识别? 手势对于我们的app有很多的地方都在使用,比如右滑关闭界面等.手势控制分为触发动作(Touch Mechanics,用户手指在屏幕上如何动作)和触发行为(Touch Activi ...
- Cygwin安装配置
1.下载安装Cygwin 我们可以到Cygwin的官方网站下载Cygwin的安装程序,地址是: http://www.cygwin.com/ 或者直接使用下载连接来下载安装程序,下载连接是: ht ...
- gcc 编译问题
一般情况一句话即可: gcc -o fuck fuck.c ./fuck 直接运行了 问题 1. 报错 ld 未找到 此时,gcc编译得分布来,并且指定特定的ld gcc -c 1.c //会在目录 ...
- jquery.lazyload插件实现图片延迟加载
jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片.在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们所在的位置. 1.引入j ...
- wp 去除google字体加载
add_filter('gettext_with_context', 'disable_open_sans', 888, 4 ); function disable_open_sans( $trans ...
- 如何在python3环境下的Django中使用MySQL数据库
我们在使用Django过程中,连接MySQL数据库时,对Python不同的版本对应的库也不一样,用惯了Python2的人在使用Python3时经常会遇到下面的错误: Error loading MyS ...
- Node.js最新Web技术栈（2016年4月）
Node.js是比较简单的,只有你有前端js基础,那就按照我的办法来吧!一周足矣,虽然这版上了es语法,但依然是可以简单写,也可以难写,参见<全栈工程师之路-Node.js>,里面讲了No ...
- sublime text3怎么让左侧显示目录树
在前端开发中(包括Node.js开发),经常会使用sublime text,但之前一直不知道别人是怎么让左侧显示目录树,故特意在此记录一下. View ->Side Bar ->Show ...
- kill -3 获取threaddump信息---转载
有些Java应用服务器是在控制台上运行,如Weblogic,为了方便获取threaddump信息,在weblogic启动的时候,会将其标准输出重 定向到一个文件,用"nohup ./star ...