一、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页面，就会发现数据成功渲染了。

巴特西

初见Vue

一、What

二、How

三、Do Now

最新文章

热门文章