vue的基本指令

基本指令

• 项目入口文件

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

• 组件

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

支持ES6语法：

<h1>{{ `${msg}` }}</h1>

• v-html，以HTML形式输出

<div v-html="msg"></div>

• v-text，以纯文本形式输出

<div v-text="msg"></div>

• v-bind: 绑定属性

<img v-bind:src="url" />

简写形式： <img :src="" />

• v-on:click 事件绑定

条件渲染

• v-if v-else-if v-else

<div v-if="ok">aaa</div>
<div v-else>bbb</div>

• 在template上使用条件渲染

<template v-if="ok">aaa</template>
<template v-else>bbb</template>

• v-show ：``display:none

列表渲染

• v-for

<ul>
    <li v-for="user in users">
        {{user.username}} | {{user.age}}
    </li>
</ul>
<ul>
    <li v-for="(item,index) in users" :key="index">
        {{item.username}}
    </li>
</ul>

事件监听

• v-on:click

<button v-on:click="handlerAddUser">添加用户</button>
<button @click="handlerAddUser">添加用户</button>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    handlerAddUser() {
      alert(this.msg)
    }
  }
}
</script>

• 参数传递

<button @click="handlerAddUser(msg, $event)">添加用户</button>

event对象

<div class="classify_item" v-for="g in grades" @click="selectGrade(g.id, $event)">
    {{g.name}}
</div>
<script>
methods:{
    selectGrade:function (gradeId, event) {
        $(event.target).siblings().removeClass('active')
        $(event.target).addClass('active')
    }
}
</script>

事件修饰符

• .stop 阻止事件冒泡

• .prevent 阻止默认时间

• .once 一次

• .submit 提交事件

• .keyup.enter 回车事件

• .keydown.enter 回车事件

变异方法

这些变异方法会引起视图的变化：

• push({})
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

计算属性

<h1>{{ msgReverse }}</h1>
<script>
computed: {
    msgReverse(){
    	return this.msg.split('').reverse().join('')
    }
}
</script>

计算属性和方法的优势：计算属性存在缓存

双向数据绑定

修饰符：

• lazy失去焦点时绑定数据

<input type="text" v-model.lazy="age" />
{{age}}

• number自动将用户的输入转换为值类型
• trim自动去掉空格

属性监听

watch:{
  age: function(newValue){
    console.log(newValue)
  }
}

延迟搜索

<script>
  function delayer (action, delay = 600) {
    let timer = -1;
    return nv => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        action(nv);
      }, delay);
    };
  }
  export default {
    name: "Computed",
    data() {
      return {
        question:10,
        answer:'init'
      }
    },
    watch:{
      question: delayer(nv => {
          $.ajax({
              url:'',
              type:'get',
              data:{param:nv},
              success:() => {}
          })
      }),
    }
  }
</script>

style样式

利用vue的动态绑定技术，可以动态的更新class属性

• 使用bool值，对象语法

<div :class="{active:isActive}">
  this is content！
</div>
<script>
  export default {
    name: "ClassStyle",
    data(){
      return {
        isActive:true
      }
    }
  }
</script>
<style scoped>
  .active{
    color: red;
  }
</style>

• 对象语法 ，更简洁的方式

<div :class="myStyle">
  this is content！
</div>
<script>
  export default {
    name: "ClassStyle",
    data(){
      return {
        myStyle:{
          active:true
        }
      }
    }
  }
</script>