声明一: 本人为纯后端开发,因为一些非工作上的需要,本人必须得学一下前端Vue.js,此文章属于前端入门级
。
声明二: 本文主要学习并整理自51CTO课程《Vue.js 2.0之全家桶系列视频课程》
,讲师汤小洋
,跳转链接见文末。
第一个vue程序(入门示例):
提示: vue入门非常简单,这里就不使用文字进行说明了,直接看html代码示例即可明白。
html内容为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>哈喽~</title>
<script src="../js/vue.js"></script>
<script>
window.onload = function () {
// 允许chrome的扩展程序【vue-devtools】进行调试
// 建议: 开发时,设置为true; 生产时, 设置为false
Vue.config.devtools = true
new Vue(
{
// 指定关联的element
el: '#myId',
// 存储数据(以json的形式)
data: {
msg: 'Helle World~'
}
}
);
}
</script>
</head>
<body>
<div id="myId">
<!-- 通过模板,动态显示值 -->
{{msg}}
</div>
</body>
</html>
使用chrome打开:
注:chrome有一个名为vue-devtools的扩展程序,对vue的调试提供了极大的便利,建议安装(上图就是本人安装了该扩展程序后的调试界面的截图)。
^_^ 如有不当之处,欢迎指正
^_^ 学习整理自
51CTO课程《Vue.js 2.0之全家桶系列视频课程》讲师 汤小洋
^_^ 参考链接
Vue.js中文官网
^_^ 本文已经被收录进《程序员成长笔记(六)》,笔者JustryDeng