一 Vue简介
Vue是一个渐进式的前端框架,什么是渐进式的呢?
渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex+axios,也可以满足你各种各样的需求。Vue的特点和Web开发中常见的高级功能:
1、解耦视图和数据
2、双向数据绑定
3、可复用的组件
4、前端路由技术
5、状态管理
6、虚拟DOM
二 Vue 安装使用
方式一:直接CDN引入
开发环境版本,包含了有帮助的命令行警告
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产环境版本,优化了尺寸和速度
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
方式二:下载和引入
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js
方式三:NPM安装
三 体验Vue

先看js代码,会发现创建了一个Vue对象
创建Vue对象的时候,传入了一个对象:{}
大括号{}中的el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里挂载到了id为app的元素上。
大括号{}中包含了data属性:该属性中通常会存储一些数据,好像上面例子中的str1就是直接定义出来的数据
四、Vue常见的语法格式
4.1、模板语法的初步认识

4.2、v-bind控制标签属性

4.3、v-on事件格式

4.4、定义Vue对象基本格式总结

五、vue控制类名和style样式(动态控制类名)

六、选项卡案例

七、v-if和v-show指令
v-if 和v-show都是来控制标签是否显示,但是也有区别,v-show是对样式层面的控制,v-if是对dom节点的控制。

点击收藏按钮案例:

八、列表和对象的渲染(初步使用)

九、表单数据绑定(双向数据绑定)
v-model的值是,vue接收表单元素的值的变量名, 即v1的值就是用户填写的内容(甚至可以在data中设置v1的值,从而设置表单元素的默认值)

十、Vue中的MVVM
什么是MVVM?
1,View层:视图层,在前端里就是我们常说的DOM层,主要作用是给用户展示各种信息;
2,Model层:数据层,数据可能是我们自定定义的数据,或者是从网络请求下来的数据;
3,ViewModel层:视图模型层,是View层和Model层沟通的桥梁;一方面它实现了数据绑定(Data Binding),将Model的改变实时反应到View中;另一方面它实现了DOM监听,当DOM发生改变可以对应改变数据(Data)

网友评论