美文网首页
Vue基础第二天

Vue基础第二天

作者: 咸鱼前端 | 来源:发表于2018-12-25 22:05 被阅读0次

Vue第二天复习

  • v-model（如果checkbox，select多选是数组，提供一个value属性）（radio，checkbox分组靠的是v-model），checked selected不存在
  • 修饰符 .number .lazy
  • 按键修饰符 .enter .ctrl .keyCode
  • 事件
    - @事件.stop（事件停止冒泡）
    stopPropagation，cancelBubble=true；
    - @事件.capture（事件捕获）
    xxx.addEventListener("click",fn,true);
    - @事件.prevent（阻止事件的默认行为）
    preventDefault，returnValue=false；
    - @事件.once（函数只执行一次）
    on("click") off("click")
    - @事件.self（点击自身才会执行函数,冒泡也不会触发）
    e.srcElement&&e.target 判断事件源绑定事件

filters实例上可以使用

{{ "1,2,3" | my(1,2,3) }}
filters: {
  my(data,param1,param2,param3){
    
  }
}

全局过滤器

Vue.filter("my",data =>{
  return "lzq"+data
});

computed计算“属性” 不是方法

  • 方法不会有缓存，computed会根据依赖（归vue管理的数据，可以响应式变化的）的属性进行缓存
  • 两部分组成，有get()和set()，不能只写set，可以只有get，一般情况下，通过js赋值影响其他人或表单元素设置值的时候会调用set方法
<div id="app">
  <input type="text" v-model.lazy="input">{{msg}}
  <!--根据输入框中的内容 算出一个错误信息-->
</div>
<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    computed: {
      msg () {
        if(this.input.length<3&&this.input.length>0){
          return "用户名长度较短"
        }
        if(this.input.length>6){
          return "用户名长度较长"
        }
        else{
          return "";
        }
      }
    },
    data: {
      input:"",
    }
  })
</script>

v-if/v-show

  • v-if操作的是dom v-if可以和v-else-if，v-else连写
  • v-show操作的是样式
<div id="app">
  <!--默认情况下去切换dom时相同的机构会被复用，如果不需要被复用，需要添加key属性-->
  <template v-if="flag">
    <label>注册</label>
    <input type="text" name="name" key="1">
  </template>
  <template v-else>
    <label>登录</label>
    <input type="text" name="name" key='2'>
  </template>
  <button @click="flag=!flag">切换</button>
</div>

v-bind简写

  • 动态绑定“属性”

template标签是vue提供给我们的没有任何的实际意义，用来包裹元素用的，v-show不支持template，只支持v-if。

<div id="app">
  <!-- class和:class绑定的样式不冲突 -->
  <!-- {className:isActive} -->
  <div class="x y" :class="{z:flag}">asdasd</div>
  <!-- 数组绑定样式写法 -->
  <div :class="[class1,class2,class3]">asdasd</div>
  <!--动态给每一行添加不同的样式，根据索引值取余的方式，0会转化成boolean类型false，1会转化成boolean类型true-->
  <div v-for="(item, index) in 10" :class="{x:index%2}">{{item}}</div>
</div>

style动态增加样式

<body>
  <div id="app">
    <!-- 动态绑定样式 -->
    <!-- 对象写法，使用驼峰命名 -->
    <div style="font-size: 30px;" :style="{backgroundColor:'red',color:'pink'}">123123</div>
    <!-- 数组写法，可以嵌套对象 -->
    <div :style="[sty1,sty2,{fontSize:'60px'}]">44123</div>
  </div>
  <script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>
  <script type="text/javascript">
    var vm = new Vue({
    el: "#app",
      data: {
        sty1:{backgroundColor:'red'},
        sty2:{color:'pink'}
      },
    })
  </script>
</body>

相关文章