前端学习第二弹
vue 初步学习
vue基础概念
数据双向绑定
Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更新。数据变化更新视图,视图变化更新数据。视图更新数据可通过事件监听实现,而视图如何根据数据变化更新自己就相对麻烦。其实这就需要应用面向对象中的发布者和订阅者模型,大概就是对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性变化了,就需要告诉订阅者。订阅者有很多个,我们需要有一个消息订阅器收集这些订阅者,然后在监听器Observer和订阅者之间进行统一管理的。
Dom与Bom
BOM包含windows(窗口)、navigator(浏览器)、screen(浏览器屏幕)、history(访问历史)、location(地址)等。JavaScript通过Bom对象访问,控制,修改浏览器。
DOM就是把html里的各种数据当做对象处理的一种模型。比较常见的Dom事件流是:捕获,目标,冒泡。事件一开始从文档的根节点流向目标对象(捕获阶段),然后在目标对向上被触发(目标阶段),之后再回溯到文档的根节点(冒泡阶段)
语法基础准备
常用标签基础
-
</head>头标签
-
<body>定义文档主体
-
</script>插入JavaScript脚本语句,或者通过src指向外部脚本文件 必需属性:type
-
<meta>必需属性:meta-information content
-
<title>定义文档标题
-
<div>将文档分割,通常用id,class 标记
-
<hr>在页面创建一条水平线,在视觉上分割
-
<span> 标签被用来组合文档中的行内元素。
-
<ol>与<ul> 有序与无序
vue基础
(有意思的小知识,vue-cli脚手架 人如其名就如同真的脚手架一样帮助我们管理开发程序)
1.vue对象:
var app=new Vue({}),建了一个vue的对象。
其中包含:el(元素)将对象与某元素相绑定,data 存放数据。
在data中直接改变定义数据会将数据传递给绑定元素,当然也可以在控制台直接修改。
2.(截图过多,太零碎就不放了)
v-model是vue定义的属性,在vue中叫“指令”,也可以自定义指令,v-model作用是把当前input中的值指到哪里,改变input的值,那么后面跟着的文字也会相应的改变。
v-if是动态的向DOM树内添加或者删除DOM元素
v-show是通过设置DOM元素的display样式属性控制显隐
v-for专门用于迭代的指令
v-bind指令用于绑定数据和元素属性的,格式:v-bind:属性名=“变量”,变量是定义在data中的示例,可以绑定链接、图片url,class都可以
v-on指令用于绑定事件,例如点击事件。这个就比较重要了,事件发生后执行想要执行的程序。
组件间通信,复合组件程序基础知识就不再赘述。
路由模块
建立起url和页面之间的映射关系
SPA(单页程序)
使用vue—router来构建
1.解析地址栏
完整的页面地址、路由地址
2.根据路由地址 从路由词典中找到真正的要加载的页面
3.发起ajax请求
请求要加载的页面
4.像指定的容器中 插入加载来的页面
路由嵌套
在一个路由中,path对应一个component,如果这个component需要根据
不同的url再加载其他的component,称之为路由的嵌套
- 前端学习方向
- 前端学习 css知识点
- 分享一年定级资深前端,与你分享他的完整学习过程
- 前端学习资料整理
- 糊糊的前端学习笔记——25行代码实现一个贪吃蛇小游戏【Day06】
- 前端小白一枚(学习日记起始于1125)
- 前端学习(新闻列表综合案例)
- 前端新手学习CSS+JS笔记(一)
- 前端框架angular学习笔记(一)
- 前端之JavaScript第一天学习(3)-JavaScript输出
- 前端学习笔记(2020/5/23)
- 以前搞前端开发的,现在想转java开发。以下是各种java学习资源
- 【前端新手学习】萌新第二篇:HTML
- 前端学习总结_2
- 前端学习必须掌握的知识点---Grunt
- 前端之JavaScript第二天学习(5)-JavaScript-语句
- 前端学习(一):学习目录(会按照学习进行更新本博文)
- 前端学习必须掌握的知识点---Grunt
- 【学习笔记】前端工程化-大公司里怎样开发和部署前端代码
- 前端学习路线---避免踩坑,直击公司需求