Vue-基础

元素相关

if

v-if="条件"  =>  v-if="arr.length>0"   v-else-if="条件"   v-else

<div class="a_class" v-if="arr.length>0">
<div class="b_class" v-else-if="arr.length=0">
<div class="c_class" v-else>

show

v-show="true" （false） 显示（隐藏）=> display : none

<div class="class" v-show="true">
<div class="class" v-show="false">

for

<li v-for="item in array">{{item}}</li> (Array)

<li v-for="(item, index) in array">{{item}}</li> 

<li v-for="(value, key) in param">{{`${key} : ${value}`}}</li> (dictionary)

<template v-for="item in array"></template> 可作为一个整体，具体参考leka_abount页

<li v-for="(item, index) in array" :key="item.id">{{item.title}}</li> 标签的唯一标识

bind

<!-- 属性绑定 -->
<button v-bind:type="btnType"> </button> 

<!-- 简写model-view -->
<button :type="btnType"></button>  

<!-- 禁止与否 -->
<input type="checkbox" v-bind:disabled="item.disabled">  

<!-- 实现多样化 -->
<div :style="{height: `${kHeight}`, width: kWidth, top: 20}"></div>   
<div :style="{height: 30+'px', width: '750px', top: 20}"></div>  

<div :style="{backgroundColor: kColor}"></div>
<div :style="{'background-color': kColor}"></div>

<!-- class赋值（item、isUse：js中的实例变量） -->
<label :class="item.className"></label>
<label :class="{'lable-css': isUse}"></label>
<label :class="['label-frame', item.className]"></label>
<label :class="['label-frame', {'label-color': isUser}]"></label>

Vue会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在data对象上存在才能让Vue转换它 ，实现界面的重新渲染；

var object = {}
object.key = 'value'
//备注：v-bind不一定生效
object = {key: 'value1'}
object = Object.assign({}, {key: 'value2'})
//备注：v-bind正确赋值方法

model

<input type="text" v-model="inputText"><p>inputText : {{inputText}}</p> (view-model)

html

<div v-html="yourHtml"></div> 加载html

on & 事件监听

<!-- 输入事件 -->
<button v-on:click="count++"></button> 

<!-- 简写(click-SEL) -->
<button @click="increase"></button> 

<!-- input的监听 -->
<input @focus="获取焦点" @input="正在编辑" @blur="失去焦点" /> 

<!-- 页面滚动监听 -->
<div ref="view" @scroll="handleScroll"></div>

/* JS绑定页面滚动监听 */
mounted () {
  let _this = this /* ()=>{}不需要 */
  window.addEventListener('scroll', function () {
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset
    var cellHeight = _this.$refs.cell.offsetHeight
    var cellTop = _this.$refs.cell.offsetTop
  })
  /* window | 滚动的元素 */
  this.$refs.view.addEventListener('scroll', () => { })
},

/* vue绑定页面滚动监听 */
method: {
  handleScroll () {
    // 滚动监听
  }
},

ref

<a ref="name"/> => this.$refs.name访问元素

<dialog ref="dialog"></dialog>  
<script>
  var dialog = this.$refs.dialog  //获取元素组件
  dialog.showComFitBox(params)   //调用元素组件方法
</script>

$emit

子组件触发父组件的回调，类似于oc的delegate

<!-- 子组件 SubComponent -->
<script>
    export default{
      methods: {
        close() {
          this.$emit('close', params)
          /* this.$emit('close', arg1, arg2, ...) 多个传参*/
        }
      }
    }
</script>

<!-- 父组件 -->
<template>
    <sub-component @close="resetData" />
</template>

<script>
    export default{
      components: {
        SubComponent
      },
      methods: {
        resetData(param) {
          console.log(JSON.stringify(params))
        }
      }
    }
</script>

js方法相关

export default {data:{}, created:{}, computed:{}, methods:{}, watch:{}}

this 

在export default的方法中，this指向的是vue的实例；但也存在this指向不是vue实例的情况，如下代码

mounted () {
  let _this = this /* ()=>{}不需要 */
  window.addEventListener('scroll', function () {
    // _this指向vue实例(vueComponent)，this指向window
  })

  axios.get('user/userinfo').then(funtion (res) {
    // _this指向vue实例(vueComponent)，this指向undefine
  })
},

使用 () => {} 则不会出现this指向的问题，如下代码

mounted () {
  window.addEventListener('scroll', () => {
    // this指向vue实例(vueComponent)
  })

  axios.get('user/userinfo').then(res => {
    // this指向vue实例(vueComponent)
  })
},

data ：

初始化数据；

data () {
  return {
    userName: '',
    password: '',
    staticConfigData: ''
  }
}

created :

在 new Vue( ) 初始化生命周期后执行，还未挂载到DOM，可用于初始化一些数据；（类似于init）；

created () {
  this.staticConfigData = 'test data'
}

mounted :

实例已经挂在DOM，此时可通过DOM API获取DOM节点（Vue2.0必须等nextTick回调）；

mounted () {
  this.$nextTick(()=> {
    console.log('mounted');
  });
}

props:

 父组件传参给子组件，在created之前就已经赋值，可以在created或者watch中实现对参数的转换或相关逻辑处理；

<component :content="content" :params="params"></component>

props: {
  content: {
    type: String,
    default: 'Helloworld!!'
  },
  params: {}
},
data () {
  return {
    paramStr: '',
    value: ''
  }
},
created () {
  // 数据转换
  this.paramStr = JSON.stringify(this.params)
},
watch: {
  params: {
    handler() {
      this.params.key ? (this.value =  this.params.key) : ''
    },
    deep: true
  }
}

 components :

包含组件；

import Nubit from './component/nubit.vue'
components: {
  Nubit //包含Nubit组件
}

methods :

实例方法实现；

methods: {
  jumpPage(pageName) {
    if (pageName === 'APP介绍') {
      this.$VAppBridge.locationHref('/about/introduce.html')
    }
    if (pageName === '用户服务协议') {
      this.$VAppBridge.locationHref('/about/announce.html')
    }
  }
}

computed ：

定义属性变量，实现get和set方法；

computed: {
  numberTotal () {
    return a+b
  }
}

numberTotal: {
  get () {
    return a+b
  },
  set (value) {
    a = value*2
  }
}

numberTotal () {
  return a+b
}

watch : 

 监听实例变量的变化；

watch: {
  count: {
    //this.count变化
  },
  'formatDic.name': {
    //this.formatDic.name变化
  },
  userInfo: {
    handler(userInfo){
      //深度监听，userInfo的属性变化也会触发
    },
    deep: true
  },
  number (newValue, oldValue) {
    console.log(`${newValue}, ${oldValue}`)
  }
}

filters ： 

过滤器，实现数据的过滤或转换；

/* 组件过滤器 */
data() {
  return {
    point: 12300
  }
},
filter: {
  formCost(value) {
     return (value/100.0).toString()
  }
}

/* 全局过滤器 */
Vue.filter('formCost', function(value) {
  return (value/100.0).toString()
})

<!-- HTML中的引用 -->
<p>{{ point | formCost }}</p>

<input type="text" v-bind:value="point|formCost" />

Vue配置

index.vue中包括css、js、html的引用声明：

<style src="./components/index.less" lang="less" scoped></style>
<template src="./components/index.html"></template>
<script src="./components/index.js"></script>

index.js（与vue同级）中实现对vue的配置 ：

import root from './index.vue'
root.el = '#root'
new Vue(root)