前几天在慕课网上买了vue去哪里了实战项目,今天正式开始学习。
第二章
一. 编写一个自己的hello word、
- 打开vue的官方文档 https://vuejs.org
- 在安装中选择开发版本,并下载
- 构建项目
<!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>vue1</title>
</head>
<script src="./vue.js"></script>
<!-- 格式化代码的快捷键是shift+alt+f -->
<body>
<div id="div1">{{content}}</div>
</body>
<script>
var app = new Vue({
el: '#div1',
data: {
content: 'hello world'
}
})
// 设置2秒后变为bye world
setTimeout(function () {
app.$data.content = 'bye world'
}, 2000)
</script>
</html>
注意事项
- 引入vue.js文件的时候不能省略后面的
<script src="./vue.js"></script>
- new Vue({})这里的Vue首字母要大写。
- 获取vue实例的代码不能写在src里,也不能写在上面。
- 修改data中的数据要用$
app.$data.content = 'bye world'
扩展
- 新建的html文件为空,如何快速生成标准的模板
!
+tab
- 格式化代码的快捷键
shift
+alt
+f
- vue 在控制台无法显示
官方建议在项目入口文件(main.js)引入:
Vue.config.devtools = true;
你眼中的璀璨星河,是我不曾见过的世外桃源”