【技术积累】Vue.js中的基础概念与语法【一】

写在前面

学习Vue之前最好有前端三驾马车的基础【HTML+CSS+JavaScript】

笔者接了一个从头开发的Vue项目，由于公司急着要，没有时间慢慢像在学校里学了，只能边学边做，现在项目雏形已经做的差不多了，因此正好以自己的方式来写笔记

笔者接项目的时候Vue零基础，前端基础也是除了div几个标签和一些常用的style就啥也不会了，以前前端基本都是靠复制粘贴的

所以学起来很痛苦，因此学习Vue之前最好有一定前端基础，Vue编程在页面布局设计上和HTML+CSS+JavaScript没有特别明显的差别

有些同学可能看了半天还学不会，大可不用担心，笔者学到第三个月刚刚入门，还得靠量变产生质变，之前学到自闭的时候还向公司请了三天假在家休息

看笔者其他博客同学们肯定也会奇怪，为什么笔者一直坚持碎片化学习，系统学习不是更好

理由很简单，同学们平时怎么涨经验的：面向csdn编程

写一个简单的Vue入门程序

<!DOCTYPE html>
<html>
<head>
<title>Vue Hello World</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>Hello {{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message: 'World'
}
});
</script>
</body>
</html>

在这个例子中，我们引用了Vue.js的CDN，然后定义了一个id为“app”的HTML元素。接着，在JavaScript中，我们定义了一个Vue实例，将它与HTML元素绑定起来，并定义了一个数据属性message，这个属性的初始值为“World”。然后，在HTML中使用双括号绑定，将message显示在<p>元素中。最后，网页将显示一行字："Hello World"。

Q1：这些代码看不懂，或者看懂了不会举一反三怎么办

笔者刚接触Vue的时候也看不懂，网上找了好些教程，基本上Vue入门都是这样的案例，拿一个html，导入一下js文件，就可以教vue了，然后看了很多课但是vue项目往往并不是这样，例如新建Vue项目，往往格式是这样的

所以笔者根据自己的学习经验直接从这里开始介绍，逐渐往回推送

Q2：Vue项目的项目结构是什么

Vue.js项目的典型结构如下：

├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   ├── components
│   ├── router
│   ├── services
│   ├── store
│   ├── views
│   ├── App.vue
│   └── main.js
├── .gitignore
├── babel.config.js
├── package-lock.json
├── package.json
└── README.md

接下来，我们逐一了解每个文件夹及文件的含义。

### node_modules

`node_modules`文件夹是存放项目的依赖和第三方库的文件夹。在安装完该项目的依赖库后，该文件夹中会自动生成相应依赖库的文件夹及文件。

### public

`public`文件夹主要是存放打包后的静态资源，例如`index.html`、`favicon.ico`等文件。其中，`index.html`是整个项目的入口文件。`Vue.js`会在该文件中挂载根组件，并将整个应用渲染到该文件中。

### src

`src`文件夹是存放项目源码的文件夹，其中包含了项目的主要逻辑。该文件夹下包含了如下几个子文件夹及文件：

- assets：存放项目需要的静态资源，如图片、样式表等；
- components：存放项目中的组件，可自定义封装不同的功能组件或公用组件；
- router：存放路由配置文件，用于控制不同路径下的页面跳转；
- services：存放项目的接口请求逻辑；
- store：存放`vuex`相关代码，即管理应用中组件之间共享的状态；
- views：存放视图组件；
- App.vue：根组件；
- main.js：入口文件。

### .gitignore

`.gitignore`文件是`git`工具的忽略文件配置文件，用于指定哪些文件或文件夹不需要加入到版本控制系统中。该文件往往会指定一些构建工具生成的文件、依赖库文件等。

### babel.config.js

`babel.config.js`文件是`babel`工具的配置文件，用于指定`babel`如何转换项目的代码。该文件中指定了哪些`babel`插件和预设以及转换后的代码的输出目标等。

