https://element.eleme.cn/#/zh-CN/component/icon 网络快速成型工具，icon图标

vue生命周期/钩子函数

  • vue实例化
    • beforeCreate：实例化前
      • 组件未创建，不能访问数据，data def 均为undefined
    • created：实例化后
  • vue挂载视图
    • deforeMount：视图挂载前
    • mounted：视图挂载后
  • vue数据更新
    • beforeUpdate：数据更新前
    • updated：数据更新后

  • vue销毁

    • beforeDestroy：实例销毁前
    • destroyed：实例销毁后

      MVVM模型

  • M：模型(Model)：对应data中的数据

  • V：视图(view)：模板

  • VM：视图模型(ViewModel)：Vue实例对象

    初始化值

    1. data:{
    2.   Test: '',
    3.   count: 0,
    4.   confirm: false,
    5.   arr: [],
    6.   error: null
    7. }

    vue模板

  • vue模板支持的js表达式

    • {{ number+1 }} 表达式
    • {{ ok? 'YES': 'NO' }} 三目运算
    • {{ message.split('').reverse().join('') }}函数调用
    • <div v-bind:id="'list-' + id"></div>字符拼接
  • 不支持语句：
    • {{ var a=1 }}语句
    • {{ if(ok){return message}}流程控制

      vue结构

      1. var v = new Vue({
      2. el: '#app',
      3. data: { /* 数据储存 */ },
      4. computed: { /* 属性计算 */    },
      5. watch: { /* 数据监视 */}
      6. })
      7. // el外部写法
      8. v.$mount('#app');
      9. // data对象式写法
      10. data: function() {
      11. return { name:'' }
      12. }
      13. data(){
      14. return { name:''}
      15. }
      16. // 箭头函数会使this不指向vue，而是指向window
      17. ()=>{}

      vue指令

      vue指令是带有v-前缀的特殊attribute(属性 )，指令attribute的值预期是单个JavaScript表达式

  1. <p v-if="seen">
  2.     判断指令：根据表达式seen值的真假来插入/移除p元素
  3. </p>
  4. <p v-else-if="seen"></p>
  5. <p v-else></p>
  7. <p v-show="seen">
  8.     值为true显示，值为false隐藏
  9.     可以写入值，可以写入表达式(结果为布尔值)
  10.     v-show为true时会删除样式(display:none)
  11.     v-show为false时会增加样式(display:none)
  12.     与if的区别：
  13.         if是删除插入标签，show是隐藏和显示
  14.         如果频繁切换使用if会有更高的渲染开销
  15. </p>
  19. <a v-bind:href="url">
  20.     v-bind:[attributeName]="val"
  21.     href是参数(属性名)，告知v-bind指令将元素href属性与url值绑定
  22.     缩写：:href="rul" :[key]="val"
  23. </a> 
  25. <a v-on:click="fun(val)">
  26.     v-on:[eventName]="doSomething"
  27.     监听属性，触发事件后执行fun(var)函数
  28.     缩写： @click="fun(val)"  @[event]="doSomething"
  29. </a> 
  31. <div class='basic' :class='clasz'>
  32.     class类添加
  33.     class属性与clasz属性进行绑定，可以传入样式数组
  34.     也能传入对象,{bg-blue: true},true为传入，false不传入
  35. </div>
  37. <div class='basic' :style="{fontSize: fsize+'px';}">
  38.     style样式添加
  39.     获取data数据再传入，可以传入对象{样式属性:样式值}
  40.     [map1,map2]可以传入多个对象
  41. </div>

计算属性和监听属性

{{ message.split(‘’).reverse().join(‘’) }} 如果将大量的计算属性放置到模板中，会让模板过重且难以维护 因此vue新增了计算属性computed，计算属性与函数进行绑定再返回值

  1. <!-- 计算属性 -->
  2. <div id="example">
  3.     <p>原始信息：{{ message }}</p>
  4.     <p>计算翻转后信息：{{ reversedMessage }}</p>
  5. </div>
  6. <script>
  7.     var vm = new Vue({
  8.         el: '#example',
  9.         data: {
  10.             message: 'hello'
  11.         },
  12.         computed: {
  13.             reversedMessage: function(){
  14.                 return this.message.split('').reverse().join('')
  15.             }
  16.         }
  17.     })
  18. // 计算属性在计算完后会进行缓存，在多次使用的情况下，只会调用一次
  19. // 只有计算的值发生改变时，才会进行调用，然后写入缓存中
  20. </script>
  1. <div id="app">
  2.     天气怎么样？{{info}}--{{a}}
  3.         <br>
  4.             <!-- <button @click="isHot=!isHot">按钮</button> -->
  5.             <button @click="a++">按钮</button>
  6. </div>
  8. <script>
  9.             var vm = new Vue({
  10.                 el: '#app',
  11.                 data: {
  12.                     a: 1,
  13.                     // isHot: true
  14.                 },
  15.                 computed:{
  16.                     info(){
  17.                         // return this.isHot? '炎热': '凉爽'
  18.                         return this.a&1==1? '炎热': '凉爽'
  19.                     }
  20.                 },
  21.                 watch: {
  22.                     // a:{
  23.                     //     immediate: true, // 初始化时，调用一次handler
  24.                     //     deep: true, // 监视多层结构中的属性变化 
  25.                     //          在调用多层的情况下([a,b])，只会监听外部，不会监听内部
  26.                     //     handler(newValue, oldValue) { // 修改值时调用
  27.                     //         console.log('a被修改',newValue, oldValue)
  28.                     //     }
  29.                     // },
  30.                     // 简写
  31.                     a:function(newValue, oldValue){
  32.                         console.log('a被修改',newValue, oldValue)
  33.                     }
  34.                 },
  35.             })
  36. // 外部写法
  37. // vm.$watch('a', {
  38. //     immediate: true,
  39. //     deep: trueu,
  40. //     handler(newValue, oldValue){
  41. //         console.log('a被修改',newValue, oldValue)
  42. //     }
  43. // })
  44. // 简写
  45. // vm.$watch('a', (newValue, oldValue)=>{
  46. //     console.log('a被修改',newValue, oldValue)
  47. // })

事件修饰符

  • prevent：阻止默认事件
    • @click.prevent在a标签能阻止跳转
  • stop：阻止事件冒泡
    • @click.stop有多个事件时，不会叠加触发
  • once：事件只触发一次
    • @click.once事件只能使用一次
  • capture：使用事件的捕获模式
    • @click.capture先执行capture的事件
  • self：只有event.target是当前操作元素才触发事件
    • @click.self只有单击当前才会触发

  • passive：事件的默认行为立即执行，无需等待事件回调执行完毕

    • @wheel.passive在滚动时有事件，不会等事件回调

      $的使用

  • $event 获取事件

    • event.target.innerText获取事件名
    • event.type == 'click' 判断事件名