小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：
小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：
- 直接引用VUE;
- 将vue.js下载到本地后本目录下使用;
- 安装Node环境下使用;
- ant-design-vue只是Vue实现的一组ant-design UI模板代码，真正使用的还是VUE环境;
- 直接引用VUE（直接将代码复制保存成一个html文件即可双击在浏览器中运行）：<script src="https://unpkg.com/vue"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="container">
<myc:level="1">直接引用VUE!</myc>
</div>
<script type="text/javascript">
Vue.component('myc', {
render: function(createElement) {
return createElement(
'h' + this.level,
this.$slots.default
)
},
props: {
level: {
type: Number,
required: true
}
}
})
//声明Vue不能放在最上面，只能放在下面
new Vue({
el: '#container'
});
</script>
</body>
</html>
- 将vue.js下载到本地后本目录下使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container">
<myc:level="1">将vue.js下载到本地后本目录下使用!</myc>
</div>
<script type="text/javascript">
Vue.component('myc', {
render: function(createElement) {
return createElement(
'h' + this.level,
this.$slots.default
)
},
props: {
level: {
type: Number,
required: true
}
}
})
//声明Vue不能放在最上面，只能放在下面
new Vue({
el: '#container'
});
</script>
</body>
</html>
- 安装Node环境下使用：
<template>
<div>
<myc:level="5">安装Node环境下使用!</myc>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
},
components: {
myc: {
render: function (createElement) {
return createElement(
'h' + this.level,
this.$slots.default
)
},
props: {
level: {
type: Number,
required: true
}
}
}
}
}
</script>
小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：的更多相关文章
- 学习KnockOut第一篇之Hello World
学习KnockOut第一篇之Hello World 笔者刚开始学习KnockOut.写的内容就相当于一个学习笔记.且在此处向官网致敬,比较喜欢他们家的Live Example版块,里面有jsFiddl ...
- 我们一起学习WCF 第一篇初识WCF（附源码供对照学习）
前言:去年由于工作需要我学习了wcf的相关知识,初期对wcf的作用以及为何用怎么样都是一知半解,也许现在也不是非常的清晰.但是通过项目对wcf的运用在脑海里面也算有了初步的模型.今天我就把我从开始wc ...
- 前端学习 linux —— 第一篇
前端学习 linux - 第一篇 本文主要介绍"linux 发行版本"."cpu 架构"."Linux 目录结构"."vi 和 v ...
- RabbitMQ学习总结 第一篇：理论篇
目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...
- ActionBarSherlock学习笔记 第一篇——部署
ActionBarSherlock学习笔记 第一篇--部署 ActionBarSherlock是JakeWharton编写的一个开源框架,使用这个框架,可以实现在所有的Android ...
- 辛星跟您玩转vim第一节之vim的下载与三种模式
首先值得一提的是,我的vim教程pdf版本号已经写完了,大家能够去下载,这里是csdn的下载地址:点此下载 ,假设左边的下载地址挂掉了,也能够自行在浏览器以下输入例如以下地址进行下载:http://d ...
- hadoop学习；自己定义Input/OutputFormat；类引用mapreduce.mapper；三种模式
hadoop切割与读取输入文件的方式被定义在InputFormat接口的一个实现中.TextInputFormat是默认的实现,当你想要一次获取一行内容作为输入数据时又没有确定的键.从TextInpu ...
- Vue学习【第一篇】：Vue初识与指令
什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...
- PHP学习记录第一篇：Ubuntu14.04下LAMP环境的搭建
最近一段时间会学习一下PHP全栈开发,将会写一系列的文章来总结学习的过程,以自勉. 第一篇记录一下LAMP环境的安装 0. 安装Apache Web服务器 安装之前先更新一下系统 sudo apt-g ...
随机推荐
- JS闪电打字特效
HTML <div class="page page-thunder-to-text"> <input id="input" type=&qu ...
- vscode导入已存在的vue.js工程
1.安装vue_cli 如果安装了npm,直接在命令行输入npm install -g vue-cli,安装在全局组件目录下 完成后,可以在命令测试下 2.导入工程 打开vscode-------&g ...
- 关于sparksql中设置自定义自增列的相关要点（工作共踩过的坑-1）
小白终于进入了职场,从事大数据方面的工作! 分到项目组了,搬砖的时候遇到了一个这样的问题. 要求:用spark实现oracle的存储过程中计算部分. 坑:由于报表中包含了一个ID字段,其要求是不同的区 ...
- Day 03--设计与完善（一）
1.今天我们把软件原型基本完成了,功能流程一套下来,像一个真正的软件了.这是几个主要模块: 首先是首页,登入小程序后可以直观地看到各个食堂,并显示自己的定位.屏幕下方还可以时刻切换查看自己以前的订单. ...
- SpringBoot 内部方法调用，事务不起作用的原因及解决办法
在做业务开发时,遇到了一个事务不起作用的问题.大概流程是这样的,方法内部的定时任务调用了一个带事务的方法,失败后事务没有回滚.查阅资料后,问题得到解决,记录下来分享给大家. 场景 我在这里模拟一个场景 ...
- 从零开始实现ASP.NET Core MVC的插件式开发(五) - 插件的删除和升级
标题:从零开始实现ASP.NET Core MVC的插件式开发(五) - 使用AssemblyLoadContext实现插件的升级和删除 作者:Lamond Lu 地址:https://www.cnb ...
- 由于Microsoft\VisualStudio\14.0\Designer\ShadowCache导致的一个异常问题
本文引用了一个DynamicDataDisplay和DynamicControl两个类库,本来使用的时候都时正常的,愉快的运行着. DynamicDataDisplay:这是一个用于动态数据可视化的W ...
- 运行所选代码生成器时出错：“值-1超出了可接受的[0,2147483647]范围。参数名称：value”
在使用vs2019添加mvc控制器的时候 这已经是第二次遇到这个问题了.常言道,多喝热水,重启试试.有时候当应用工作不正常,重启也许能解决问题.但是程序员通常接触不到服务器系统权限.而运维人员和公司流 ...
- windows和linux下的本机IP的获取(亲测有效)
package com.handsight.platform.fras.util; import org.apache.log4j.Logger; import javax.servlet.http. ...
- Mybatis延迟加载的实现以及使用场景
首先我们先思考一个问题,假设:在一对多中,我们有一个用户,他有100个账户. 问题1:在查询用户的时候,要不要把关联的账户查出来? 问题2:在查询账户的时候,要不要把关联的用户查出来? 解答:在查询用 ...