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

小白学习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>

上一篇:适合 C++ 新手学习的开源项目——在 GitHub 学编程


下一篇:【Ext.Net学习笔记】06:Ext.Net GridPanel的用法(GridPanel 折叠/展开行、GridPanel Selection、 可编辑的GridPanel)