vue-慕课

前几天在慕课网上买了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;

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

逸羽菲

原创文章 73 获赞 79 访问量 33万+

关注私信

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

第二章

一. 编写一个自己的hello word、

猜你喜欢