Vue 学习记录一

2020-09-30  本文已影响0人  忆辰念家

基本结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    
    <div id="app">
        {{ message }}
    </div>

    <script>
        //1：初始化Vue实例
        var app = new Vue({
            // 2：指定实例控制范围（及上面id=app的div）
            el: '#app',
            // 3：实例拥有的属性
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

常用指令：

v-model: 用于表单控件(input/textare/select)的双向绑定。

<input v-model="message" placeholder="edit me">

v-once:只渲染一次，适用于静态内容的渲染。

v-cloak:防止用户看到未绑定之前的内容。

// v-cloak 需要添加这个选择器
[v-cloak] {
  display: none;
}

v-text:覆盖原有插值的内容，不会解析HTML。（innerText）
v-html:覆盖原有插值的内容，并解析HTML。（innerHTML）

v-if:不满足条件及不创建控件。
v-show:不满足条件也会创建控件，display：none。

控件频繁显示隐藏的话，推荐使用v-show。

v-for:可以遍历数组、字符串、数值、对象。

    //***这里要注意，key的值不要使用index，不然复用的时候会存在问题。（列表存在选中状态，在列表上方添加数据）
    <div v-for="(item, index) in items" :key="item.key">
      <div>{{item.name}}</div>
      <div>{{index}}</div>
    </div>

v-bind:给元素的属性绑定数据。

绑定类名：

注意点：
1.放在数组中，并且添加引号，这样才会去style中寻找响应的样式。（默认会到data中寻找）
<div :class="['color','font']">babbabaab</div>
2.可以用三目运算符
<div :class="[flag?'color':'']">babbabaab</div>
3.可以用对象
<div :class="[{'color':true}]">babbabaab</div>
4.在model中实现相关对象
<div :class="obj">babbabaab</div>

 data() {
    return {
      obj:{
        'color':true
      }
    };
  },

绑定样式：

1、放在对象中，value要用引号括起来，带 - 的key，也要用引号括起来。
<div :style="{color:'red','font-size':'100px'}">babbabaab</div>
2、在model中实现相关对象。
<div :style="[obj1,obj2]">aaaaaaaaaaaaaaaa</div>
data() {
    return {
      obj1:{
        'color':'red'
      },
      obj2:{
        'background-color':'green'
      }
    };
  },

v-on:绑定事件用的。

常见修饰符
.once  事件只触发一次。
<div v-on:click.once="click">aaaa</div>
.prevent 阻止元素的默认行为。
<a href="http://www.ihaozhuo.com" @click.prevent="click">aaaa</a>
.stop 阻止事件冒泡(执行到当前元素，不再向父元素传递)
.self 只有点击到当前元素才会触发事件。
.capture 事件冒泡改为事件捕获（事件执行顺序从父视图到子视图）

//传递事件对象。
<div @click="click($event)"></div>

自定义指令：

全局指令：
// 定义指令的时候不需要写 v-
// 指令的生命周期
// bind: 被绑定到元素上时执行。
// inserted: 被添加到元素上时执行 (输入框的聚焦)
Vue.directive('color',{
  //  el 被绑定元素的元素
  // obj 传递的参数
  bind:function(el, obj){
      // el.style.color = 'blue'
      el.style.color = obj.value
  }
})

局部指令：
在Vue对象中添加响应属性就OK。
var app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    },
    directives: {
        'color': {
            bind: function (el, obj) {
                el.style.color = obj.value
            }
        }
    }
})

计算属性：

插值语法中可以编写js表达式，但是有明显的缺陷，表达式太长不利于阅读与书写。
Vue实例中添加下面的key：
  // 计算属性key
  computed:{
    msg2:function(){
      let res = 'abcdefg'.split('').reverse().join('')
      return res
    }
  }

div>{{msg2}}</div>

计算属性: 返回的结果没有变化时就不会被调用。
函数: 会被多次调用。

过滤器：

全局过滤器
// 只有在插值语法和v-bind中使用
// 可以连续使用
Vue.filter('formatStr', function (value){
  value = value.replace(/王/g,'李')
  return value
})

局部过滤器
Vue实例中添加下面的key：
  // 过滤器属性key
  filters: {
    format: function (value) {
      value = value.replace(/王/g, "李");
      return value;
    }
  },

过度动画：

类选择器实现

    <!-- 存在状态变化才会执行动画，每个 transition 中只能有一个标签 -->
    <transition>
      <div v-show="flag">123</div>
    </transition>

    <!-- 刚进来就需要动画,添加 appear -->
    <transition appear>
      <div v-show="flag">123</div>
    </transition>

    <!-- 指定动画样式，添加name属性 .v-enter 替换为 .one-enter 即可 -->
    <transition appear name="one">
      <div v-show="flag">123</div>
    </transition>


// 进来之前
.v-enter{
  opacity: 0;
}

// 进来之后
.v-enter-to{
  opacity: 1;
}

// 进来过程中
.v-enter-active{
  transition: all 3s;
}

// 离开之前
.v-leave{
  opacity: 1;
}

// 离开之后
.v-leave-to{
  opacity: 0;
}

// 离开过程中
.v-leave-active{
  transition: all 3s;
}

钩子函数实现

默认还是会找响应的类名。
给 transition 添加 v-bind:css='false'，实现不去查找类名。
<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    // 钩子函数实现动画，必须在这里写上 
    // el.offsetWidth / el.offsetHeight
    // 想要一进来就有动画，需要在这里添加延迟。
   setTimeout(function(){
      done()
    }, 0)
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

使用三方动画库

Velocity
在下面钩子函数添加代码就OK。
enter(el, done){
  Velocity(el, {opacity:1, marginLeft:'500px'},3000);
  done()
}

animate.css 
在 enter-active-class 指定响应的动画就OK了，动画名称可以从官网（https://animate.style）中查看。
    <transition
      appear
      enter-class
      enter-to-class
      enter-active-class="animate__animated animate__bounceIn"
    >
      <div v-show="flag">123</div>
    </transition>

列表动画

列表动画，只需用 transition-group 标签包裹就OK了，其他和 transition 一致。
    <transition-group>
      <div v-for="(item, index) in items" :key="item.key">
        <div>{{item.name}}</div>
        <div>{{index}}</div>
      </div>
    </transition-group>
上一篇 下一篇

猜你喜欢

热点阅读