bruip实训_前端基础知识总结

1. html基础
   1）块元素
   div
   h1~h6
   p
   ul>li
   dl>dt,dd ol->
   独占一行空间，高度由内容决定。可以自定义宽和高
   主要用于搭建页面骨架
   2）行内元素
   span a img i em strong
   与其他行内元素共享一行空间，宽高都由内容决定，无法自定义宽和高
   主要是在骨架内部完成填充

2. js基础
   1）Javascript 是浏览器端语言，运行在浏览器上，是弱类型语言
   2）js组成：
   ECMAScript (js的标准) == 基础Java
   语法
   变量
   数据类型
   关键字&保留字
   操作符
   流程控制语句
   数组
   对象
   函数
   正则表达式
   DOM (js操作浏览器中的html的sdk)
   BOM (js操作浏览器的sdk)
   window.history
   window.location
   超时调用、间歇调用
   Ajax
   3）变量：和大多数语言一样，包括声明，赋值，访问。
   4）Js的基本数据类型有5种：number， string， boolean， null，undefined；
   引用数据类型类似于C语言的结构体，或者说类似于python的元祖列表字典函数。
   5）操作符：和别的语言类似，包括算术运算符、逻辑运算符、比较运算符等。
   6）流程控制和大多数语言一样使用if， if-else， if-else if以及switch-case；
   7）循环也和大多数语言类似，包括for， while， do-while；
   8）对象：类似于python的字典，用双大括号包起来的键值对，包含一些常用的易于操作的方法。
   9）数组：保存多个值的集合称为数组。
   10）函数：方法，js中的函数比java方法更强大一些，它实际上是方法和类的统称，声明和调用的方式与其他语言类似。

3. css基础

1. 选择器
   类选择器 .first {} 选中class为first的元素
   id选择器 #one {} 选中id为one的元素
   标签选择器 div {} 选中所有的div元素
   父子选择器 .first > div {} 选中class为first的所有div孩子元素
   后代选择器 .first div{} 选中class为first的所有div后代元素
2. 基础布局
   解决块元素在一行中排列的问题

1. 浮动布局
2. 定位布局
3. 伸缩盒布局
  1) html
    <div class="first">
      <div>内容</div>
    </div>
  2) css
    1. 将父元素.first变为伸缩盒元素
    .first {
      display:flex;
      flex-direction:row;   // 其子元素沿着行来排列
      justify-content: space-between;   /*空白区域放在哪里？ space-between空白介于中间*/
    }
    2. 子元素
    .first > div {
      height:100px ;      // 高度为100px
      width:33%;          // 宽度为33%
      flex:1 ;            //占据剩余份数
    }

4. vue基础
   vue
   vue-router
   路由
   element-ui
   组件库，提供了很多漂亮组件，比如按钮、模态框、表格、通知…

1. mvvm思想
   m 数据模型（一般表示从服务器端获取的数据，维护到vue中）
   v 视图 ，模板
   vm vue的核心机制，完成了数据绑定等dom操作
2. vue实例
   export {
   // m 表示数据模型，数据可以来自于后端，也可以自定义
   data(){
   return {
   msg:“hello vue”,
   list:[{name:“terry”,age:3},{name:“tom”,age:2}]
   }
   }
   }
3. 模板语法

1. 双大括号
  将变量的值直接进行输入
2. 列表渲染
  将数据内容进行迭代，然后渲染的页面中
  <ul class="list">
    <li v-for="item in list" :key="item.id">{{item.name}} </li>
  </ul>
3. 条件渲染
  当满足某个条件的时候，该视图才会被渲染出来

4. 事件机制

1. 事件绑定
  <button @click="handler1">按钮1</button>
  <button @click="handler2('hello')">按钮2</button>
  {
    methods:{
      hander1(){
      },
      handler2(val){
        val // hello
      }
    }
  }
2. 事件修饰符
  有些标签，比如a/form在点击后都可以发生跳转，这个就属于标签的默认事件行为。如果我们再绑定事件，会先执行我们绑定的事件，再执行默认事件。
  <a href="http://www.baidu.com" @click.prevent="bar">百度一下</a>