Vue.js笔记（1）

Vue.js笔记（1）

前言废话：
一、Vue.js是web前端开发中的一个渐进式框架，详细资讯可以访问https://cn.vuejs.org/官方网站，里面有大量中文资料和开源案例，小伙伴可以去尝试。
二、Vue最大的特点就是“视图”与“数据”是分开的，无需操作DOM。
三、说到框架，框架其实就是封装那些与业务无关的重复的代码，形成一个框架，方便代码的重复利用和精简度，便于维护，提高开发效率。
四、前端开发中现在流行使用的是MVVM框架，拆分解释即为：
Model：数据存储；
View：页面展示；
View Model：业务逻辑处理，例如Ajax请求，对数据进行加工后交给视图去展示。
五、MVVM的使用优点：
1、低耦合：视图view可以独立于model变化和改变，一个view model可以绑定到不同的view上，view变化时model可以不变，二者不冲突。
2、重用性：把一个视图逻辑view放到一个view model里，可以让很多view重复使用这段视图逻辑。
3、独立开发：开发人员专注于业务逻辑和数据的开发，设计人员专注于页面设计。

干货来了：
一、根据项目需求的不同，vue的使用也不同：
1、简单的页面或者应用，直接使用script标签引入cdn文件，也可以将代码包下载到本地，通过绝对路径去引用它。（官方文档中有详细介绍）
2、业务逻辑复杂的大型项目，使用vue单文件的形式结合webpack使用，必要时还会用到vue-router管理路由，vuex管理状态。
二、直接登录官方https://cn.vuejs.org/下载

二、在程序中引用vue.js

三、创建view视图
ps：确定一个范围，即这个范围就是vue解析出来的

四、通过vue实例化一个vue对象

五、使用数据，修改data中的msg会同步显示在html页面中。实现原理是：DOM监听和数据绑定。如果实现双向数据绑定，可以在div中添加一input从而实现：

注：{{}}中的内容可以是json数据、数字、字符串、插值表达式。
比如：{{“msg”}}、{{hello+“msg”}}、{{3>2?“ok”:“error”}}