vue 1-1 导入和简单数据展示

使用IDE：Webstorm

1. 创建一个项目文件，使用webstorm打开

2. 在vue官网下载vue.js文件，导入到项目文件

　　https://cn.vuejs.org/v2/guide/installation.html

3. 创建HTMl文件，编辑简单页面代码

　　注意：界面中如要加载vue数据对象中的值，必须先指定对象的”el“值，如<div id="app">

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

<!--界面，加载数据-->
<div id="app">
    <h2>{{message}}</h2>
    <h5>{{list[0]}}</h5>
</div>

<!--处理数据-->
<script src="../js/vue.js"></script> # 导入vue.js模块作为全局变量使用，后续代码可使用vue.js中的接口，例如: 使用new Vue来创建Vue数据对象
<script>
    const app = new Vue({
        el: '#app',
        data: {
            message: '这是啥！！',
            list: ['one', 'two', 'three']
        }
    })
</script>
</body>
</html>

4. 使用浏览器查看页面

 

 

 
posted @ 2021-03-09 11:38  黑无常  阅读(225)  评论(0)    收藏  举报