Vue基本指令与语法

Vue

双花括号：执行表达式，将表达式的结果输出到当前调用元素的innerhtml中

<any>{{表达式}}</any>

循环指令：根据in关键词后的集合，去循环创建多个标签

<any v-for="(value,key) in collection"></any>

选择指令：根据表达式执行的结果的真假来选择是否要挂载到dom

<any v-if="expression"></any>
/*
v-if
v-else-if 
v-else
*/

事件指令：通过v-on去给指定的事件绑定一个处理函数

<any v-on:eventname="handleEvent"></any>
//简写===>
<any @eventname="handleEvent"></any>
new vue({
  methods: {
     handleEvent() {
       //some operations
     }
  }
})

属性绑定: 将变量的值绑定到元素指定的属性

 <img v-bind:src="myimage">
 a v-bind:href="mylink"
 <input v-bind:style='{backgroundcolor:mybgcolor}'
 v-bind:class='{myred:isred}'
 v-bind:disabled="!isvalid"/>
 
 <a v-bind:href="mylink"></a>
// 简写===》
 <a :href="mylink"></a>

v-show="表达式" 根据表达式执行的结果的真假来切换display显示还是隐藏

v-html="变量" 根据变量更新对应的innerhtml

以上都是数据到视图的绑定

视图到数据的绑定：将表单控件中（select、input、textarea..）用户操作的结果绑定到数据
方式：v-model

<input type='text' v-model=''kw/>

<p>{{kw}}</p>

组件：组件是一个可被反复使用的，带有特定功能的视图
创建：

vue.component('my-button',{
  template:'<button>123</button>'
})

new vue({
 el:'#example'
 components:{
   'my-header':{
     template:'<p>test header</p>'
   }
 }
})

使用:

<my-header></my-header>
<my-button></my-button>

注意：
1.全局组件可以相互嵌套使用，而局部组件只能用在el所指定的容器范围
2.组件类的命名要遵循烤串式
3.组件类如果要渲染多个元素，放到一个容器，直接返回多个元素会报错

复合组件：就是一个普通的组件，该组件的模板中是包含其他的组件

vue.component('my-cart', {
  template:`<div>
     <my-header></my-header>
     <my-list></my-list>
     <my-footer></my-footer>
  </div>`
})

自定义指令

vue.directive('change-bg', {
   bind(el, binding) {
    //el是调用指令的元素
    //binding是一个对象，value
   },
   update() {},
   unbind() {}
})
//使用
<h1 v-change-bg="'#ff0000'"></h1>

过滤器：本质就是一个带有参数，带有返回值的方法

//①支持多重过滤
//②支持传递参数
<any>{{expression | 过滤器(参数) | 过滤器}}</any>

自定义过滤器

vue.filter('currency',function(arg,arg1) {
  //arg是管道前面表达式执行的结果
 return 处理后的结果
})

<p>{{30 | currency(1)}}</p>

watch属性，作用：
①将表单元素用户操作的结果绑定到
指定的变量，比如uname
②监听

vue.component('my-component', {
   watch: {
     uname(){}
   }
})

计算属性：依赖缓存，不会像普通的方法一样在每次调用的时候都会行；只会在依赖的数据发生变化时，才去执行

vue.component('my-component',{
  computed:{
    myhandle(){
      //复杂的业务逻辑操作
    }
  }
})

<h1>{{myhandle}}</h1>

组件的生命周期：create、mount、update、destroy （每个都对应有before,ed）

最后编辑于：2018.02.07 15:41:05