01-HelloWorld

引入Vue

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

HelloWorld

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloWorld</title>
</head>
<body>

<div id="app">
    {{ msg }}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!--
 * 1.vue实例(对象)中el属性: 代表Vue的作用范围, 日后在Vue的作用范围内都可以使用Vue的语法
 * 2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}} 在Vue作用范围内取出
 * 3.在使用{{}}进行获取data中数据时, 可以在{{}}中书写表达式, 运算符, 调用相关方法, 以及逻辑运算
 * 4.el属性中可以书写任意的css选择器(jQuery选择器), 但是在使用Vue开发时推荐使用[id选择器]
-->

<script>
     let app = new Vue({
        el: '#app',
        data: {
            msg: 'helloWorld'
        }
    });
</script>
</body>
</html>

 

HelloWorld页面效果:

 

posted @ 2020-10-16 01:02  Lambda_lalala  阅读(48)  评论(0)    收藏  举报