Vue学习(day1)
来源:互联网 发布:深圳数据分析招聘 编辑:程序博客网 时间:2024/06/02 03:09
快速学习Vue笔记(day 1)
Vue快速简介
官网: vue.org
Vue定位是渐进式JavaScript框架,特点:易用,灵活,性能高。
Github代码仓库:vuejs/vue
新手入门:包含官网例子,教程;github仓库:vuejs/awesome-vue
课程指南:
- 渐进式框架Vue
- vue中的两个核心点
- 虚拟DOM
- MVVM模式
- Vue示例
- 声明式渲染
- 指令
- 模板
Vue渐进式学习提纲
基础语法
- vue实例
- 模板语法
- 计算属性
- class和style绑定
- 条件和列表渲染
- 事件处理器
- 表单控件绑定
- 组件
高级进阶
- vue插件编写
- mixin混合
- 过渡效果
- 自定义指令
- vue-router路由系统的使用
- vueX:状态管理器
构建工具
- nodejs: JavaScript运行环境
- webpack: 模板管理和打包工具
- vue-cli: 脚手架配置
Vue是什么
一套构建用户界面渐进式JavaScript框架,只关注视图
vue.js目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件
渐进式框架
声明式渲染
组件系统
客户端路由
大规模状态管理
构建工具
声明式渲染:只想用vue作为模板引擎,只想渲染
组件系统:界面分模块
客户端理由:移动端,SP
大规模状态管理:组件多,共享数据
构建工具:团队共同环境
要什么用什么。嵌入程度低
Vue中的两个核心点
响应的数据绑定
当数据发生改变 > 自动更新视图
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title>Document</title> <script src="vue.js" charset="utf-8"></script></head><body> <!-- 模板 --> <div id="demo"> {{message}} </div> <script type="text/javascript"> // 数据 let data = { message : "hello Vue!" } // Vm示例 var vm = new Vue({ el : "#demo", data : data }); </script></body></html>
上面代码,可以在页面中的控制台改变vm.message的值,会发现,页面当中的值也发生改变。
原理:利用object.definedProperty中的setter/getter代理数据,监控对数据的操作
组合的视图组件
UI的页面映射为组件树
划分可维护、可重用、可测试
虚拟DOM
运行JS的速度是很快的,大量的操作DOM就会很慢,经常在更新数据会重新渲染页面,这样会造成在没有改变数据的地方也重新渲染了DOM节点,这样会造成很大的资源浪费。
vue利用在内存中生成与真是DOM与之对应的数据结构,这个在内存中生成的结构称之为虚拟DOM
当数据发生改变的时候,能够只能的计算出重新渲染组件的最小代价并应用到DOM操作上。
MVVM模式
M: Model 数据模型
V: View 视图模型
VM:View-Model 视图模型
具体看这里吧,link: http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
Vue实例
vue实例:每一个应用都是通过vue这个构造函数创建根实例(root instance)启动new Vue(选项对象)。
需要传入选项对象,对象包括挂载元素,模板,方法等等。
- el: 挂载元素选择器 String | HemlElement
- data: 代理数据 Object | Function
- methods: 定义方法 Object
其他详细属性见官网API文档>
例如:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="vue.js" charset="utf-8"></script></head><body> <div id="demo"> <span v-on:click="clickHandle">{{ message }}</span> </div> <script type="text/javascript"> // 数据 let obj = { message : 'hello vue' } var vm = new Vue({ el: "#demo", data: obj, methods: { // 事件处理函数放置的地方 clickHandle(){ alert('click') } } }); </script></body></html>
vue代理data数据:如上面的例子,vue实例会代理
其data对象里所有属性,这些代理属性是相应的。新天家的属性不具备响应功能,改变不会更新视图。
vue实例自身属性和方法:暴露自身的属性和方法,已$开头,如在上面console.log(vm.$data);
来查看。
声明式渲染
声明式
只需要声明在哪里做什么,而无需关心如何实现
命令式
需要一具体的代码表达在哪里做什么,如何实现
例子:求数组每一项的倍数声明式:直接使用map方法命令式:使用for循环,每拿出意向,求完成后再放入另一个数组。
vue声明式渲染:初始化根实例,vue自动将数据绑定在DOM模板上
课后
安装vue环境:https://zhuanlan.zhihu.com/p/26367238?refer=imweb
遇到问题:
- 安装babel失败。
- 解决:nodejs更新
- 区分开发以及向上环境代码
- 放置于webpack.config.js文件内
- Vue学习(day1)
- Vue.js实战笔记Day1(vue-cli)
- Ant学习(Day1)
- 学习笔记之day1
- 传智播客学习日记Day1
- Html学习—Day1
- java学习day1
- Struts2 学习笔记 day1
- java学习笔记day1
- 学习稀疏编码-day1
- CCNA学习笔记Day1
- Hadoop学习DAY1
- HTML5学习-Day1
- Day1 学习记录
- XMPP学习Day1
- 学习登陆百度day1
- Swift学习 day1
- Android学习笔记 Day1
- java单例
- 使用 Rx 中预定义的 Subject
- jsp中的<%=表达式%>和<%表达式%>有什么区别?
- Spring MVC之@RequestBody, @ResponseBody 详解
- Android学习之使用贝塞尔曲线实现波纹效果
- Vue学习(day1)
- C++中的多态
- java 启动 XX.bar 文件
- 润乾行式填报表_资料查阅凭证登记表
- python学习1——标示符、关键字、输出、输入、运算符、赋值、取整取余的作用、判断语句
- Hive学习(一)-表及数据库的创建删除基本操作
- 发送邮件的Util
- DPS pin为什么需要挂电容
- andriod 获取项目文件缓存路径