### package-lock.json

`package-lock.json`文件是自动生成的`npm`依赖文件，其中保存了当前项目的依赖库列表以及依赖包的版本信息等。

### package.json

`package.json`文件也是自动生成的`npm`文件，其中包含了项目的相关信息，如项目名称、版本等。此外，还有诸如依赖库、构建命令、测试命令等相关信息。

### README.md

`README.md`文件是项目的说明文件，用于详细介绍该项目的功能、安装与使用方式、协作规范等。

Q3：HelloWorld项目在Vue项目中怎么实现

TestComponent.vue

<template>
  <div>Hello World</div>
</template>

<script setup>

</script>

<style scoped>

</style>

App.vue

<template>
<TestComponent></TestComponent>
</template>

<script setup>
import TestComponent from "@/components/TestComponent.vue";
</script>


<style scoped>

</style>

什么是Vue.js

Vue.js是一种渐进式JavaScript框架，用于构建交互式用户界面。Vue.js的设计目标是通过尽可能简单的API实现响应式数据绑定和组合视图组件。

Vue.js是一种轻量级的框架，通过提供数据和模板分离的方式以及组件化的代码结构，简化和优化了Web开发。所以构建模板组件的时候一般不写数据

它使用渐进式的方式去扩展，使得你可以使用尽量少的时候去掌握它，并逐步应用于需要更复杂的项目中。

Vue.js既可以作为一个独立的库使用，也可以用于简单的页面。这种多样化的使用方式使得Vue.js可以满足不同规模和类型的项目需求。

Vue.js的特点包括易学易用、性能卓越、灵活性强、扩展性好、生态丰富等等。

总之，Vue.js是一款功能强大、灵活性高、易于上手的JavaScript框架，可以通过其简洁的API和易于理解的文档使Web开发人员轻松构建高效、可维护、可扩展的Web应用程序。

Vue.js的基础语法是什么？

Vue.js的基础语法可以分为以下几个方面：

数据绑定：Vue.js的核心特性之一就是数据绑定。Vue.js通过数据绑定来自动更新视图，并保持视图和数据的同步。可以使用{{}}和v-bind指令在模板中绑定数据。
指令：Vue.js提供了很多指令，用于操作DOM元素。常见的指令包括v-bind、v-if、v-for等。指令可以通过v-前缀添加到普通的HTML属性中。
计算属性：计算属性是由Vue.js计算出来的属性，而不是手动设置的。计算属性可以接收其他属性或响应式数据的变化，计算并返回新的属性值。
事件处理器：Vue.js提供了v-on指令用于绑定事件处理器。事件处理器可以使用methods选项中定义的方法来处理。
生命周期：Vue.js的组件生命周期包括创建、更新、销毁等阶段。在每个阶段，Vue.js提供了不同的钩子函数，可以用来监听和处理组件状态变化。
组件：在Vue.js中，组件是可复用的Vue实例。组件可以包含自己的视图模板、数据、方法等，并可以嵌套在其他组件中使用。
模板语法：Vue.js的模板语法支持JSX和Hyperscript。可以使用JSX或Hyperscript来声明Vue组件并编写Vue模板。

Vue中的常见指令有哪些

v-bind：将数据绑定到HTML元素属性上，可以简写为“:”
v-on：绑定事件，可以简写为“@”【例如@click表示点击事件，即点一下会发生什么】
v-model：实现双向数据绑定
v-show：根据表达式的值，控制元素的显示或隐藏【相当于Java中的if】
v-if / v-else-if / v-else：根据表达式的值，条件性地渲染元素，当表达式为假时不渲染【相当于Java中的if/else if/else】
v-for：遍历一个数组或对象，生成相应的DOM元素【相当于Java中的for循环，一个组件出现几次，塞不同的数据进去】
v-text：将表达式的值作为元素的文本内容，可以简写为“{{ }}”
v-html：将表达式的值作为HTML内容输出

