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”}}
在这里插入图片描述

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页