今天跟一个同事聊天，组长给了他一个vue2的项目，他之前一直写的是react，我说放心以你的实力一天就能上手。
下面我想分享一下vue2的一些使用方法，轻松上手，我的初衷是看了我的这个文章就能上手vue，起码能写需求了。
我先介绍一下vue2它与react的类组件使用方法类似,用最通俗的话语介绍一下vue2， 区别就在于 vue状态维护在date里 需要return，react的类组件是维护在state里，使用都需要this等，区别很多本文只说vue的使用方法，下面我着重介绍下vue2的使用方法，欢迎大佬补充。
生命周期
我觉得要写业务这个是最重要的了，最常用的两个钩子，
created
钩子在实例被创建之后调用，但尚未挂载到 DOM 上。可以请求一些接口数据，
created() {
console.log('实例已创建');
console.log('message:', this.message); // 可以访问 data 属性 }
mounted
钩子在 Vue 实例被挂载到 DOM 后调用。这意味着在这个阶段，$el 属性已经被创建，并且可以访问真实的 DOM 元素，可以进行一下dom操作，当然也可以请求接口数据，这是两个最常用的，卸载的钩子就自己去百度吧，哈哈哈！
mounted() {
console.log('实例已挂载');
console.log(this.$el); // 可以访问 DOM 元素 this.$el.textContent = 'DOM 已更新'; }
方法
Vue2中方法是写在 methods对象里的，因为vue的选项式api， 所有的方法都需要在这个对象里。使用的时候直接this.方法名字
methods: {
greet() {
alert(this.message);
}
}
Vue2的一些自定义指令
V-model 数据双向绑定，使用就是在组件中绑定一个v-model就能拿到这个value。
<template>
<div>
<input v-model="message" placeholder="输入一些文字">
<p>你输入的内容是：{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
};
}
};
v-if 条件判断
<template>
<div v-if="condition"> 这段内容只有在 `condition` 为真时才会显示。 </div>
</template>
<script>
export default {
data() {
return {
condition: ''
};
}
};
V-for 循环渲染，渲染数据的，下面介绍了computed以及v-for的使用方法，使用计算属性computed计算show是true的，然后循环渲染到模版上
<template>
<ul>
<li v-for="item in filteredItems" :key="item.id"> {{ item.text }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, text: '第一项', show: true },
{ id: 2, text: '第二项', show: false },
{ id: 3, text: '第三项', show: true }
]
};
},
computed: {
filteredItems() {
return this.items.filter(item => item.show);
}
}
};
</script>
还有一个最关键的vue不是写jsx是写template下，其实没有太大区别
再有就是子父传参，兄弟传参，方法有很多，下面是事例是父向子传递一个message，父组件可以通过在子组件标签上使用 props 属性向子组件传递数据。子组件需要在 props 选项中声明这些属性。
子组件可以通过 $emit 触发自定义事件，并将数据作为参数传递给父组件。父组件通过在子组件标签上监听这些事件来接收数据。
//父组件
<template>
<div>
<h1>父组件</h1>
<ChildComponent :message="parentMessage" @message-from-child="handleMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
‘components: { ChildComponent },
data() {
return {
parentMessage: 'Hello from Parent!' ，
childMessage：'‘
};
}
methods: {
handleMessage(message) {
this.childMessage = message;
}
}
};
</script>
//子组件
<template>
<div>
<h2>子组件</h2>
<p>{{ message }}</p>
<button @click="sendMessage">发送消息给父组件</button>
</div>
</template>
<script>
export default {
props: {
message: {
type: String, required: true
}
}
methods: {
sendMessage() {
this.$emit('message-from-child', 'Hello from Child!');
}
};
</script>
本文初衷，看了这篇文章能够上手vue，希望对大家有帮助。
