vue核心基础 [其一]数据绑定：Vue.js通过数据绑定实现了用户界面与数据模型的同步。Vue.js对于数据的操作是响

1.vue项目环境的搭建

Vue是一个 JavaScript 框架。它是一个以 JavaScript 编写的库。也是以一个 JavaScript 文件形式发布的，可通过 script 标签添加到网页中。

1.1 CDN引入

cdn引入其实就是在vue里面已经自带了的index.html文件中引入。

<script src=" https://cdn.bootcss.com/vue/2.3.3/vue.js "></script>

CDN：全称是Content Delivery Network，即内容分发网络。CDN的通俗理解就是网站加速，可以让客户端快速度访问资源。

当然除了这种方法，开发中用得最多的还是下面这种。

1.2 使用官方脚手架（vue-cli）

1.2.1 什么是vue-cli ？

vue-cli是一个基于vue.js进行快速开发的完整系统，是一个官方脚手架，可以帮助我们快速创建vue项目的工程目录，目前最新的版本为4.x。而vue-cli致力于将vue生态中的工具基础标准化。它确保了各种构建能够基于智能的默认配置即可平稳衔接，这样你就可以专注的在撰写应用上，而不必好几天纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性。

1.2.2 vue-cli安装及使用步骤

首先要在你要写vue代码的地方，创建一个大文件夹。其次在安装vue-cli的时候对node环境也是有要求的，我建议还是用官方推荐的环境也就是版本比较高的。

在我们之前创建的文件夹内，win+r打开命令提示符，cmd进入。也可以用这种方式，然后回车即可。
全局安装vue-cli

命令提示符出来之后，就可以用yarn与npm的配置指令进行下载了{yarn global add @vue-cli}或

{npm i -g @vue-cli}。

创建项目。在以往我们都是手动去创建一个文件，但在vue里面我们只需要给它指示命令就可以创建好一个文件了，并且这个文件是自带了我们所需要的依赖包的。{vue create 项目名}
等创建好项目之后，就进入项目目录，启动项目。{yarn serve} 或 {npm run serve}

1.2.3 项目目录详解

在创建好项目之后，我们会看到这样一个列表。

一级目录：

git：其实就是GitHub、码云这些分布式管理仓库。
node_modules：依赖的第三方模块
public：vue服务器的静态文件目录，只有唯一的一个[index.html]
src：我们开发的目录，也是最重要的目录，源文件让编程人员写代码的目录。
gitignore：git忽略列表
babel.config.js：es6编译配置
package-lock.json：包描述文件（记录更详细，记住当时的版本信息）
package.json：包描述文件
README.md：说明文档

二级目录：

assets：静态资源 styles images fonts
components：组件,是.vue的文件,主要是公用的小组件
views：页面级别的组件
App.vue：整个应用的顶级组件.
main.js：入口文件

备注：我们是使用vue的时候可以安装vetur插件，它可以支持vue代码高亮显示。第二个就是Vue VSCode Snippets插件，它可以更好的提高我们写代码的效率，因为新建一个vue文件时，每次都需要手打template结构、script逻辑交互、style样式。所以使用这个插件我们只需要一个vbase命令即可解决，并且还可以自行选择less、scss这些。

2.组件

2.1 什么是组件？

所谓组件：其实就是封装起来的具有独立功能的UI部件。在vue中，组件(component)是具有可复用的代码模块，它是Vue中代码组织和代码复用的核心。组件可以被看作是一个自定义元素，一个组件可以拥有自己的模板、样式、行为和数据逻辑等等。

开发者从功能的角度出发，将UI分成不同的组件，每个组件都独立封装。

整个UI是一个通过小组件构成的大组件，每个组件只关心自己部分的逻辑，彼此独立。

组件的特点：

可复用：组件封装了特定的功能，可以在不同的场景中进行复用，避免了代码重复和冗余。
可扩展：组件可以被其他组件继承或扩展，从而形成更加复杂和灵活的组件体系。
可配置：组件可以接收属性和事件，通过属性和事件可以对组件的行为进行配置和控制。

