vue基础-插值表达式 {{}}、MVVM设计模式

3.0_vue基础-插值表达式

目的: 在dom标签中, 直接插入内容

又叫: 声明式渲染/文本插值

语法: {{ 表达式 }}

<template>
  <div>
     <h1>{{msg}}</h1>
     <h2>{{obj}}</h2>
     <h3>{{obj.name}}</h3>
     <h4>{{obj.age >= 18 ? '成年' : '未成年'}}</h4>
  </div>
</template>

<script>
export default {
    // data 放 template 所需要的数据
data () {
    return {
        msg:'不是所有的牛奶都叫特仑苏',
        obj:{
            name:'特仑苏',
            age:17
        }
    }
}
}
</script>

<style>

</style>

yarn serve 读取完毕图示：

---

3.1_vue基础-MVVM设计模式

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。

演示: 在上个代码基础上, 在devtool工具改变M层的变量, 观察V层(视图的自动同步)

• MVVM，一种软件架构模式，决定了写代码的思想和层次
  • M： model数据模型 (data里定义)
  • V： view视图 （html页面）
  • VM： ViewModel视图模型 (vue.js源码)

• MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM
  • V（修改视图） -> M（数据自动同步）
  • M（修改数据） -> V（视图自动同步）

1. 在vue中，不推荐直接手动操作DOM！！！

2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！(思想转变)

总结: vue源码内采用MVVM设计模式思想, 大大减少了DOM操作, 挺高开发效率