vue

mvvm

vm:监听同步view和model
用数据渲染页面操作页面

差值表达式

作用：操作判断处理数据，数据拼接渲染。

指令

v-text

将文本数据渲染到页面
将内容和标签原样输出

v-html

将带标签的文本解析成HTML渲染到页面
容易导致xss攻击

v-bind

动态的绑定属性

v-for

渲染对象三个参数
item key index
<br />
渲染数组两个参数
item index

循环遍历对象数组
key属性具有唯一性，标识数组的每一项

注意：一下变动不会触发视图更新

通过索引给数组设置新值

通过length改变数组
解决：

Vue.set(arr, index, newValue)

arr.splice(index, 1, newValue)

数组
<li v-for="(item, index) in user" :key="index"> {{index}}.{{item.name}}</li>
对象
<li v-for="(value, key, index) in boss"> {{index}}.{{key}}:{{value}}</li>

v-model

视图层和数据层互相绑定，同时更新

<input type="text" v-model="uname" />

v-on

绑定事件监听

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>

<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>

<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>

<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">

<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button>

<!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

修饰符

.stop 调用event.stopPropagetion()
阻止事件捕获、冒泡

.prevent 调用 event.preventDefault() 取消事件的默认行为

.capture 添加事件侦听器时使用capture模式

.self 只当事件是从侦听器绑定的元素本身触发时才触发回调。

.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。

.native - 监听组件根元素的原生事件。

.once - 只触发一次回调。

.left - (2.2.0) 只当点击鼠标左键时触发。

.right - (2.2.0) 只当点击鼠标右键时触发。

.middle - (2.2.0) 只当点击鼠标中键时触发。

.passive - (2.3.0) 以 { passive: true } 模式添加侦听器

v-if

根据表达式判断是否渲染元素

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

v-show

根据表达式判断真假，设置display属性

v-cloak

这个指令保持在元素上直到关联实例结束标签
和 [v-cloak] {display: none}一起用时，可以隐藏未编译的标签直到实例准备完毕

自定义指令

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

<input type="text" v-focus>

<div id="app">
    <input type="text" v-mycolor="color"
</div>
<script>
Vue.directive("mycolor", {
    inserted(el, binding) {
        el.style.color = binding.value
    }
})
var vm = new Vue({
    el: "#app",
    data: {
        color: "red"
    }
})
</script>

过滤器

用于文本格式化

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

计算属性和监听器

官方文档计算属性和侦听器

深度监听

var vm = new Vue({
        el: '#app',
        data: {
              user: {
                name: 'jack'
              }
        },
        watch: {
          // 监听对象不能使用下面这种写法，要使用深度监听
          // user(newVal, oldVal) {
          //   console.log('改变了');
          // }

            user: {
              // hanlder这个函数名字固定
              handler (newval) {
                console.log('改变了');
                console.log(newval.name);
              },
              // deep:true表示深度监听
              deep: true
            }
        }
      })

动画过渡

css过渡

v-enter: 定义进入过渡的开始状态。

v-enter-active：定义进入过渡生效时的状态。

v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。

v-leave: 定义离开过渡的开始状态。

v-leave-active：定义离开过渡生效时的状态。

v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。

// html
<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="slide-fade">
    <p v-if="show">hello</p>
  </transition>
</div>

js
new Vue({
  el: '#example-1',
  data: {
    show: true
  }
})

css
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

自定义过渡的类名

结合第三方css动画库，如Animare.css

-enter-class
-enter-active-class
-enter-to-class (2.1.8+)
-leave-class
-leave-active-class
-leave-to-class (2.1.8+)

  <transition
    name="custom-classes-transition"
    enter-active-class="animated tada"
    leave-active-class="animated bounceOutRight"
  >
    <p v-if="show">hello</p>
  </transition>

javaScript 钩子

<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 结合时使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
  // --------
  // 离开时
  // --------
  beforeLeave: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

组件

注册组件

全局注册

Vue.component('my-compone', {
    
})

<div id="app">
  <my-compone></my-compone>
</div>

局部注册

var ComponentA = { /* ... */ }

new Vue({
  el: '#app'
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

父子组件通信

子传父

  Vue.component('father', {
    template: `
                <div>
                  <p>父亲年纪大了，记性不好，我儿子告诉我他叫{{mySonName}}</p>
                  <son @tellFatherMyname="getMySonName"></son>
                </div>
    `,
    data () {
      return {
        mySonName: '???'
      }
    },
    methods: {
      // 这个函数中有一个默认参数，该参数就表示上传上来的值
      getMySonName (data) {
        // console.log(data);
        this.mySonName = data
      }
    },
    components: {
      son: {
        data () {
          return {
            myName: '小明'
          }
        },
        template: '<button @click="emitMyname">点击就告诉我爸爸我叫{{myName}}</button>',
        methods: {
          emitMyname () {
            // 子组件传值给父组件需要用到$emit()方法，这个方法可以传递两个参数，一个是事件名称，一个是需要传递的数据
            this.$emit('tellFatherMyname', this.myName)
          }
        }
      }
    }
  })

父传子

// 创建一个fahter组件
  Vue.component('father', {
    // 2. 在使用子组件的地方，通过v-bind指令给子组件中的props赋值
    template: '<div><p>我是父组件，我给我儿子起名叫{{mySonName}}</p><son :myName="mySonName"></son></div>',
    data () {
      return {
        mySonName: '小光'
      }
    },
    // 通过components属性创建子组件
    components: {
      // 创建一个son组件
      son: {
        // 1. 声明props，它的作用是：用来接收从父组件传递过来的值
        // props可以跟一个数组，数组里面的值是一个一个的字符串，这个字符串可以当成属性来使用
        props: ['myName'],
        template: '<p>我是子组件，我爸爸给我取名叫{{myName}}</p>'
      }
    }
  })

vue

mvvm

差值表达式

指令

v-text

v-html

v-bind

v-for

v-model

v-on

v-if

v-show

v-cloak

自定义指令

过滤器

计算属性和监听器

深度监听

动画过渡

css过渡

自定义过渡的类名

javaScript 钩子

组件

注册组件

父子组件通信

相关阅读更多精彩内容

友情链接更多精彩内容

vue

mvvm

差值表达式

指令

v-text

v-html

v-bind

v-for

v-model

v-on

v-if

v-show

v-cloak

自定义指令

过滤器

计算属性和监听器

深度监听

动画 过渡

css过渡

自定义过渡的类名

javaScript 钩子

组件

注册组件

父子组件通信

相关阅读更多精彩内容

友情链接更多精彩内容

动画过渡