Vue.js官网
Vue.js教程
1. Vue.js起步
Vue.js有两种方式：引入CDN方式或使用命令行工具CLI搭建脚手架去编写对应的内容
- 通过如下方式引入 Vue：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者：
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue.js起步练习
新建项目
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Vue.js起步练习</title>
<!-- 通过CDN引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<!-- vue-app根容器 -->
<div id="app">
<!-- 渲染显示HTML代码 -->
<h2>{{message}}</h2>
</div>
<script type="text/javascript">
// 实例化Vue对象
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
网友评论