VUE

v-bind ： 基本用途是动态更新HTML元素上的属性，比如id、class、src、href、style等

v-on : 绑定事件监听器，做事件交互。v-on+click''、dbclick、keyup、mousemove等

 

“语法糖”是指在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。

v-bind         ---->      :

v-on           ---->      @

<a v-bind:href="url"> 链接 </a>
<img v-bind:src=”imgUrl”>
<!-- 缩写为 -->
<a :href="url">链接</a>
<img :src=”imgUrl”>



<!--v- on 可以直接用"@"来缩写-->
<button v-on:click="handleClose">点击隐藏</button>
<!--缩写为-->
<button @click="handleClose">点击隐藏</button>

 

 

计算属性

写在computed中。

<div id=”app” >
  <div :class=”classes”></div> 
</div> 
<script> 
  var app =new Vue({ 
    el :'#app', 
    data : {
      isActive : true , 
      error : null
  },
  computed: { 
    classes : function () { 
      return { 
        active:this.isActive&&!this.error, 
        'text-fail':this.error&&this.error.type ==='fail'
      }
    }
  }
})
</script>

 

计算属性还有两个很实用的小技巧容易被忽略：一是计算属性可以依赖其他计算属性；计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据。

 

计算属性 是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值，所以text 只要不改变，计算属性也就不更新

methods 只要重新渲染，他就会被调用，因此函数也会重新执行。

 

使用计算属性还是methods取决于你是否需要缓存，当遍历大数组和做大计算时，应当使用计算属性，除非你不希望得到缓存。

 

数组语法

当需要应用多个class时，可以使用数组语法，给class绑定一个数组，应用一个class列表。

<div id="app">
  <div :class="[activeCls,errorCls]">
</div>
<script>
  var app = new Vue({
    el:'#app',
    data:{
      activeCls:'active',
      errorCls:'error'
    }
  })
</script>

<!--渲染后的结果为：-->
<div class="active error"></div>

<!--三元表达式切换class-->
<div class="[isActive?activeCls:'',errorCls]"></div>

<!--对象语法-->
<div class="[{'active':isActive},errorCls]"></div>

 

绑定内联样式

v-bind:style (即 :style) 可以给元素绑定内联样式，方法与:class类似，也有对象语法和数组语法，直接在元素上写CSS

CSS属性名称使用驼峰命名（fontSize）或短横分割命名（font-size）

 

内置指令

v-cloak: 是一个解决初始化慢导致页面闪动的最佳实践，不需要表达式，会在VUE实例结束编译时从绑定的HTML元素上移除  和CSS的display：none；配合使用

<div id="app" v-cloak>
  {{message}}
</div>
<script>
  var app = new Vue({
    el: '#app',
    data: {
      message:'这是一段文本'
    }
  })
</script>

 

当网络较慢，网页还在加载Vue.js,而导致Vue来不及渲染，这时页面就会显示出Vue源代码。可以用v-cloak来解决闪动问题。

 

<!-- 搭配使用 -->
[v-cloak]{
  display:none;
}

 

在简单项目中，使用v-cloak指令是解决屏幕闪动的好办法，但在大型，工程化的项目中（webpack、vue-router）只有一个空的div元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要v-cloak指令咯

 

 

v-once 定义该元素或者组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。

v-once 在业务中也很少使用，当你需要进 步优化性能时，可能会用到。

 

 

v-else-if 要紧跟 v-if, v-else 要紧Rli! v-else-if v-if，表达式的值为真时 当前元素／组件及所有子节点将被渲染，为假时被移除。如果 次判断的是多个元素，

可以在 Vue扣内置的＜template>元素上使用条件指令，最终渲染的结果不会包含该元素。

 

元素被复用时，可以使用Vue.js提供的key属性，可以决定是否复用，key的值必须是唯一的

 

v-show与v-if

 

v-if 会根据表达式适当的销毁或重建及绑定的事件或子组件。

v-show 只是简单的CSS属性切换，无论条件真假与否，都会被编译。

相比之下，v-if更适合条件不经常改变的场景，因为它切换开销相对较大，而v-show适用于频繁切换条件。

 

v-for

遍历一个数组或枚举一个对象循环显示，需要结合in来使用，类似item in items

<div>
  <ul>
     <li v-for="book in books">{{book.name}}</li>
  </ul>
</div>
<script>
  var app = new Vue({
    el: '#app',
    data:[
      {name:'《Vue.js实战》'},
      {name:'《JavaScript语言精粹》'},
      {name:'《JavaScript高级程序设计》'}
    ]
  })
</script>

<!-- 数组添加索引 -->

  <li v-for= ”(book, index) in books ” >{{ index}} - {{book . name })</li>

<!-- 遍历对象时，可添加键名和索引 -->

<li v-for=”(value , key , index ）in user”>{{ index}} - {{book . name })</li>

 

 数组更新

 

 

 

 

 

Vue提供了一个特殊变量$event，用于访问原生DOM事件。

<!-- 阻止链接打开 -->
<div>
  <a href='www.baidu.com' @click='handleClick('禁止打开',$event)'>打开链接</a>
</div>
<script>
  var app new Vue({
    el:'#app',
    methods:{
      handleClick(){
        event . preventDefault() ; 
        window . alert(message);
      }
    }
  })
</script>        

v-bind修饰符

<!-- 阻止单击事件冒泡 -->
<a @click.stop="handle"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent = "handle"></form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="handle"></a>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div @click.capture="handle"></div>
<!-- 只当事件在该元素本身（而不是在子元素）触发时触发回调 -->
<div @click.self="handle"></div>
<!-- 只触发一次，组件同样适用 -->
<div @click.once="handle"></div>


<!-- 在表单元素上监听键盘事件时，还可使用按键修饰符 -->
<input @keyup.13="submit">

也可以自己配置具体按键
Vue.config.keyCode.f1 = 112    // 全局定义后，就可以使用@keyup.f1

<!-- Shift + S -->
<input @keyup.shift.83 = "handleSave">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething"></div>

 

表单组件

v-model

用于在表单类 元素上双向数据绑定。表单控件显示的值只依赖所绑定的数据，不再关心初始化时的value属性。

语法糖：   @input

 

单选按钮：      :checked="布尔值"

互斥单选按钮，需要v-model和value搭配使用，相同时极为选中。

 

复选框：v-model=“布尔值” 在勾选时，布尔值会随是否勾选而变化。

 

选择列表：

<option>是备选项，如果有value属性，v-model就会优先匹配value的值，如果没有，就会匹配<option>的text。

<!-- option 动态输出-->
<select v-model="selected" multiple> // multiple可以多选
  <option v-for="option in options" :value="option.value">{{options.text}}</option>
</select>

 

v-model修饰符

.lazy:   用于控制数据同步的时机

v-model默认是在input事件中同步输入框的数据，使用修饰符.lazy会转变在change事件中同步。

<input type="text" v-model.lazy="message"> // 这时message并不是实时变化的，而是失焦或按回车键才会更新。

 

.number 可以将输入转换成Number类型

<input type="number" v-model.number="message">

 

.trim 可以自动过滤输入的首尾空格

<input type="text" v-model.trim="message">

 

组件详解

组件（Component）是Vue.js最核心的功能。