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操作, 挺高开发效率