vue2 核心概念
一、vue变量
所有的 vue变量 ，必须在data：中有注册（哪怕内容是空，相当于声明这个是变量，是vue变量而不是js变量）。这里的变量也可以运算。（注意：所有的框架一定要注意js变量和框架的变量，js变量和框架的变量是可以相互转换，获取的。框架的变量有这个框架变量的定义方法，如东信公司的DD变量的定义；如vue变量必须在data中定义（注册）或者methods（方法注册的地方））
1、组件的data必须是函数。
2、vue 变量的修改（vue变量的改变，视图同步更新。）：
this.age = 16
3、vue变量改变，视图不会同步更新的情况：
参考 我的 另外一篇博客：https://www.cnblogs.com/wfblog/p/10544303.html
二、vue函数
所有的方法事件函数，必须在methods中。methods中函数的 this指向vm，获取data中的值可以直接 this.name获得和修改。
其它的地方在实例创建之前（如生命周期beforeCreate函数中，全局中）获取data的值，必须指明对象，vm.name 获取。
vue中可以调用外面全局的方法，外面全局环境中也可以调用vue中的方法，使用vm.fun。（这样就解决了，vue中不能jQuery操作DOM的问题了）
三、DOM中绑定vue数据 参考 https://www.cnblogs.com/fly_dragon/p/6218675.html
1、文本数据：
1、 {{ }}方法 ： eg：<span>Hello {{ name }}</span>
2、v-html 指令 ： 如果是标签内所有的文本
2、属性绑定： 语法 <标签 v-bind:属性名="要绑定的Vue对象的data里的属性名"></标签>
指令中绑定的数据，不能使用 {{ }}方法，直接填 data里的属性名就可以了。
注意： v-bind：value绑定的表单的值，不能双向数据绑定，v-model可以。
3、class属性：（class和style是多属性值属性，所以vue除了上面的语法，又另外做了处理）
1、绑定样式对象 ：
代码：<div v-bind:class="{ active: isActive }"></div>
解释：
当 isActive为 true时， div就会具有了active样式类，如果 isActive为false，那么div就去掉active样式类。
直接在html属性中的双引号内写对象，还是很不爽，也没有智能提示，很容易写错。 Vue可以让我们直接把绑定的class字符串指向data的一个对象，这样就非常方便了，既可以有智能提示，又可以很复杂进行编辑，不用担心烦人的""了。
<div >
<div class="static"
v-bind:class="classObject">
</div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
classObject: {
active: true,
'text-danger': false
}
}
});
</script>
2、绑定样式数组 ：
<div v-bind:class="[activeClass, errorClass]">data: {
activeClass: 'active',
errorClass: 'text-danger'
}
3、style属性
CSS属性名可以用驼峰式（camelCase）或短横分隔命名（kebab-case）
<div v-bind:style="{fontSize: size + 'px', backgroundColor: bgcolor, width: width}"> var app = new Vue({
el: '#app',
data: {
size: 19,
width: 200,
bgcolor: 'red'
}
});
4、表单选中值的绑定用 v-model ，比如select标签选中的值是什么和v-model绑定
5、v-model是双向数据绑定，v-bind是单向的数据绑定。下面两个是等效的
参考 详解 v-model ： https://www.jianshu.com/p/4147d3ed2e60
<input v-model="sth" /><input v-bind:value="sth" v-on:input="sth = $event.target.value" />
6、v-model绑定的不一定是表单的value属性值（一般都是value属性值，Radio和Checkbox有所不同），
如：单选Checkbox中v-model绑定的是checked属性值，原生标签中只要就这个属性有就是被选中的。用vue通过v-model绑定的变量就可以知道是不是选中。
参考 ： https://www.cnblogs.com/dyfbk/p/6868350.html
四、计算属性 computed ：https://www.cnblogs.com/gunelark/p/8492468.html
总结：计算属性 默认只有getter，不过在需要时你也可以提供一个setter （setter 是反过来执行的函数，当计算属性值被改变，执行setter 函数）
computed: { totle: {
set (val) { // totle 值的改变会触发这里的函数。但是下get函数引起的totle改变除外
console.log('set')
this.msg += 'dfd' // 这里msg改变会引起get函数的执行。只要get函数中使用到的vue数据发生变化都会触发get函数的执行。
},
get () { // 这里引起的 totle 值改变，不会触发set里面的函数。
console.log('get') // 正式开发，这里是不推荐有其他业务代码的，只有一个 return数据
return this.msg + this.tt
}
}
}
五、列表渲染
1、列表渲染中的 vue 变量，凡不是一 object.name 形式的变量，渲染出来的结果是一样的。所以如果每一列可能不同的，都必须转化为object.name形式的变量。
2、vue循环渲染可以和条件渲染结合起来使用的
六、事件绑定
绑定一个事件<button v-on:click="say">Say</button>
绑定多个事件
<div v-on:click="sayFrom('first')" v-on:click ="sayFrom('second)">
有修饰符的绑定事件
<a v-on:click.stop='doThis'></a>
vue.js移除绑定的点击事件 ： https://blog.csdn.net/tsingsn/article/details/77196167
七、过滤器
在vue2.0里 管道符‘ | '只能用在 mousetache(插值) 和 v-bind 中。（v-model的数据怎么使用过滤器还不清楚）
vue里面的vue变量名和方法名还有过滤器名字都不能相同，全局作用域中都可以通过vue对象直接获取到。
new Vue({ el: '#app',
data: {
},
filters: {
capitalize: function (value) {
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
});
Vue2.0里过滤器容易踩到的坑 ： https://blog.csdn.net/sinat_36555135/article/details/70678478
八、常用生命周期
实例生命周期钩子（微信小程序框架和它类似） ： 可以把周期钩子 看做 不同时期的人口函数
参考 ： https://cn.vuejs.org/v2/guide/instance.html#实例生命周期钩子 或 https://segmentfault.com/a/1190000008010666
常用的生命周期有：
1、beforeCreate （2.0版本前叫 init） ： 在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化。
2、mounted （2.0版本前叫 ready） ： 在编译结束和$el第一次插入文档之后调用
vue生命周期中执行函数不可出现vue对象（如vm，vm = new Vue()），因为在 new Vue()过程还没有完成vm的赋值（此时的vm是undefined），所以此时内部执行语句出现 vm ，变量就会报错。
3、destroyed ：在实例被销毁之后调用。单页面用中页面跳转时组件页面就会被销毁。定时器的功能相当于另外开了一个进程，vue组件销毁，并不能结束定时器的程序。需要手动清除定时器，一般都是在销毁的生命周期中执行。
九、watch 监听数据变化
参考 ： https://blog.csdn.net/lemon_zhao/article/details/52191527
注意：watch中监听的数据的事件函数，如果是methods中的方法，只能使用字符串，这里不能使用vm.fun对象获取。
v-bind绑定的数据，视图改变不一定使vue变量同步改变，所以不会触发watch中的函数。
new Vue({ el: '#app',
data: {
name: ""
},
methods: {
queryTrendData: function() {
}
},
watch: {
'name': 'queryTrendData',
}
});
十、插槽 【关键两个概念：插槽 和 插槽内容】
1、插槽内容：
2、编译作用域： 父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
3、后备内容：默认的插槽内容，类似函数的默认参数概念。在没有传入插槽内容，使用默认的插槽内容。 slot 标签内的就是 后背内容。
<button type="submit"><slot>Submit</slot>
</button>
4、具名插槽：【 2.6.0 起有所更新，和前面的使用方式有点区别。这里只讲新的版本 】
说明：给 slot 插槽标签，设置name属性。插槽内容 可以指定任意的
<div class="container"><header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
使用这个组件时，插槽内容 指定 插槽的名称。就是插到对应的插槽里。
<base-layout><template v-slot:header>
<h1>Here might be a page title</h1>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template v-slot:footer>
<p>Here's some contact info</p>
</template>
</base-layout>
5、作用域插槽：
重要概念：绑定在 <slot> 元素上的 attribute 被称为插槽 prop。这个东西 可以 实现，父组件访问（必须是插槽内容访问）子组件内的变量。
<span><slot v-bind:user="user">
{{ user.lastName }}
</slot>
</span>
子组件中的user 变量，通过 插槽prop，可以把变量给父组件使用。
<current-user><template v-slot:default="slotProps">
{{ slotProps.user.firstName }}
</template>
</current-user>
6、
十一、 混入 (mixin)
参考：https://cn.vuejs.org/v2/guide/mixins.html
概念：提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
// 定义一个混入对象var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个使用混入对象的组件
var Component = Vue.extend({ // 这里 Component 组件本身是没有 内容的。通过 混入（mixins），将 myMixin 混入对象 中的 选项，合并到了 Component 组件中。使得Component 组件有相应的内容了。
mixins: [myMixin]
})
var component = new Component() // => "hello from mixin!"
注意：混入对象 是一个 js 对象，只是 里面的选项 和 组件选项是一样的。所以 混入对象 一般都是写在 js文件中的。
十二、自定义指令 https://www.cnblogs.com/art-poet/p/12201678.html 或 https://cn.vuejs.org/v2/guide/custom-directive.html（官网）
钩子函数：
- bind ： 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted ：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update ：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
- componentUpdated ：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind ：只调用一次，指令与元素解绑时调用。
钩子函数传入的参数：
- el：指令所绑定的元素，可以用来直接操作 DOM。
- binding：一个对象，包含以下 property：
- name ：指令名，不包括 v- 前缀。
- value ：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
- oldValue ：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
- expression ：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
- arg ：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
- modifiers ：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
- vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
自定义指令使用总结：
1、自定义指令中怎么使用 this。 https://blog.csdn.net/u011200562/article/details/115129780
十三、
以上是 vue2 核心概念 的全部内容， 来源链接： utcz.com/z/380002.html
