初识vue框架（一）

易用:只要会HTML, css, Javascript就可以使用

灵活：Vue 的核心库只关注视图层，可以配合市场已流行的其他脚本库及平台使用

流行的脚本库及平台：如Jquary，axios,loadash,node.js,express,koa等

高效：40kB min+gzip 运行大小，超快虚拟DOM，省心优化

Vue作者？尤雨溪

Vue中文官网 http://cn.vuejs.org

命令行工具有两种版本，学习最新的CLI3.0

npm install -g @vue/cli

高内聚，低耦合。

组件封装追求的低耦合

作业：

使用vue的v-if v-for等制作一个类似QQ的手风琴效果

效果：

源码：

https://blog.csdn.net/fengtingYan/article/details/82934542

---

下面的所有的源码都要导入（本地文件）

声明式渲染

---

需要视图模板和数据，先声明数据，然后把数据和视图模板绑定在一起，让视图使用声明的数据进行视图渲染的过程

{{message}}

效果：

初识指令

---

{{message}}

{{message}}

我是div

我是div

我是div

我是h2

• {{f}}

• 效果：

  

  v-for练习

  ---

  索引 价格 姓名 性别 年龄 生日 {{i}} {{s.id | currency}} {{s.name | upperCase}} {{s.sex?'男':'女'}} 年轻 中年 老年 未知 {{s.birthday | dateFormat}}

  效果：

  

  双向数据绑定（v-model）

  ---

  {{message}}

  效果：

  

  操作数据

  ---

  {{message}}

  更改message

  更改message（带参数）

  事件句柄

  效果：

  

  初识组件

  ---

  效果：

  

  效果：