Vue.js-简介
Vue.js
复习
1. HTML（超文本标记语言）
- 行内标签(行内标签不能设置宽高，但是input，img可以）
a i（斜体) strong b em input label span button textarea img
- 块级标签（独占一行）
div p h1~h6 ul li table form dl ol select
2. CSS（层叠样式表）
- 第一种：<div style=""></div)
- 内接式：<style><style>
- 外接式：<link src=".statics/css.css"></link>
- 基本选择器
id: 权重100
class：10
标签选择器：1
继承的样式：0
如果权重相同，以后面的为准
- 定位
position: "fixed"
position: "relative" (参考：自己原始位置)
position: "absolute" （参考：最近父标签）
-行内标签和块级标签的相互转化
display：block, inline, inline-block
- 高级选择器
- 后代选择器 div .active {}
- 子代选择器 div > .active {}
- 组合选择器 div, .active {}
- 交集选择器 div.span.div
3. JavaScript
- 操作对象也是标签
- JavaScript基本数据类型
String, Number, null, boolean, undefine
引用类型：Object(字典), Array(列表), function
- 如何实例化一个对象？
- 通过构造函数（Date，Object，Array）：new Date(), new Object(), new Array()
- 字面量：var obj = { 'name': "pizza" }, var ary = []
- 自定义的方式
function Foo(name, age) {
this.name = name;
this.age = age;
}
var foo = new Foo("pizza", 18);
- DOM操作
第一步：找到事件源（document.getElementById("app")
第二部：绑定事件
第三部：操作标签（文本值，标签属性，class="active", innerText = "Hello World")
document.getElementById("app").style.color = 'red';
- BOM操作
window.reload()
window.hash()
window.location()
window.href()
window.history()
4. jQuery（JavaScript库，封装很多的好用的接口，标签的便利）
$("#app").css({'color', 'red', 'background-color': 'black'})
5. bootstrap
vue.js 简介
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
渐进式的框架，可以用一点一点的用。
Vue的特点：
数据驱动视图
不再自己手动通过js操作DOM
- 繁琐
- 效率低
现代前端框架：数据驱动视图 直接修改的数据，让框架帮我们做DOM操作
应用场景：
-
中型项目,vue.js
-
大型项目 react
如何使用vue.js
-
引入
- 直接引入
- cdn
- npm
-
Vue.js 的使用
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--第一步，引入Vue，暴露一个全局的Vue Function--> <script src="./static/vue.js"></script> </head> <body> <!--第二步，声明作用范l围--> <div id="app"> {{xxx}}</div> <script> // 第三步，创建一个vue实例 new Vue({ // 第四步，查找作用域 el: "#app", data: { xxx: 'hello world' } }) </script> </body> </html>
-
-
vue.js 的模板语法
- {{xxx }}