总之，Vue的指令非常丰富，可以很灵活地实现各种数据和视图之间的绑定关系。同时，Vue还支持自定义指令的开发，可以根据实际需求来扩展和定制指令。

v-bind

v-bind是Vue.js中的一个指令，其作用是将数据绑定到HTML元素的属性上。v-bind可以简写为“:”。

例如，我们可以将背景颜色绑定到一个data中的变量color上：

<div v-bind:style="{ backgroundColor: color }">这里的背景颜色会根据color变量的值而改变</div>

在上面的例子中，v-bind指令将style属性和一个JavaScript对象绑定在一起，这个JavaScript对象的属性名是CSS样式名，其属性值是绑定的数据color变量。

我们还可以将属性名简写为不含有参数的指令名。例如，`v-bind:title="message"` 可以简写为 `:title="message"`。

以下案例展示了v-bind的使用：

<template>
  <div>
    <p>{{ message }}</p>
    <button :disabled="!isClickable" @click="increment">点击我增加计数器值</button>
    <p>计数器值：{{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "欢迎来到我的Vue应用",
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  },
  computed: {
    isClickable() {
      return this.count < 5;
    }
  }
};
</script>

在上面的代码中，我们使用`v-bind:disabled`指令将按钮的disable属性绑定到了计算属性isClickable，当计数器值count大于等于5时，isClickable为false，按钮被禁用。在点击按钮时，计数器值会增加，绑定计数器值的文本会进行更新。

v-on

v-on是Vue.js中的一个指令，其作用是给HTML元素绑定事件。v-on可以简写为“@”。

例如，我们可以给一个按钮绑定click事件:

<button v-on:click="handleClick">点击我</button>

在上面的例子中，v-on指令绑定了click事件到handleClick方法上。当按钮被点击时，handleClick方法会被调用。

我们还可以传递事件对象和自定义参数到事件处理函数中。例如，`v-on:click="handleClick('hello', $event)"`，代表使用handleClick方法处理click事件，传入参数 'hello' 和一个事件对象 $event。

以下案例展示了v-on的使用：

<template>
  <div>
    <p>{{ message }}</p>  
    <button @click="reverseMessage">点击我反转上面的文本</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!"
    };
  },
  methods: {
    reverseMessage() {
      this.message = this.message.split('').reverse().join('')
    }
  }
};
</script>

在上面的代码中，我们使用`v-on:click`指令将按钮的click事件绑定到了reverseMessage方法上。当按钮被点击时，reverseMessage方法会被调用，反转message中的文本。

v-model

v-model是Vue.js中的一个指令，其作用是双向绑定表单元素和数据。

例如，我们可以使用v-model将input元素的value属性和data中的变量message绑定在一起：

<input v-model="message" />
<p>{{ message }}</p>

在上面的例子中，当input的值发生变化时，data中的message变量会自动更新，同时p标签中的文本也会被更新。

v-model指令通常用于处理表单元素，例如input、select和textarea。它会自动监听表单元素的input事件，并将最新的值同步到绑定的数据中，同时也会将绑定的数据同步到表单元素上。

以下案例展示了v-model的使用：

<template>
  <div>
    <input v-model="message" placeholder="请输入您的姓名" />
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    };
  }
};
</script>

在上面的代码中，我们使用v-model将input元素的value属性绑定到data中的变量message上。当用户在输入框中输入文字时，data中的message变量会自动更新，同时p标签中的文本也会被更新。

v-show

v-show是Vue.js中的一个指令，其作用是根据表达式的值，在HTML元素之间切换显示和隐藏。

例如，我们可以使用v-show根据一个变量isShow的值来显示或隐藏一段文本：

<div v-show="isShow">
  这是一个需要根据表达式值来判断是否显示的文本。
</div>
<button @click="toggleShow">点击我切换显示状态</button>

