共计 4894 个字符，预计需要花费 13 分钟才能阅读完成。
图片
.vue 文件蕴含三种类型的顶级语言块 <template>、<script> 和 <style>。
一个 .vue 文件能够蕴含多个 <style> 标签, 能够在 .vue 文件中增加额定的自定义块来实现我的项目的特定需要，例如 <docs> 块 https://vue-loader.vuejs.org/…。
每个 vue 文件的根节点必须为 <template>，且这个 <template> 下只能且必须有一个根 <view> 组件。
<template>
<view>
留神必须有一个 view，且只能有一个根 view。所有内容写在这个 view 上面。</view> </template>
<script>
export default {} </script>
<style>
</style>
https://ask.dcloud.net.cn/art…
npm 全称为 Node Package Manager，是一个基于 Node.js 的包管理器，也是整个 Node.js 社区最风行、反对的第三方模块最多的包管理器。
Node.js 是一个开源和跨平台的 JavaScript 运行时环境,Node.js 在浏览器之外运行 V8 JavaScript 引擎（Google Chrome 的内核）。
webpack 是 JavaScript 打包器(module bundler)
I 组件标准
组件是视图层的根本组成单元, 组件是一个独自且可复用的功能模块的封装, 容许咱们应用小型、独立和通常可复用的组件构建大型利用。
页面是一种非凡的组件图片
1.1 组件的组成部分
每个组件，包含如下几个局部：
以组件名称为标记的开始标签和完结标签
组件内容
组件属性、组件属性值。
所有组件与属性名都是小写，单词之间以连字符 - 连贯。
1.2 公共属性列表
属性名 类型 形容 注解
id String 组件的惟一标示 个别用于获取组件上下文对象（如：VideoContext），须要放弃整个页面惟一
ref String vue 中组件的惟一标示 用来给子组件注册援用信息
class String 组件的款式类 在对应的 css 中定义的款式类
style String 组件的内联款式 能够动静设置的内联款式
hidden Boolean 组件是否暗藏 所有组件默认是显示的
data-* Any 自定义属性 组件上触发的事件时，会发送给事件处理函数
@* EventHandler 组件的事件
还有一类非凡属性以 v - 结尾，称之为 vue 指令，如 v -if、v-else、v-for、v-model。
https://uniapp.dcloud.io/tuto… 模板指令
1.3 组件中应用 js 变量
在内容区应用时，应用两个花括号来包裹，如上面的 buttonText
在属性值中应用时，属性名的后面要加冒号前缀
<template>
<view>
<button :disabled=”buttondisble” >{{buttonText}}</button>
</view>
</template>
<script>
export default {
data() {
return {
"buttonText":"按钮",
"buttondisble":false}
}
}
</script>
1.4 数据传递
子组件和父组件通信能够通过 this.$emit 将办法和数据传递给父组件。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title></title>
<script src=”vue.js” type=”text/javascript” charset=”utf-8″></script>
</head>
<body>
<div id=”app”>
<!– 监听组件的事件 –>
<button-counter title=”title1 : ” @clicknow=”clicknow”>
<h2>hi…h2</h2>
</button-counter>
<button-counter title=”title2 : “></button-counter>
</div>
<script type=”text/javascript”>
Vue.component(‘button-counter’, {// 全局注册
props: [‘title’],// 组件的属性
data: function () {
return {
count: 0}
},
template: ‘<div><h1>hi…</h1><button v-on:click=”clickfun”>{{title}} You clicked me {{count}} times.</button><slot></slot></div>’,
methods:{
clickfun : function () {
this.count ++;
this.$emit(‘clicknow’, this.count);// 通过 this.$emit 将办法和数据传递给父组件。
}
}
})
var vm = new Vue({
el : “#app”,
data : {
},
methods:{
clicknow : function (e) {// 解决组件的事件
console.log(e);
}
}
components:{// 部分注册组件
test : {
template:”<h2>h2…</h2>”
}
}
});
</script>
<style type=”text/css”>
</style>
</body>
</html>
1.5 组件的事件
事件就是在指定的条件下触发某个 js 办法。
<template>
<view>
<button @click=”goto(‘/pages/about/about’)”> 按钮 </button>
</view>
</template>
<script>
export default {
methods: {goto(url) {console.log("按钮被点击了，且传入的参数是：" + url)
}
}
}</script>
1.6 vue 组件的生命周期
beforeCreate：在实例初始化之前被调用
created：在实例创立实现后被立刻调用
beforeMount：在挂载开始之前被调用
mounted：挂载到实例下来之后调用，如果须要子组件齐全挂载之后在执行操作能够应用 $nextTick
beforeUpdate: 数据更新时调用，产生在虚构 DOM 打补丁之前
updated: 因为数据更改导致的虚构 DOM 从新渲染和打补丁，在这之后会调用该钩子
beforeDestroy: 实例销毁之前调用。
destroyed:Vue 实例销毁后调用。
https://v3.cn.vuejs.org/guide… 生命周期图示
II 组件的 data 选项和 methods 选项
2.1 组件的 data 选项
组件的 data 选项是一个函数，Vue 会在创立新组件实例的过程中调用此函数。
const app = Vue.createApp({
data() {
return {count: 4}}
})// 传递给 createApp 的选项用于配置根组件
data()返回一个对象，而后 Vue 会通过响应性零碎将其包裹起来，并以 $data 的模式存储在组件实例中。它还为外部 property 保留 _ 前缀，所以防止应用这两个字符结尾的顶级 data property 名称（该对象的任何顶级 property 也会间接通过组件实例裸露进去）。
const vm = app.mount(‘#app’)// 返回的是根组件实例
console.log(vm.$data.count) // => 4
console.log(vm.count) // => 4
2.2 methods 选项
methods 选项向组件实例增加办法，能够在模板反对 JavaScript 表达式的任何中央调用。
const app = Vue.createApp({
data() {
return {count: 4}},
methods: {
increment() {
//Vue 主动为 methods 绑定 this，`this` 指向该组件实例
this.count++
}}
})
2.3 防抖 (debounce) 和 节流(throttling)
响应跟不上触发频率的场景：鼠标挪动事件 onmousemove、滚动滚动条事件 onscroll、窗口大小扭转事件 onresize、实时查看输出（绑定 onkeyup 事件发申请），霎时的操作都会导致这些事件会被高频触发。如果事件的回调函数较为简单，就会导致响应跟不上触发，呈现页面卡顿，假死景象。
debounce 是针对响应跟不上触发频率这类问题的解决方案: 在工夫周期内，当事件疾速连续不断触发时，动作只会执行一次。但当触发间断大于咱们设定的工夫距离时，动作就会有屡次执行。
提早 debounce: 在周期完结时执行
图片
在这里插入图片形容
前缘 debounce（举荐）: 在周期开始时执行
图片
在这里插入图片形容
Vue 没有内置反对防抖和节流，能够应用 Lodash 库来实现。
<script src=”https://unpkg.com/lodash@4.17.20/lodash.min.js”></script>
在生命周期钩子 created 里增加该防抖函数, 使组件实例彼此独立，不共享雷同的防抖函数。
app.component(‘save-button’, {
created() {
// 应用 Lodash 实现防抖
this.debouncedClick = _.debounce(this.click, 500)},
unmounted() {
// 移除组件时，勾销定时器
this.debouncedClick.cancel()},
methods: {
click() {// ... 响应点击 ...}},
template: `
<button @click="debouncedClick">
Save
</button>`
})
III 计算属性
蕴含响应式数据的简单逻辑，应该应用计算属性。否则，模板不再是简略的和申明性的。
申明的形式创立了数据之间的依赖关系，更易于测试和了解。
<div id=”computed-basics” class=”demo”>
<p>Has published books:</p>
<span>{{publishedBooksMessage}}</span>
</div>
// 传递给 createApp 的选项用于配置根组件
Vue.createApp({
data() {
return {
author: {
name: 'John Doe',
books: ['Vue 2 - Advanced Guide',
'Vue 3 - Basic Guide',
'Vue 4 - The Mystery']
}
}},
computed: {
// a computed getter
publishedBooksMessage() {
// `this` points to the vm instance
return this.author.books.length > 0 ? 'Yes' : 'No'
}}
}).mount(‘#computed-basics’)// 挂载到 <div>
3.1 计算属性的缓存机制
计算属性将基于它们的响应依赖关系缓存，计算属性只会在相干响应式依赖产生扭转时从新求值。
拿下面的例子来说，只有 author.books 没有产生扭转，屡次拜访 publishedBookMessage 时计算属性会立刻返回之前的计算结果，而不用再次执行函数。
3.2 计算属性的 Setter
// …
computed: {
fullName: {
// getter
get() {return this.firstName + ' ' + this.lastName},
// setter
set(newValue) {const names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}}
}
运行 vm.fullName = ‘John Doe’ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。
IV 常见问题
4.1 如何获取上个页面传递的数据
在 onLoad 里失去，onLoad 的参数是其余页面关上以后页面所传递的数据。
