0
点赞
收藏
分享

微信扫一扫

Vue框架学习笔记【day二】


安装

Vue框架学习笔记【day二】_双向绑定

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

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

即可。

通过 webpack 来构建项目步骤如下:

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



举报

相关推荐

0 条评论