小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式：

  1. 直接引用VUE;
  2. 将vue.js下载到本地后本目录下使用;
  3. 安装Node环境下使用;
  4. 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的三种模式：的更多相关文章

  1. 学习KnockOut第一篇之Hello World

    学习KnockOut第一篇之Hello World 笔者刚开始学习KnockOut.写的内容就相当于一个学习笔记.且在此处向官网致敬,比较喜欢他们家的Live Example版块,里面有jsFiddl ...

  2. 我们一起学习WCF 第一篇初识WCF（附源码供对照学习）

    前言:去年由于工作需要我学习了wcf的相关知识,初期对wcf的作用以及为何用怎么样都是一知半解,也许现在也不是非常的清晰.但是通过项目对wcf的运用在脑海里面也算有了初步的模型.今天我就把我从开始wc ...

  3. 前端学习 linux —— 第一篇

    前端学习 linux - 第一篇 本文主要介绍"linux 发行版本"."cpu 架构"."Linux 目录结构"."vi 和 v ...

  4. RabbitMQ学习总结 第一篇：理论篇

    目录 RabbitMQ学习总结 第一篇:理论篇 RabbitMQ学习总结 第二篇:快速入门HelloWorld RabbitMQ学习总结 第三篇:工作队列Work Queue RabbitMQ学习总结 ...

  5. ActionBarSherlock学习笔记 第一篇——部署

    ActionBarSherlock学习笔记 第一篇--部署          ActionBarSherlock是JakeWharton编写的一个开源框架,使用这个框架,可以实现在所有的Android ...

  6. 辛星跟您玩转vim第一节之vim的下载与三种模式

    首先值得一提的是,我的vim教程pdf版本号已经写完了,大家能够去下载,这里是csdn的下载地址:点此下载 ,假设左边的下载地址挂掉了,也能够自行在浏览器以下输入例如以下地址进行下载:http://d ...

  7. hadoop学习；自己定义Input/OutputFormat；类引用mapreduce.mapper；三种模式

    hadoop切割与读取输入文件的方式被定义在InputFormat接口的一个实现中.TextInputFormat是默认的实现,当你想要一次获取一行内容作为输入数据时又没有确定的键.从TextInpu ...

  8. Vue学习【第一篇】：Vue初识与指令

    什么是Vue 什么是Vue Vue.js是一个渐进式JavaScript框架它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 渐进式:vue从小到控制页面中的一个变量 ...

  9. PHP学习记录第一篇：Ubuntu14.04下LAMP环境的搭建

    最近一段时间会学习一下PHP全栈开发,将会写一系列的文章来总结学习的过程,以自勉. 第一篇记录一下LAMP环境的安装 0. 安装Apache Web服务器 安装之前先更新一下系统 sudo apt-g ...

随机推荐

  1. mybatis学习笔记（一）

    mybatis学习笔记 mybatis简介 Mybatis 开源免费框架.原名叫iBatis,2010在googlecode,2013年迁移到 github 作用: 数据访问层框架,底层对JDBC进行 ...

  2. Go中的命名规范

    1.命名规范 1.1 Go是一门区分大小写的语言. 命名规则涉及变量.常量.全局函数.结构.接口.方法等的命名. Go语言从语法层面进行了以下限定:任何需要对外暴露的名字必须以大写字母开头,不需要对外 ...

  3. sql语句优化：尽量使用索引避免全表扫描

    1.对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索 ...

  4. hadoop开启Service Level Authorization 服务级认证-SIMPLE认证-过程中遇到的坑

    背景描述: 最近在进行安全扫描的时候,说hadoop存在漏洞,Hadoop 未授权访问[原理扫描],然后就参考官方文档及一些资料,在测试环境中进行了开启,中间就遇到了很多的坑,或者说自己没有想明白的问 ...

  5. 洛谷 P2704 [NOI2001]炮兵阵地

    题意简述 给定一张地图,有山地H,平原P,平原可放置炮兵, 炮兵可以攻击沿横向左右各两格,沿纵向上下各两格的区域 求最多放几个炮兵,使他们两两攻击不到 题解思路 枚举第i层,第i - 1层,第i - ...

  6. 使用re.split 按标点+空格的一种分割办法

    import re import string t1 = re.split("["+string.punctuation+" ]","(555) 12 ...

  7. laya2d 与 cad 之间的坐标转换

    坐标系基本概念 直角坐标系可分为左手坐标系与右手坐标系,cad 中用到的是右手坐标系, Laya2D 中用到的是左手坐标系, Laya3D 中使用右手坐标系. 那么如何判断二维直角坐标系是左手还是右手 ...

  8. 彻底搞懂Java中equals和==的区别

    java当中的数据类型和“==”的含义: 1.基本数据类型(也称原始数据类型) :byte,short,char,int,long,float,double,boolean.他们之间的比较,应用双等号 ...

  9. JavaScript浮点数运算的精度问题

    之前在做浮点数计算时,偶然发现计算结果有误差,度娘了解了下,补充整理了下. 误差是什么样子的呢?举例 console.log(0.1+0.2); // 0.30000000000000004 事实上在 ...

  10. centos7配置JDK

    CentOS7自带jdk1.8 查看当前系统jdk的版本:java -version 列举匹配已安装的java的软件包:yum list installed | grep java 卸载安装的jdk: ...