墨霁青玉

【VUE】Vue总结

一个Vue应用就是一个Vue实例

var mydata = {
 name:"Mike",
 age:23,
 job:"engineer"
};
//Vue实例模板如下
var vue = new Vue({
 el:"#myapp",  //myapp为应用的根节点

 data:mydata,  //mydata为这个应用的数据对象

 beforeCreate:function(){ ... }, //生命周期钩子函数beforeCreate，实例创建前调用该函数，此时el和data均为undefined
 created:function(){ ... },  //生命周期钩子函数created，当一个实例被创建完毕执行该函数，此时el还是为undefined，但是data数据已绑定完毕，为mydata
 beforeMount:function(){ ... },//生命周期钩子函数,有el选项，挂载DOM节点前执行该函数，此时el有对应的DOM节点数据，但DOM结构的数据绑还没有执行；定若没有el选项，生命周期结束
 mounted:function(){ ... },  //生命周期钩子函数，挂载DOM节点结束执行该函数，此时el有对应节点，数据绑定完成。
 beforeUpdate:function(){ .. }, //生命周期钩子函数，数据发现变化时先执行beforeUpdate，后执行updated，此时数据更新未完成。
 updated:function(){ ... },  //生命周期钩子函数，数据发现变化时先执行beforeUpdate，后执行updated，此时数据更新完成。
 beforeDestroy:function(){ ... }, //生命周期钩子函数，函数在实例销毁前调用，此时实例还可以调用
 destroyed:function(){ ... },  //生命周期钩子函数，在实例销毁后调用，此时Vue实例所有东西会解除绑定，事件监听器会被移除，所有子实例都被销毁

 computed:{  //计算属性
  helloName:function(){   //计算属性的getter
   return "Hello,"+this.name+"!";
  },
  increaseAge:function(){
   return this.age+1;
  }
 }
 
 watch:{  //侦听器，数据发生变化时，会调用该数据的侦听函数
  name:function(newVal,oldVal){  //如果name发生变化，这个函数会执行
    ...
  },
  job:function(newVal,oldVal){
    ...
  }
 }

 methods:{   //方法
  doSomething1:function(args){
   ...
  },
  doSomething2:function(args){
   ...
  },
 }
});

Vue特性总结如下

1.双向数据绑定 {{ something }}

一次性插值可以使用 v-once指令这样绑定的内容不会随数据而改变。 {{name}}

2.绑定html文本使用v-html指令

3.v-bind指令用于绑定html属性，如下

v-bind:href="myurl"
v-bind:id="myid"
v-bind可以缩写为 :属性 ,例如 :href="myurl"
示例 :id :class :href :title :src :style :key :value

4.v-on用于监听DOM事件，如下

v-on:click="doSomething"
v-on可以缩写为@ 例如@click="doSomething"

5.修饰符

5.1 事件修饰符，用于指出指令该以特殊方式绑定，修饰符可以串联

例如 .prevent, .prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

.stop 阻止事件冒泡
.prevent 阻止默认事件执行
.capture 事件采用捕获模式
.self 只有event.target是当前元素自身时才触发处理函数，即事件不是从内部元素触发
.once 事件只触发一次
.passive

5.2 按键修饰符

.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta

6.计算属性computed

计算属性默认只有 getter，如上vue实例所示，不过在需要时你也可以提供一个 setter ：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...

对fullName进行赋值时，setter 会被调用 firstName 和 lastName 也会相应地被更新。

7.样式绑定

通过 :class 绑定相应的类名
通过 :style 绑定内联样式

8.条件指令

v-if v-else-if v-else
v-show
Vue 提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性

9.循环指令v-for

v-for="item in items"
v-for="(value,key,index) in items"
v-for通常与

【VUE】Vue总结

this is title！！

this is title！！

你可能感兴趣的:(Vue)