在Vue中，组件是通过Vue.components()或者{export default { components:{} }}方法来定义和注册的，每个组件都是一个Vue实例，可以在应用中通过标签的方式来使用组件。组件化开发是Vue的一大特色，它能够提高代码的复用性和可维护性，对于大型应用的开发和维护来说，是非常有帮助的。

2.2 单文件组件

一个vue文件其实就是一个单文件组件，功能逻辑独立，由template、scripts、style三部分组成。

<template>
<!--   这里是写html结构的,但是有且只能有一个根节点 -->
</template>
<script>
  // 这里就是写JS代码的,默认需要暴露出去一个实例对象
  export default {};
</script>
<style>
/*   此处为css样式 */
</style>

注意：style标签上可以通过，lang="less"选择预处理语言，但是有些需要安装对应的loader模块，也可以通过scoped，让样式私有化。

2.3 使用自定义组件

使用自定义组件分为三个步骤：

引入组件：引入一个已经写好的xxx.vue组件
注册组件：在components里面注册
使用组件：通过标签名使用。

<!-- 结构 -->
<template>
  <div id="app">
    <!-- 3. 使用组件(也可以通过单标签使用) -->
    <Hello></Hello>
 </div>
</template>

<!-- 逻辑与交互 -->
<script>
// 1. 引入组件
import Hello from "./components/Hello.vue";
export default {
  // 2. 注册组件
  components: {
    Hello // 等同于： "Hello": Hello
  }
};
</script>

<!-- 样式 -->
<style lang="less">
  
</style>

3.Mustach表达式和配置选项

3.1 data配置选项和mustach模板语法

目前template模板中的数据是写死的，然后渲染动态的数据呢？这个时候我们就需要data配置选项和mustach表达式派上用场了。

<template>
  <div>
		<!--  mustach胡须表达式，用于把data中的数据，输出到html模板中,用{{}}表示  -->
    <h1>Hello {{ userName }} !</h1>
  </div>
</template>

3.1.1 为什么data是函数而不是对象？

在Vue中，data属性不是一个简单的JavaScript对象，而是一个函数，这是因为Vue需要为每个组件实例都创建一个独立的数据对象，如果data是一个简单的对象，就会出现在多个组件实例中共享的问题，从而导致数据混乱。

因此，在Vue中，通过将data属性设置为一个函数，就能够确保每个组件实例都可以创建自己的数据对象，从而避免了数据共享的问题。具体来说，当组件实例化时，Vue就会调用这个函数，返回一个全新的数据对象，并将其作为组件实例的data属性值，从而确保每个组件实例的data属性都是一个独立的数据对象。

另外，将data设置为函数还有一个好处是能够让Vue在开发过程中更好地支持数据响应式。Vue会递归对data中的所有属性进行劫持，即为这些属性实现响应式机制，通过修改这些属性的值，就能够触发相应的组件更新，而如果data是一个简单的对象，则可能会出现劫持不全的问题，从而导致数据响应式不完整。因此，Vue要求将data设置为一个函数，以确保能够正确实现数据的响应式处理。

<script>
export default {
  // data选项用于准备动态数据，data是一个"函数",必须返回一个对象，对象中再写各种数据
  data() {
    return {
      userName: "根生"
    }
  }
};
</script>
<style lang="scss" scoped>
</style>

3.2 Mustach表达式与配置选项

表达式：{{表达式}}

注意：表达式必须能输出唯一结果，不能写if else条件等其他JavaScript代码。

3.2.1 配置选项

el：挂载dom。
data(){}：准备动态数据，必须是函数，返回一个对象。
methods:{}：函数方法
component:{ "标签名" : 引入的组件的变量名 }：注册组件

4.指令

4.1 什么是指令？

在Vue中，指令（directive）是一种特殊的标记，是写在标签上的一种自定义属性。它的作用是在模板中为特定的HTML元素提供特殊的响应式行为。Vue指令的一个重要特点就是能够将某个元素与Vue实例中的数据进行绑定，以实现数据的动态渲染和响应式更新。

指令一般由一个以"v-"开头的属性构成，例如v-bind、v-if、v-for等，其中v-bind指令用于将Vue实例中的数据动态绑定到HTML元素的特定属性上（例如显示数据、控制元素的样式、控制元素可见性等），v-if指令用于根据条件增加或删除特定的元素等。

