【博客园cnblogs笔者m-yb原创，转载请加本文博客链接，笔者github: https://github.com/mayangbo666，公众号aandb7，QQ群927113708】
https://www.cnblogs.com/m-yb/p/10162346.html
Vue.js是web前端当下最火的框架之一, 作者是中国人 尤雨溪(Evan You),
官网地址:https://cn.vuejs.org
Vue的官网是学习Vue的较好途径之一,
今天笔者写了一个Vue的hello world 分享给大家:
笔者这里用sublime的代码文本编辑工具,
首先创建一个testVue.html文件,
用sublime编辑,
键入<html>
sublime会补全html的一些基本要素:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> </body> </html>
首先在body内部下方,引入官网推荐的Vue.js框架需要的CDN依赖, 选一个即可:
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
下面先贴上完整代码:
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="he"> <p>{{ message }}</p> </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#he', data: { message: 'hello, Vue~' } }) </script> </body> </html>
下面分步讲解:
先写一个div容器,id为he,
容器里面在p标签里放入变量名, 并用{{}}包起来,
在下面script标签里new一个Vue对象,
对象里写的形式类似json,
{
el: '#he',
data: {
message: 'hello, Vue~'
}
}
写完之后用浏览器打开html文件,就可以看到
hello, Vue~了
讲解完毕~