初见Vue

一、What

官方定义：是一套用于构建用户界面的渐进式框架。这，what？不明觉厉，我反正现在还是不知道，在这之前，就只知道Vue.js是用来渲染数据的，其实它的核心库只关注视图层。不多说，用多了就知道了。

二、How

因为Vue.js本身就是JavaScript脚本，那么要使用它，就必须要引入。可以使用在线的方式引入，这里选择使用NPM包管理器下载到本地，然后再引用。

命令如下：

npm init -f # 初始化一个含有package.json的空项目
npm install vue # 安装vue

然后就将vue的所有脚本下载了下来，vue结构如下：

lichen-pc% ls node_modules/vue
dist  LICENSE  package.json  README.md	src  types

三、Do Now

<!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>
<body>
    
    <!-- 3.数据渲染根元素-->
    <div id="app">
    {{ msg }} <!-- 插值模板语法 {{}}-->
    </div>
    <!-- 1.引入vue-->
    <script type="text/javascript"  src="../node_modules/vue/dist/vue.js">
    </script>

    <!-- 2.创建实例化vue对象-->
    <script type="text/javascript">
    
    // new出vue对象
    new Vue({
        el: "#app", // 数据渲染的目标根元素
        template: ``, // 模板(可选)
        // 从服务端接收到的数据
        data: function() {
            // 模拟出服务端返回的数据
            return {
                msg: 'Hello Vue'
            }
        }
    });
    </script>
</body>
</html>

在浏览器中打开该HTML页面，就会发现数据成功渲染了。

posted @ 2019-06-24 15:40  云--澈  阅读(140)  评论(0)  编辑  收藏  举报