文章详细介绍了Vue.js的一些关键特性，包括v-model、v-on、v-bind等指令的用途，Vue的安装方式，以及MVVM框架的工作原理。此外，还讨论了Vue与MVC框架的区别，生命周期钩子函数的作用，v-if与v-show的使用场景，以及计算属性的缓存机制。同时，提到了自定义指令和组件的注册方法，展示了如何在Vue中实现这些功能。
- v-model：双向数据绑定
- v-on：监听事件
- v-bind：单向数据绑定
- v-text：插入文本内容
- v-html：插入包含HTML的内容
- v-for：列表渲染
- v-if：条件渲染
- v-show：显示隐藏
1.Vue安装方法：
通过<script>引入
通过CDN引入
通过NPM搭建：npm install vue或者npm install @vue/cli
2.Vue特点：
(1)轻量级: Vue相对简单、直接，所以Vue使用起来更加友好。
(2)数据绑定:数据双向绑定。
(3)应用指令: 指令主要包括内置指令和自定义指令
(4)插件化开发: 插件用于对Vue框架功能进行扩展，简单配置后就可以全局引入
3.MVVM框架
MVVM即Model-View-ViewModel的简写。即模型-视图-视图模型。模型（Model）指的是后端传递的数据。视图(View)指的是所看到的页面。视图模型(ViewModel)是mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将模型（Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
MVVM与传统的MVC框架的不同：
MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，只是在MVC的基础上增加了一层VM，只不过是弱化了C的概念，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。
4.生命周期钩子函数：
- beforeCreate 创建实例对象之前执行
- created 创建实例对象之后执行
- beforeMount 页面挂载成功之前执行
- mounted 页面挂载成功之后执行
- beforeUpdate 组件更新之前执行
- Update 组件更新之后执行
- beforeDestory 实例销毁之前执行
- Destory 实例销毁之后执行
v-if和v-show的区别：（来源：官方文档）
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
（答题答加粗的就行，全答更好点）
计算属性的缓存
计算属性最重要的就理解它的响应式特性。当一个计算属性依赖于响应式属性时，计算属性会随着依赖的属性变化而变化，变化完成后所得到的值便会缓存下来，知道下一次依赖的属性的变化。
备注：官方文档是这么写的
指令的注册和自定义
通过Vue.directive(id,definition)方法可以注册一个全局自定义指令，该方法可以接收两个参数：指令ID和定义对象。指令ID是指令的唯一标识，定义对象是定义的指令的钩子函数
比如：
<div id="element">
<input v-ikun>
</div>
<script type="text/javascript">
//当被绑定元素插入父节点时，使元素自动获得焦点
Vue.directive('ikun',{
//当被绑定的元素插入DOM中时执行
inserted:function(el){
//使元素自动获得焦点
el.focus();
}
})
var demo = new Vue({
el: '#element'
})
</script>
用法：
Vue.directives(‘xx’,{
bind(){}, 指令与元素绑定
el代表当前使用该属性的元素，原生的dom。
obj里面的的arg参数代表用户传入的参数
inserted(){}, 指令绑定的元素挂载到父元素上
update(){}, 数据更新
unbind(){}, 指令与元素解绑
componentUndate(){} 更新完成
}
)
注册，自定义组件
Vue中可以通过Vue.component()方法来注册自定义组件。
例如，我们可以先创建一个名为"my-component"的组件：
<template>
<div>
<p>Hello, {{ name }}!</p>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
required: true
}
}
}
</script>
然后在Vue实例中注册这个组件：
Vue.component('my-component', {
template: '<div><p>Hello, {{ name }}!</p></div>',
props: {
name: {
type: String,
required: true
}
}
})
这样我们就可以在任何Vue组件中使用这个自定义组件了：
<template>
<div>
<my-component name="John"></my-component>
</div>
</template>
注意，自定义组件的名称必须是kebab-case（短横线连接）格式，即"my-component"而不是"myComponent"或"MyComponent"。
选项合并
Vue中的选项合并是指在组件中定义的选项会与其父级组件的选项合并，从而形成最终的组件选项。
Vue中的选项合并是通过Vue内部的mergeOptions函数实现的。当创建一个组件时，Vue会将组件选项与其父级组件的选项进行合并，生成最终的选项对象。如果组件选项和父级组件选项中有相同的属性，那么组件选项会覆盖父级组件选项。
例如，下面是一个示例组件的选项：
const MyComponent = {
data() {
return {
message: 'Hello Vue!'
}
},
mounted() {
console.log(this.message)
}
}
如果将这个组件作为另一个组件的子组件，并且在父级组件中也定义了一个名为message的属性，那么最终的组件选项中的message属性将会是子组件中的值，而不是父级组件中的值。
const ParentComponent = {
components: { MyComponent },
data() {
return {
message: 'Hello World!'
}
},
template: '<MyComponent />'
}
new Vue({
components: { ParentComponent },
template: '<ParentComponent />'
}).$mount('#app')
在上面的示例中，MyComponent中的message属性将会覆盖ParentComponent中的message属性。因此，mounted钩子函数中输出的内容将是"Hello Vue!"而不是"Hello World!"。
406
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
