vue脚手架
Vue脚手架
脚手架是官方提供的标准化开发工具。
下载配置
//全局安装vue的脚手架
npm install @vue/cli -g
// 在项目目录下开启一个脚手架
vue create ‘项目名’
// 进入项目目录，直接运行
npm run serve
1.
vue.js与vue.runtime.xxx.js的区别：
（1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
（2）.vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
2.因为vue,runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
render函数接收到的createElement函数去指定具体内容。脚手架里的就是精简的写法。
脚手架的默认配置
脚手架的默认配置都被默认隐藏了，想要查看需要输入命令
默认结构
脚手架文件结构：
|- node_modules
|- public
| - favicon.ico：页签图标
| - index.html：主页面
|- src
| - assets：存放静态资源
| |- logo.png
| - component：存放组件
| |- Helloworld.vue
| - App.vue：汇总所有组件
| - main.js：入口文件
|- ·gitignore：git版本管制忽略的配置
|- babel.config·js：babel的配置文件
|- package.json：应用包配置文件
|- README.md：应用描述文件
|- package-lock.json：包版本控制文件
不同版本的vue
关于不同版本的Vue：
vue.js与vue.runtime.xxx.js的区别：
（1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
（2）.vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
render函数接收到的createElement函数去指定具体内容。
vue配置文件
vue.config·js配置文件
使用vueinspect>output.js可以查看到Vue脚手架的默认配置
使用vue.config·js可以对脚手架进行个性化定制，
详情见：Home | Vue CLI (vuejs.org)
ref属性
- 被用来给元素或子组件注册引用信息（id的替代者）
- 应用在html标签上获取的是真实DoM元素，应用在组件标签上是组件实例对象（vc）
- 使用方式：
打标识：
获取：this.$refs.xxx
props配置
传值配置。
配置项props
功能：让组件接收外部传过来的数据
(1).传递数据：
(2).接收数据：
第一种方式（只接收）：
props:[‘name’]
第二种方式（限制类型）：
props:
name:Number
第三种方式（限制类型、限制必要性、指定默认值）：
props:
name:{
type:String，//类型
required：true，//必要性
default:'老王’//默认值
! 备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，
若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中
的数据。
插件和混入
在Vue中，混入（Mixins）和插件（Plugins）都是用于扩展Vue功能的机制，但它们的用途和工作方式有所不同。
混入（Mixins）
混入是一种分发可复用功能的灵活方式，允许你将可复用的功能如数据、方法、生命周期钩子等混入到组件中。混入对象可以包含组件选项，当组件使用混入时，所有混入对象的选项将被“混合”进入该组件本身的选项。
使用混入的方式：
-
局部混入：在组件中直接引入混入对象。
import myMixin from './myMixin.js'; export default { mixins: [myMixin], // ... }; -
全局混入：在应用的入口文件中使用
Vue.mixin()，这样所有的组件都会包含混入的选项。Vue.mixin({ created() { console.log('全局混入的钩子'); } });
选项合并：
当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。例如，生命周期钩子会合并为一个数组，数据对象会递归合并。
自定义选项合并策略：
可以通过Vue.config.optionMergeStrategies定义自定义选项的合并策略。
插件（Plugins）
插件通常用来为Vue添加全局功能，如添加全局方法、指令、过滤器、过渡等。一个插件可以是一个对象，提供install方法，也可以是一个安装函数。
使用插件的方式：
import Vue from 'vue';
import MyPlugin from './myPlugin';
Vue.use(MyPlugin);
开发插件：
插件应该暴露一个install方法，接收Vue构造函数和一个可选的选项对象作为参数。
const MyPlugin = {
install(Vue, options) {
// 添加全局方法或属性
Vue.myGlobalMethod = function () { /* ... */ };
// 添加全局资源
Vue.directive('my-directive', { /* ... */ });
// 注入组件选项
Vue.mixin({ /* ... */ });
// 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) { /* ... */ };
}
};
全局混入与插件的区别：
- 全局混入影响所有创建的Vue实例，而插件则不一定。
- 插件通常用于更复杂的集成，如
vue-router或vuex。
混入和插件的优缺点：
- 混入：优点是可复用性强，方便提高组件代码复用。缺点是可能导致组件依赖难以追踪。
- 插件：优点是可以提供更丰富的全局功能，缺点是可能会增加应用的复杂性。
以上信息主要参考了Vue官方文档的说明。
样式属性
可以为样式加上一个scoped作为一个作用域的css,不会对其他组件产生影响，只会在当前作用域中生效，防止冲突。
$nextTick接口
在 Vue.js 中，$nextTick 是一个全局 API，它用于在 DOM 更新完成后执行某些操作。这个函数通常用于执行那些依赖于更新后的 DOM 的操作，比如获取更新后的 DOM 元素的尺寸或位置。
$nextTick 的基本用法如下：
this.$nextTick(callback)
其中 callback 是一个在 DOM 更新完成后被调用的函数。
为什么需要 $nextTick？
Vue.js 使用异步更新队列。当对数据进行更改时，Vue 不会立即更新 DOM，而是将所有数据变化放入一个异步队列。在同一事件循环中，如果多次更改数据，Vue 将合并这些变化然后一次性更新 DOM。这提高了性能，因为它减少了实际的 DOM 操作次数。但是，这也意味着当你更改数据后立即访问 DOM，你可能会得到旧的值。
示例
假设你有一个输入框，你希望在用户输入后立即获取输入框的当前值：
<template>
<input v-model="inputValue" @input="handleInput">
template>
<script>
export default {
data() {
return {
inputValue: ''
}
},
methods: {
handleInput() {
console.log(this.inputValue); // 这里可能不会立即打印出最新的输入值
this.$nextTick(() => {
console.log(this.inputValue); // 这里会打印出最新的输入值
});
}
}
}
script>
在这个例子中，handleInput 方法在用户输入时被调用。但是，由于 Vue 的异步更新机制，this.inputValue 可能还没有更新。通过使用 $nextTick，你可以确保在 DOM 更新完成后获取最新的值。
注意事项
$nextTick接受一个回调函数，该函数将在 DOM 更新完成后被调用。- 如果在回调函数中再次更改数据，DOM 将不会立即更新，直到下一个
$nextTick周期。 - 在 Vue 3 中，
$nextTick仍然可用，但其行为略有不同，因为它使用了 Vue 3 的新的响应式系统。
$nextTick 是 Vue 开发中一个非常有用的工具，特别是在需要在 DOM 更新后立即执行操作时。