2020-05-12

今日学习
vue
0. vue实例对象
let vm = new Vue({data:{message:“hello”}})

  vm属于Vue的实例对象，这个对象可以直接访问Vue构造函数参数中的data中的值
  vm.message

  vue可以对data中的数据进行监听，当data中数据发生改变的时候，vue会自动进行网页的重新渲染。
    message:'hello world',
    array:[1,2,3]
    默认情况下，vue监听栈区的改变，message为基本类型的变量，其值保存在栈区，对于array来说，为引用数据类型，引用地址保存在栈区；
  
  如果引用类型的值的改变无法引起视图的更新，那么解决方案只有一个，就是强制更新引用地址
         let vm = new Vue({
      el:"#app",
      data:{
        obj:{},
        array:[]
      }
    })

    vm.array = [...vm.array,3]        // 将一个新的数组赋值给了vm.array
    vm.obj = {...vm.obj,name:"terry"} // 将一个新的对象赋值给了vm.obj
    vm.obj = Object.assign({},vm.obj)
1. 声明式渲染 
  1) 直接输出变量
    {{message}}
  2) 输出表达式
    {{++num}}
        2. 列表渲染
  <li v-for="(p,index) in peoples" v-bind:key="p.id">
    {{p.name}}
  </li>

  1) v-for="p in peoples"
  2) v-for="(p,index) in peoples"
    p为数组元素，index为索引
  3) v-for="n in 10"
    可以对数字直接进行遍历，从1开始
  4) v-for="(v,k) in people"
  5) 

  在遍历的时候，key属性的值应该绑定不同的值，这样可以区分每个li,在后期进行dom操作的时候，是整个dom节点都进行操作。
          3. 条件渲染
  登录逻辑(重点！)
    1) 点击登录按钮
    2) 弹出模态框，要求用户输入用户名密码
    3) 通过ajax调用后端的登录接口,如果用户名密码没有问题，返回一个token
    4) 通过token获取用户的基本信息
    5) 将用户信息缓存到浏览器中（H5 API ）
      sessionStorage
      localStorage
    6) 退出
      将用户信息从浏览器缓存中移除掉
  <div v-if="user==null"></div>
  <div v-else></div>
  4. 属性绑定
  <li v-for="(p,index) in peoples" v-bind:key="p.id">
    {{p.name}}
  </li>
  动态为key绑定一个属性，这个属性为p.id
  v-bind具有简写形式
    v-bind:key="p.id"
    =>
    :key="p.id"
    5. 事件绑定
  jquery中使用的是先获取dom，再在dom中进行事件绑定

  使用声明式的事件绑定（简单）
  事件绑定
    <div v-on:click="clickHandler"></div>
    <div v-on:click="alert(item)"></div>

  传递参数（常量）
    <div v-on:click="clickHandler(1)"></div>
  传递参数（变量）
    <div v-on:click="clickHandler(item)"></div>
  获取时间对象【不建议使用】
    <div v-on:click="clickHandler(item,$event)"></div>
  事件修饰符
    v-on:click.xxx
      .prevent
      .stop 
  按键码
    <input v-on:keyup.13="submit">