vue-慕课

前几天在慕课网上买了vue去哪里了实战项目,今天正式开始学习。


第二章

一. 编写一个自己的hello word、
  1. 打开vue的官方文档 https://vuejs.org
  2. 在安装中选择开发版本,并下载
    在这里插入图片描述
  3. 构建项目
<!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'

扩展

  1. 新建的html文件为空,如何快速生成标准的模板
    +tab
  2. 格式化代码的快捷键
    shift+alt+f
  3. vue 在控制台无法显示
    官方建议在项目入口文件(main.js)引入:
Vue.config.devtools = true;

你眼中的璀璨星河,是我不曾见过的世外桃源”


你可能感兴趣的:(vue)