vue2.x的一些知识点总结

---

一、表单

1. 复选框checkbox

使用true-value和false-value，可以将布尔值进行隐性的转换。

<input type="checkbox" v-model="flag" true-value="1" false-value="0">

2. v-model的原理

<input type="text" v-model="msg">

可以解析为：

<input type="text" :value="msg" @input="msg = $event.target.value">

二、组件传值

1. 绑定事件的命名必须大写

错误写法：my-event（这样写会导致该方法无效）

<Son @my-event="handler" />

正确写法：myEvent

<Son @myEvent="handler" />

2. .sync修饰符

可以变更从父组件传到子组件的值，对prop进行 双向绑定：

父组件：

<Son :msg.sync="msg" />

子组件：

this.$emit('update:msg','new message')

此时，msg在父组件和子组件中的值都变更为 new message。

三、动态组件的is属性

通常用于tab切换：

// keep-alive标签用来保持组件状态，避免重复渲染
<keep-alive>
	<div is="tabComponent"></div>
</keep-alive>

四、访问元素和组件

1. 访问根实例

this.$root.变量/计算属性/方法

2. 访问父级实例

this.$parent.变量/计算属性/方法

3. 访问子组件元素

this.$refs.子组件的ref.变量/计算属性/方法

4. 访问子组件实例

this.$chidlren[索引].变量/计算属性/方法

注意：$children 返回的是一个组件集合，需要清楚的知道子组件的顺序，通常使用下标来操作；

for(let i = 0;i < this.$children.length;i++){
	this.$children[i].fun();
}

四、程序化的事件侦听器

$on(eventName,eventHandler)：侦听一个事件
$once(eventName,eventHandler)：一次性侦听一个事件
$off(eventName,eventHandler)：停止侦听一个事件

通常不会用到，但是需要在一个组件实例上手动侦听事件时，它们是派得上用场的。
比如定时器进行销毁：通过 $once 来监听定时器，在 beforeDestroy 钩子可以被清除。

const timer = setInterval(() =>{                    
    // 某些定时器操作                
}, 500);            

this.$once('hook:beforeDestroy', () => {            
    clearInterval(timer);                                    
})

五、模板定义的替代品

1.内联模板

Vue提供了一种内联模板的功能，在使用组件时，给标签加上 inline-complate 特性，组件就会把它的内容当作 模板，而不是当 内容 分发。）

作用：不在创建一个组件时定义它的模板，而是在声明的外部创建。

index.vue：创建一个新的组件时，但是通过 inline-template 来定义模板

<template>
  <div>
  	<-- 在父组件中定义子组件Child的模板-->
    <Child inline-template>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </Child>
  </div>
</template>

<script>
import Child from '@/components/child'
export default {
  name: 'index',
  components: {
    Child
  }
}
</script>

child.vue：

<template>
  <div>
    <p>我是child</p>
  </div>
</template>

渲染后效果：

注意：作用域比较难理解，建议不要轻易使用内联模板。

2. x-Template

在声明一个组件时，需要在template中定义模板，如果要换行的话，需要加上一个 " \ " 。
如果是比较简单的模板还好，html元素比较多的时候，就会感觉眼花缭乱的，因此我们有一个看起来舒服的方式：x-template。
只要写出 < script type=“text/x-template” id=“x-template” >< /script> ，在其中间就可以愉快的写HTML代码了，不用考虑换行等问题。这里注意，要加一个 id 名称。

<template>
	<div>
		<my-component></my-component>
		<script type="text/x-template" id="hello">
			<-- template定义的模板，一定要用一个根元素包裹起来，每个组件必须只有一个根元素 -->
			<div>
                <p>This is the content of component</p>
                <p>Hello Vue!</p>
            </div>
        </script>
	</div>     
</template>

六、强制更新

this.$forceUpdate()

调用强制更新方法会更新视图和数据，触发 updated（不适用于刷新页面，只适合刷新页面上未更新的变量值）：

<template>
	<button @click="update">更新</button>
</template>

export default {
  name: 'index',
  methods: {
  	update () {
  		this.$forceUpdate();
  	}
  },
  updated () {
    console.log('更新了')
  }
}

曾经在做vue的项目的时候，遇到过一个这样的问题：
一个对象数组，尝试直接改变某个item的属性值，发现页面上没有效果；后来直接置空数组，再给数组赋值，发现也没有效果。
最后的处理方式是：$ set方法，这样vue就可以知道发生了变化。

this.$set(arr, 2, '柚子') 

可是如果我们不想利用==$ set==去设置，也是可以的，通过 $forceUpdate 就可以实现。

---

总结

对vue2.x一些项目中遇到的知识点进行总结。