Vue 框架学习笔记【day 二】

作者：黎燃

2022 年 5 月 28 日
本文字数：1027 字
阅读完需：约 3 分钟

安装

对于没有接触过 es6 和 webpack 的同学来说，不建议直接用官方的脚手架 vue-cli 构建项目，直接引用

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

复制代码

即可。通过 webpack 来构建项目步骤如下：

安装 Node，下载地址：https://nodejs.org/en/ 或者 http://nodejs.cn/
安装 vue-cli，终端输入：npm install vue-cli -g
初始化项目（即构建项目），vue init webpack vue-test,后面名字（vue-test）是本次项目的名字。
根据终端提示逐步往下进行。当进行到是否要安装 vue-router 时，点击 Y，因为后面要用，出现是否语法检测（Use ESLint to line your code?）我们点击 N。这个很棘手，因为语法检测非常严格，有时候甚至你多写或者在符号前加空格，他都会报错。空行也是如此，本人就被它折磨过，甚至最后直接重新开始构建一个新的项目。
其余的命令为：“是否安装单元测试工具”以及“是否需要端到端测试工具”，依据个人情况而定选择是否安装。
到此步，一个项目便安装完成了。进入项目 cd vue-test，安装依赖 npm install，一般系统会自动帮你安装好了依赖，这里可以选择不用执行此命令。
开启本地服务 npm run dev，在 http://localhost：8080 中看到 vue 的一个介绍就表明整个项目构建成功。

ViewMode

ViewModel 是 Vue.js 的核心，它是一个 Vue 实例。Vue 实例是作用于某一个 HTML 元素上的，这个元素可以是 HTML 的 body 元素，也可以是指定了 id 的某个元素。

当创建了 ViewModel 后，双向绑定是如何达成的呢？

首先，我们将上图中的 DOM Listeners 和 Data Bindings 看作两个工具，它们是实现双向绑定的关键。从 View 侧看，ViewModel 中的 DOM Listeners 工具会帮我们监测页面上 DOM 元素的变化，如果有变化，则更改 Model 中的数据；从 Model 侧看，当我们更新 Model 中的数据时，Data Bindings 工具会帮我们更新页面中的 DOM 元素。

Hello World 示例

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title></title>  </head>
  <body>    <!--这是我们的View-->    <div id="app">      {{ message }}    </div>  </body>  <script src="js/vue.js"></script>  <script>    // 这是我们的Model    var exampleData = {      message: 'Hello World!'    }
    // 创建一个 Vue 实例或 "ViewModel"    // 它连接 View 与 Model    new Vue({      el: '#app',      data: exampleData    })  </script></html>

复制代码

定义 View 定义 Model 创建一个 Vue 实例或"ViewModel"，它用于连接 View 和 Model

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/7b1edfcdf6f52c9fc9359e41c】。文章转载请联系作者。

黎燃

关注

前端工程师 2022.05.06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

Vue 框架学习笔记【day 二】

安装

ViewMode

Hello World 示例

黎燃

评论