vue_01

最新推荐文章于 2020-06-05 22:10:44 发布

Abdullahi_kanye

最新推荐文章于 2020-06-05 22:10:44 发布

阅读量161

点赞数

分类专栏： vue专栏

本文链接：https://blog.csdn.net/Abdullahi_kanye/article/details/102997068

版权

vue专栏专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、代码

<!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>Document</title>
</head>
<!-- 为什么可以new Vue，是因为在vue的js文件中已经定义了，类似function Vue(){} -->
<body>
    <!-- 使用vue之前先引用vuejs文件 -->
    <script src="../js/vue.js"></script>
    
    <!-- 交给了new实例管理(id在实例中挂载了)：变量message已在vue实例中的data属性中已定义就有值，没定义就无值 -->
    <div id="app">
        <h2>{{message}}</h2>
        <h1>{{play}}</h1>
    </div>

    <!-- 没有交给new实例管理，因此页面不会显示出值：hello vuejs! -->
    <div>{{message}}</div>
 
    <script>
        //使用let（变量），修饰的变量后面可以进行修改；/const（常量），一旦赋值后，就不能修改。来定义变量（ES6中）
        //定义一个常量的app,创建一个vue的实例
        const app=new Vue({//里面可以有很多属性
            el:"#app",//这个属性的作用：用于挂载要管理的元素，比如说此处要管理上面的div标签,然后就会解析div中的语法
            data:{//作用：定义数据。（1）数据可以直接定义，比如下面的方式 （2）可能是来自网络，从服务器加载来的，放在data中，然后展示在界面上
                message:'hello vuejs!',
                play:'玩球'
            }
        })

    </script>
</body>
</html>