1 Vue官网

• https://cn.vuejs.org/

2 Mvvm模式

• Model-View-View-Model模式，由MVC衍生而来
  View和ViewModel之间通过双向绑定(data-binding)建立联系。

3 现代的前端开发模式

• 前端的三驾马车 ：Angular、React、Vue

4 Vue.js 起步

• 使用Vue.js 有两种方式：一种是通过引入CDN后直接使用或者下载后使用，另一种就是使用命令工具。
  尝试 Vue.js 最简单的方法是使用 JSFiddle 上的 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

image.png

v-model数据双向绑定练习

• 通过以下代码体验Vue.js最核心的功能——数据的双向绑定

  
  image.png

使用v-bind属性绑定

image.png

条件与循环

• 条件渲染指令：v-if,v-else-if,v-else
• 列表渲染指令 v-for

• v-else：可以根据表达式的值在DOM中渲染或销毁元素/组件,与v-show不同的是，v-if是真正的条件渲染，适合条件不经常变更的场景；而v-show只是简单的CSS属性切换，使用于频繁切换条件。
  两者结合实例：

  
  image.png