第二章 Vue 核心技术之1.1入门

第二章 Vue 核心技术

1. 编写HTML页面

  • 编写步骤：

    1. 采用< sprite >标签引入vue.js

    2. 定义一个< div >

    3. new Vue()实例化Vue应用程序

      el选项：选项： 元素element的缩写，指定被 Vue 管理的 Dom 节点入口（值为选择器 )，必须是一个普通的

      HTML 标签节点，一般是 div。

      data选项：指定初始化数据，在 Vue 所管理的 Dom 节点下，可通过模板语法来进行使用

    4. 标签体显示数据： {{xxxxx}}

    5. 表单元素双向数据绑定： v-model

    6. 注意： el 的值不能为 html 或 body

  • 源码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
  <div id="app">
    <p>Hello, {{ msg }}</p> 
    <!-- 标签体显示数据： {{需要获取的属性名}} -->
    <input type="text" v-model="msg">
    <!-- 表单元素双向数据绑定： v-model -->
  </div>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <!-- 采用 <script> 标签引入 vue.js 库 -->
  <script type="text/javascript">
    var vm = new Vue({
        el: '#app', // 指定被Vue管理的入口，el选项的值不能指定html或 body
        data: {     //用于初始化数据
            msg: 'Vue.js'
        }
    })
  </script>
</body>
</html>
  • 效果图

2. 分析 MVVM 模型

常见面试题：什么是 MVVM 模型？

  • MVVM 是 Model-View-ViewModel 的缩写，它是一种软件架构风格

    • Model：模型， 数据对象（data选项当中 的）
    • View：视图，模板页面（用于渲染数据）
    • ViewModel：视图模型，其实本质上就是 Vue 实例

  • 解释：在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

posted @ 2020-09-21 22:56  xiaokai9527  阅读(58)  评论(0)    收藏  举报