2020.6.17 Vue框架基础

发布于 2020-06-17  45 次阅读


1.复习内容

2.灵感代办

3.学习内容

  • Vue框架

    • 三大前端框架

      • angular.js react.js vue.js
    • 常用

      • el = element 元素的意思
      • data = {} 里面存放数据
      • methods = {} 里面存放方法
      • 方法中获取获取data变量 用this.变量名
    • JavaScript 箭头函数

      • 使用:()=>{}
    • Vue更改变量语法(django和vue的语法冲突)

      • delimiters:[‘[[’,’]]’]
    • Vue的生命周期

      • Vue声明周期常用钩子
        • 对象实例化之前,之后
          • beforeCreate
          • created
        • 用于标签之前,之后
          • beforeMount
          • mounted
        • 销毁之前,之后
          • beforeDestroy
          • destroyed
        • 数据更新之前,之后
          • beforeUpdate
          • updated
    • data

      • data就是数据
      • data一般使用发胡子语法(双大括号)
    • v-bind

      • 数据绑定
      • v-bind:href=‘url’ 将href和变量url绑定, url内容改变 url内容也会改变
      • 简写 :href=’url’
    • v-if v-for 流程控制

      • v-if命令(开头都是 v -)
        • v-if v-else v-else-if v-show
        • 语法:a v-if=“data == 1”
        • if esle-if else语句一定要挨着,不挨着就错误了
        • v-show 和 v-if
          • 如果变量为真,结果一样,变量为假
          • v-show 元素在 只不过是display:none
          • v-if 元素就不存在
      • v-for循环
        • 语法 v-for=“item in items”
        • 支持字典(对象),列表,拆包索引
        • 列表拆包(item,index),字典拆包(value,key,index)
        • 对象遍历属性,就用item.prop来电泳
    • v-on 动作,方法

      • 在methods中定义方法
      • v-on:click = “方法名”
      • 简写@href=“方法名”
    • v-model表单数据绑定

      • v-model指令的本质是:
      • 它负责监听用户的输入事件,从而更新数据,
        • v-model会忽略所有表单元素的value、checked、selected特性的初始值,
        • 将vue实例中的数据作为数据来源。 然后当输入事件发生时,实时更新vue实例中的数据。
    • 双向绑定数据,两边都可以修改,同步
      • 单行文本框,多行文本看,多选框,单选框,下拉框
    • v-model 和数据绑定,可以双向更改
      • 多个数据,使用数组[]
  • Vue axios请求(Ajax请求)

    • get请求
    • post请求
  • Vue自定义组件(元素)

    • 语法:Vue.compoent(“组件名”,{props:[属性],template:模板})

4.扩展延伸知识

  • javascipt:; 语句

    • # 和JavaScript :void; 作用也一样
    • 执行一段空白的javascript语句,返回空或者false值,从而防止链接跳转
  • Ajax 默认传输的是json数据

    • 在django框架中,需要在request.body中获取json字符串
  • JavaScript this的指向

    • 1.全局环境(严格非严格模式都统一)

      • 只要在函数体外部 ,this都指向全局对象
    • 2.函数(运行内)环境 “user strict”

      • 严格模式下 this是undefined
      • 非严格模式下 this 指向window
    • 3.传递this函数可以使用call和apply

      • call和apply 继承Function.prototype.call/apply
      • 语法:obj.call(repleacObj,parm1,parm2)
      • this被替换为call第一个参数对象
      • 传递的如果不是对象,用toObject()转换,比如6,Number(6)
    • 4.作为对象的方法

      • 作为对象里的方法被调用时,它们的 this 是调用该函数的对象。
      • 通俗说,谁调用方法,方法的this就是谁(a.b.c(),c中的this就是a.b)
    • 5.原型链中的this

      • 和作为对象的方法相同,谁调用,this就在谁身上
    • 6.getter和setter中的this

      • this绑定在要设置获取属性的对象上
      • a.get(a) this就指向a
    • 7.作为构造函数

      • 没有return 默认返回this,this指向新生成的对象(new Date() 就是this)
      • 有返回一个对象{},则this指向这个对象
    • 8.DOM事件处理函数

      • 谁触发了实践,this就指向谁
      • 有的浏览器没遵循规定
    • 9.作为内联事件处理函数(alert(this.tag))

      • 默认情况指向监听器所在DOM元素
      • 有外层代码function(){return this} 则指向window或globe
  • Javascript bind方法

    • bind 继承 Function.prototype.bind()
    • 语法:函数.bind(对象)
    • 调用bind方法,返回一个把this绑定到该对象或者函数的对象
  • JavaScript箭头函数

    • 在箭头函数中,this与封闭词法环境({}内或者块内)的this保持一致

5.知识内容个人梳理

6.今天都复习了之前的什么内容


Ares个人进阶之路