在上面的例子中，v-show指令将div元素的显示状态绑定到了一个变量isShow上。当isShow的值为true时，这个div元素会被显示，当isShow的值为false时，这个div元素会被隐藏。

我们还可以通过方法来改变isShow的值，例如定义一个toggleShow方法来切换isShow的值。

以下案例展示了v-show的使用：

<template>
  <div>
    <div v-show="isVisible">
      这是一个可以显示和隐藏的文本内容。
    </div>
    <button @click="toggleVisibility">点击我切换文本内容的显示状态</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

在上面的代码中，我们使用v-show指令将一个div元素的显示状态绑定到了一个变量isVisible上。当用户点击按钮时，toggleVisibility方法会被调用，isVisble的值会被切换，从而根据isVisible的值来控制div元素的显示和隐藏状态。

v-if / v-else-if / v-else

v-if / v-else-if / v-else 是Vue.js中的条件渲染指令，用来根据条件显示或隐藏HTML元素。

v-if指令用来判断条件是否成立，如果条件为true，则渲染元素，否则不渲染。

例如，我们可以使用v-if来判断是否显示一段文本：

<div v-if="isShow">这是一个需要根据条件是否显示的文本。</div>

在上面的例子中，v-if指令将这个div元素的渲染状态绑定到了一个变量isShow上，如果isShow的值为true，则这个div元素会被渲染，否则不会渲染。

我们还可以使用v-else-if和v-else来实现条件分支，例如：

<div v-if="score >= 90">优秀</div>
<div v-else-if="score >= 80">良好</div>
<div v-else-if="score >= 60">合格</div>
<div v-else>不及格</div>

在上面的例子中，当score变量的值大于等于90时，第一个div元素会被渲染，否则判断score的值是否大于等于80，如果大于等于80则显示第二个div元素，以此类推。如果以上条件都不成立，则显示最后一个div元素。

以下案例展示了v-if / v-else-if / v-else的使用：

<template>
  <div>
    <div v-if="isVisible">这是一个可以显示和隐藏的文本内容。</div>
    <div v-else>这个文本内容是处于被隐藏状态的。</div>
    <button @click="toggleVisibility">点击我切换文本内容的显示状态</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  },
  methods: {
    toggleVisibility() {
      this.isVisible = !this.isVisible;
    }
  }
};
</script>

在上面的代码中，我们使用v-if / v-else指令来根据isVisible的值来判断文本内容应该显示还是隐藏。当用户点击按钮时，toggleVisibility方法会被调用，从而改变isVisible的值，决定文本内容显示或隐藏。

v-for

v-for是Vue.js中的一个指令，其作用是根据一组数据循环渲染HTML元素。

例如，我们可以使用v-for指令循环渲染一个列表：

<ul>
  <li v-for="item in list">{{ item }}</li>
</ul>

在上面的例子中，v-for指令根据一个名为list的数组，循环渲染li元素。循环过程中，每次迭代都会将list数组中的元素赋值给item变量，然后渲染li元素，最终生成一个包含所有数组元素的列表。

我们还可以在v-for指令中使用索引变量：

<ul>
  <li v-for="(item, index) in list">第 {{ index + 1 }} 项：{{ item }}</li>
</ul>

在上面的例子中，我们使用了一个索引变量index，它代表了list数组中当前元素的下标，然后使用index来输出当前项的序号。

以下案例展示了v-for的使用：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in fruits" :key="index">
        {{ index + 1 }}：{{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fruits: [
        { name: "苹果", price: 5 },
        { name: "香蕉", price: 3 },
        { name: "西瓜", price: 10 }
      ]
    };
  }
};
</script>

在上面的代码中，我们使用v-for指令循环渲染li元素，并使用索引变量index来输出当前项的序号。注意，在使用v-for指令时需要添加:key属性，以便Vue.js能够跟踪数据项的变化。

v-text

v-text是Vue.js中的一个指令，其作用是将元素的textContent属性与数据的值绑定在一起。