Vue中的指令非常灵活，你可以自定义指令以满足特定的需求，例如读写非标准HTML属性、操作DOM、封装复杂的交互逻辑等。

4.2 常用指令

4.2.1 v-text 和 v-html

都可以把数据渲染到一对标签中间也就是可以渲染到页面。

****v-text：

将数据渲染到指定内容中并且是纯文本内容。它会将数据解析为纯文本，并将其插入到元素的 textContent 属性中。通常情况下，v-text 和 {{}} 语法效果相同。

****v-html：

将数据渲染为HTML代码。它会将数据解析为HTML代码，并将其插入到元素的innerHTML 属性中。需要注意的是，使用v-html可能存在安全性问题，如果插入的HTML代码中包含恶意脚本，可能会导致跨站脚本攻击（XSS）。所以在使用v-html时需要谨慎对待。

作用：

使用v-text会将 message 渲染为纯文本字符串，不会解析其中的HTML代码，而使用v-html则会将 message解析为HTML代码。

作用：页面动态数据的回显（常见： v-text直接用“{{表达式}}”替代， v-html显示富文本数据）

<div>
  <p v-text="message"></p>
  <p v-html="message"></p>
</div>

4.2.2 v-show 和 v-if

****v-show：

不会改变 DOM 的结构，只是控制元素的 CSS 属性 display，当表达式的值为 false 时，元素被隐藏，否则元素被显示，从而改变元素在界面中的可见性。当初始时，元素的显示频率较高时会使用 v-show。

v-if：

会根据表达式的值动态地向 DOM 中添加或删除元素节点，当表达式的值为true时，元素被添加到 DOM树中，否则元素从DOM树中删除，因此v-if更加适合用在需要频繁切换的情况下，例如在切换不同的页面时。不过切换时会影响我们页面的排列。

作用：

控制页面内容显示隐藏（常见：v-show显示/隐藏切换频繁，v-if显示/隐藏切换不频繁，但对隐藏安全要求较高）

<h4 v-show="bool">您输入的用户名错误</h4>
<h4 v-if="bool">您输入的用户名错误</h4>

4.2.3 v-if 和 v-else-if 和 v-else

这几个指令需要一起配合使用，逻辑和js中的条件判断语句一致，会从上往下，找到满足条件的第一个表达式，渲染该DOM(指令元素间，必须紧密相间)，并且可以根据不同的条件渲染不同的模板。

v-if：

根据条件渲染模板。如果条件为真，则渲染模板，否则不渲染。

v-else-if：

用于在多个条件中切换，必须紧跟在v-if或v-else-if后面。如果前面的条件为假，并且这个条件为真，则渲染模板，否则继续匹配下一个v-else-if指令或者v-else指令。

v-else：

如果前面的所有条件都为假，则渲染模板。

用于页面结构中的逻辑判断。（常见：根据场景的不同，制定不同的显示规则）

<template>
  <div>
    <p v-if="isA">This is A.</p>
    <p v-else-if="isB">This is B.</p>
    <p v-else>This is not A or B.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isA: true,
      isB: false
    }
  }
}
</script>

如果isA为true，则渲染模板<p>This is A.</p，如果isA为false并且isB为true，则渲染模板<p>This is B.</p>，否则渲染模板<p>This is not A or B.</p>。

需要注意的是，v-else-if和v-else 指令必须紧跟在v-if或v-else-if指令之后，否则会导致语法错误。同时，这些指令也可以通过配合使用 key 属性，实现更精细的渲染控制。

4.2.4 v-for

用来循环数组和对象

循环数组： v-for = "(item，index) in arr"

其中，item和 index都是变量名，arr是一个可迭代的数组或对象。这条指令代表了对arr的遍历，将arr中的每一项分别绑定到item变量的值上，并且可以通过index变量获取当前元素的索引位置。这些变量可以在模板中使用。

循环对象：v-for = "(item(元素的值)，健民，index(元素的索引))"

作用： 用于根据模板，批量生产显示内容。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ index }} - {{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['apple', 'banana', 'orange']
    }
  }
}
</script>