例如，我们可以使用v-text指令将一个变量的值显示在HTML中：

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

在上面的例子中，v-text指令将这个div元素的textContent属性绑定到了一个变量message上，当message的值改变时，这个div元素的文本内容也会相应地发生改变。

另外，如果我们要在HTML中输出一个Vue.js表达式的值，也可以使用双大括号的语法：

<div>{{ message }}</div>

在上面的例子中，双大括号语法将这个div元素的textContent属性绑定到了一个表达式message上，与v-text指令的效果是一样的。

需要注意的是，双大括号语法并不会替换元素的innerHTML，而是替换textContent。如果我们需要在元素中包含HTML标签，则需要使用v-html指令。

以下案例展示了v-text的使用：

<template>
  <div>
    <div v-text="message"></div>
    <div>{{ message }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue!"
    };
  }
};
</script>

在上面的代码中，我们使用v-text指令和双大括号语法分别将一个变量message的值输出到div元素中。当message的值改变时，这个div元素的文本内容也会随之改变。

v-html

v-html是Vue.js中的一个指令，其作用是将元素的innerHTML属性与数据的值绑定在一起。

例如，我们可以使用v-html指令将一个变量的值作为HTML代码输出到HTML中：

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

在上面的例子中，v-html指令将这个div元素的innerHTML属性绑定到了一个变量message上，当message的值改变时，这个div元素的HTML内容也会相应地发生改变。

需要注意的是，使用v-html指令会带来一定的安全风险，因为它可以注入任意的HTML代码。如果我们要输出的HTML字符串来自用户输入或其他不受信任的来源，则需要对其进行特殊处理，以避免注入攻击。

以下案例展示了v-html的使用：

<template>
  <div>
    <div v-html="message"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "<strong>Hello, Vue.js!</strong>"
    };
  }
};
</script>

在上面的代码中，我们使用v-html指令将一个包含HTML标签的字符串输出到div元素中，结果会被解析为粗体样式的文本。

什么是Vue组件

Vue组件是一个Vue实例，它可以复用在不同的Vue实例中，提高代码的可维护性、可重用性和可读性。

Vue组件能够将一些 HTML、CSS 和 JS 代码封装成一个独立的、可重用的元素，并且提供了可配置的接口。

Vue组件可以通过 `.vue` 单文件组件进行创建。

下面是一个简单的Vue组件案例：

<template>
  <button @click="increment">{{ count }}</button>
</template>

<script>
export default {
  name: 'counter',
  props: {
    initialValue: {
      type: Number,
      default: 0
    }
  },
  data() {
    return { count: this.initialValue }
  },
  methods: {
    increment() {
      this.count += 1
    }
  }
}
</script>

这个案例中，定义了一个名为 `counter` 的Vue组件，它有一个初始值为0的计数器，每次点击按钮可以对计数器进行加1操作。这个组件通过 `<template>` 进行展示，通过 `<script>` 进行逻辑处理。

这个组件还有一个 `props` 属性用于父组件向子组件传递数据，这里定义了一个 `initialValue` 属性，父组件可以通过传递该属性为计数器设置初始值。

父组件可以通过以下代码使用该组件：

<template>
  <div>
    <p>Current count: {{ count }}</p>
    <counter :initialValue="10"></counter>
  </div>
</template>

<script>
import counter from './counter.vue'

export default {
  components: {
    counter
  },
  data() {
    return { count: 0 }
  }
}
</script>

在父组件中，通过 `<counter>` 标签进行调用，并且传递了 `initialValue` 属性值为10。因为 Vue 组件是可复用的，所以在同一个页面或不同的页面中都可以使用这个组件。

或者

通过`Vue.component` 函数

<!DOCTYPE html>
<html>
<head>
  <title>Hello World with Vue.js Component</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

  <!-- 使用 "greeting" 组件 -->
  <div id="app">
    <greeting></greeting>
  </div>

  <!-- 定义 "greeting" 组件 -->
  <script>
    Vue.component('greeting', {
      template: '<div>Hello World with Vue.js Component!</div>'
    })

    var app = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>