以上示例代码将会渲染一个无序列表，包含了数组list中的每个元素以及其对应的索引位置。在这个例子中，item就代表了当前遍历到的数组元素，index就代表了当前元素的索引。

需要注意的是，每个v-for都需要添加一个唯一的key属性，这个属性可以是元素的id或者是元素在当前列表中唯一的键。这个key主要用于Vue执行DOM更新时的优化，如果没有key，Vue每次更新渲染时对每个元素都会重新创建和销毁，而带上key后，Vue可以根据key判断哪些元素是需要更新的，哪些是需要重新创建的，从而优化性能。

4.2.5 v-model

v-model指令是Vue框架提供的一种双向数据绑定的语法糖，它可以在表单元素和组件中创建双向绑定。使用v-model指令可以方便地把表单元素的值绑定到Vue实例的数据属性上，并可以实现数据的双向绑定，即当数据更新时，视图也会随之更新，而当用户在视图中更新数据时，数据也会更新。也就是绑定DOM元素的value和data，value发生变化,自动修改data，反之亦然。

<input v-model="message">

在上述代码中，message是Vue实例中定义的一个数据属性，以文本框为例，v-model指令可以将文本框的值与message数据属性进行双向绑定，当用户在文本框中输入内容时，message属性的值也会随之更新，反之亦然。

v-model指令可以用在多种表单元素上，包括文本框、复选框、单选框、下拉框等，还可以自定义组件中使用。不过需要注意的是，在使用自定义组件中的v-model时，需要定义一个value属性和一个input事件来完成双向数据绑定，如：

Vue.component('my-checkbox', {
  props: ['value'],
  template: `
    <label>
      <input type="checkbox" v-bind:checked="value" v-on:change="$emit('input', $event.target.checked)">
      {{ value }}
    </label>
  `,
})

需要通过props属性传入一个value属性，表示该组件的当前值。然后在组件模板中，通过v-bind绑定value属性到表单元素中，同时在表单元素上通过v-on监听change事件，并在改事件回调中通过$emit触发input事件，同时传递更新后的值。

综上所述，v-model指令是Vue框架中非常重要的一项特性，可以方便地实现表单元素和组件数据的双向绑定，加强了数据和视图的关联，提高了开发效率。

5.事件处理

我们的知道，事件的核心有四要素，分别是事件源(html元素)，事件类型(事件名称)，事件函数(事件的回调函数)，事件对象(记录事件上下文的信息)。而在vue中一样都有的。

5.1 基础语法

语法：v-on: 事件名

v-on是Vue.js提供的一种事件监听机制，用来绑定DOM事件，响应用户输入。v-on指令可以用于监听DOM事件，如click、change、keypress等等。

基本指令如下所示：

<!-- <标签 v-on:事件类型 = "函数名"></标签> -->
<button v-on:click="handleClick">点我</button>

在上面的例子中，我们使用v-on指令监听点击事件，这里监听点击事件是绑定在按钮上的，当点击该按钮时会触发相应的事件处理函数。

当然，在实际开发中，我们还可以使用简化的语法：

<button @click="handleClick">点我</button>

@符号是v-on指令的一个简化写法。两种写法是等价的。

除了简单的绑定单一的事件处理函数外，V-on指令还提供其他功能，如：

传递参数：可以向事件处理函数传递参数，使用方式如下：

<button v-on:click="handleClick('hello', $event)">Click me</button>

事件修饰符：Vue.js提供了一些事件修饰符，用于给事件传递特定的含义。例如，.prevent用于阻止默认行为，.stop用于停止传播事件，.capture捕获事件等。例如：

<form v-on:submit.prevent="onSubmit">...</form>

在上述示例中，.prevent修饰符用于阻止默认的提交事件。

按键修饰符：针对于某些特定的键码值，Vue.js提供了按键修饰符，如.enter代表Enter键，.esc代表Esc键等等。

<input v-on:keyup.enter="submit">

在上面的例子中，我们使用了keyup事件，并且通过.enter修饰符来监听按下Enter按键。

总的来说，v-on是Vue.js中非常重要的一部分，主要用来监听DOM事件，响应用户的输入。它提供了丰富的功能，可以使我们更加高效地开发出高性能的响应式Web应用。

vue核心基础 [其一]