什么是组件化开发

概念

Vue.js中的组件化开发是一种将页面分解为独立可重用组件的开发方式。组件化开发允许开发者将大型应用程序分解成多个小型、可重用的组件。这些组件可以互相独立，有自己的模板、逻辑和样式。

Vue.js中的组件是有自己独立的作用域、数据、事件和生命周期钩子的。组件可以引用和嵌套在其他组件内，从而形成一个组件树。父组件可以向子组件传递数据和事件，子组件也可以通过触发事件来向上通知父组件，实现了组件之间的通信。

组件化开发使得应用程序的开发更加易于维护和扩展。每个组件都可以独立进行开发和测试，不会影响到其他组件和应用程序的运行。同时，组件之间的通信也变得更加清晰和方便，提高了代码的可读性和可维护性。

在Vue.js中，通过Vue.component()方法来注册组件，使用Vue.extend()方法来创建一个组件构造器，然后通过实例化组件构造器来创建组件实例。组件也可以进行全局注册，通过设置Vue.options.components属性实现。

案例

以一个简单的购物车页面为例，这个页面中包含了商品列表、购物车列表、结算按钮等等。在传统的开发方式下，我们可能会将整个页面作为一个整体编写，但是这样做会让代码变得非常复杂和难以维护。

而在Vue.js中采用组件化开发的方式，我们可以将整个页面拆分为多个组件，每个组件独立负责自己的部分。对于购物车页面，我们可以将其拆分为以下组件：

商品列表组件：负责展示商品信息和加入购物车按钮等。
购物车列表组件：负责展示已经加入购物车的商品列表、数量、价格等。
结算按钮组件：负责结算操作，并通知其他组件更新购物车状态。

这样拆分之后，每个组件所需要的数据、样式和逻辑都可以独立编写和维护。同时，各个组件之间通过props和事件进行数据传递和通信。

例如，在商品列表组件中，我们可以将商品信息以props的形式传递给商品项组件，然后在商品项组件内部展示商品信息和加入购物车按钮。在加入购物车按钮被点击时，商品项组件会通过触发一个自定义事件来向上通知父组件应该加入哪个商品到购物车中。

这样组件化开发使得代码结构更加清晰和易于维护，同时也提高了开发效率和代码重用率。

posted @ 2023-06-22 09:00 程序员天佑阅读(0) 评论(0) 编辑收藏举报

【技术积累】Vue.js中的基础概念与语法【一】

【技术积累】Vue.js中的基础概念与语法【一】

写在前面

写一个简单的Vue入门程序

Q1：这些代码看不懂，或者看懂了不会举一反三怎么办

Q2：Vue项目的项目结构是什么

Q3：HelloWorld项目在Vue项目中怎么实现

什么是Vue.js

Vue.js的基础语法是什么？

Vue中的常见指令有哪些

v-bind

v-on

v-model

v-show

v-if / v-else-if / v-else

v-for

v-text

v-html

什么是Vue组件

什么是组件化开发

概念

案例

羽尘（王者段位）

温馨提示

最新会员

【技术积累】Vue.js中的基础概念与语法【一】

【技术积累】Vue.js中的基础概念与语法【一】

写在前面

写一个简单的Vue入门程序

Q1：这些代码看不懂，或者看懂了不会举一反三怎么办

Q2：Vue项目的项目结构是什么

Q3：HelloWorld项目在Vue项目中怎么实现

什么是Vue.js

Vue.js的基础语法是什么？

Vue中的常见指令有哪些

v-bind

v-on

v-model

v-show

v-if / v-else-if / v-else

v-for

v-text

v-html

什么是Vue组件

什么是组件化开发

概念

案例

羽尘 （王者 段位）

温馨提示

最新会员

羽尘（王者段位）