Vue.js 学习心得总结

Vue.js是一种流行的JavaScript框架，用于构建用户界面。它是一种用于构建Web应用程序的开源框架。Vue.js通过提供可复用的组件和响应式数据绑定来简化前端开发。生态系统丰富：Vue.js拥有庞大的社区和生态系统，提供了许多第三方插件和工具，可以帮助开发者更高效地构建应用程序。这个示例中，我们创建了一个Vue实例，并将其挂载到id为"app"的元素上。Vue实例中定义了一个data属性

coke小莫

900人浏览 · 2023-12-27 14:49:13

coke小莫 · 2023-12-27 14:49:13 发布

一、认识Vue.js

Vue.js是一种流行的JavaScript框架，用于构建用户界面。它是一种用于构建Web应用程序的开源框架。Vue.js通过提供可复用的组件和响应式数据绑定来简化前端开发。

简单易学：Vue.js的API简洁明了，使得开发者能够快速上手。
组件化开发：Vue.js支持将页面划分为多个独立的组件，每个组件拥有自己的逻辑和状态，可以重复使用，便于维护和测试。
响应式更新：Vue.js使用了响应式数据绑定的概念，当数据发生变化时，页面会自动更新，减少了手动操作DOM的繁琐过程。
虚拟DOM：Vue.js通过使用虚拟DOM来优化页面渲染性能，只更新需要修改的部分，减少了对整个页面的重新渲染。
生态系统丰富：Vue.js拥有庞大的社区和生态系统，提供了许多第三方插件和工具，可以帮助开发者更高效地构建应用程序。

1.1 一个Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue实例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">改变消息</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        message: '欢迎使用Vue!'
      },
      methods: {
        changeMessage() {
          this.message = '消息已改变！';
        }
      }
    });
  </script>
</body>
</html>

这个示例中，我们创建了一个Vue实例，并将其挂载到id为"app"的元素上。Vue实例中定义了一个data属性message，初始值为"欢迎使用Vue!"。模板中使用双括号插值语法来显示message的值。

接着我们定义了一个按钮，绑定了一个点击事件changeMessage。当按钮被点击时，changeMessage方法会被调用，将message的值改为"消息已改变！"。

二、Vue实例常用到的构造选项

el：指定Vue实例挂载的元素，可以是一个CSS选择器字符串或一个DOM元素。例如：el: '#app'。
data：定义Vue实例的响应式数据。它可以是一个对象或一个返回对象的函数。例如：data: { message: 'Hello World' }。
methods：定义Vue实例的方法。可以在模板中通过v-on指令调用。例如：methods: { handleClick() { ... } }。
computed：定义计算属性。可以根据响应式数据计算出新的值，并将其作为属性暴露给模板使用。例如：computed: { fullName() { ... } }。
watch：监听响应式数据的变化，并执行相应的操作。例如：watch: { username(newVal, oldVal) { ... } }。
props：父组件向子组件传递数据时使用的属性。例如：props: ['message']。

在创建Vue实例时，必不可少的一个选项就是el。el表示唯一根标签，用于指定一个页面中已存在的DOM元素来挂载Vue实例，即通过class或id选择器将页面DOM元素与Vue实例进行绑定。el的类型可以是string，也可以是HTMLElement。

使用el 绑定DOM元素 :

<div id="app">
    {{msg}}   
</div>
<script>
     var vm = new Vue({
         el:"#app",
         data:{
              msg:"Vue实例绑定div成功！",
              },
      })
</script>

data对象（Object）的形式:

<div id="app">{{content}}</div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                content: "Mustache表达式通过data为对象获取content的值"
            }
        })
    </script>

函数（Function）的形式:

<div id="app">{{content}}</div>
    <script>
        var app = new Vue({
            el: "#app",
            // 这是下面function的简写形式
            data(){
                       return {
                            name:'张三',
                            age:18
                    }
              },
             // 另一种写法
            // data:function() {
            //     return {
            //         name: '张三',
            //         age: 18,
            //         sex: '男'
            //     }
            // },
        })
    </script>

methods方法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    1、第一步   引入vue.js
    <script src="../js/vue.js"></script>
</head>
<body>
   2、第二步
   <div id="app">
        <div>
            {{msg}}
            <p>tip:点击按钮把“旧文本”字样修改为“新文本”</p>
            <!-- v-on  可以简写为  @ -->
            <button v-on:click="btnClick">点击</button>
            <!-- 简写形式 -->
            <!-- <button @click="btnClick">点击</button> -->
        </div>
    </div>
    <script>
       3、第三步
        var app = new Vue({
            el: "#app",
            data: {
                msg: "旧文本"
            },
           // 页面的点击事件都需要放到  methods 里面
            methods:{
                btnClick(){
                    this.msg="新文本"
                }
            }
        })
    </script>
</body>
</html>

2.1 常用指令

v-bind 或简写为 ":" ：用于动态绑定属性。可以将Vue实例的数据绑定到HTML元素的属性上。例如：<img :src="imageUrl">。

<img :src="imageUrl">
<div :class="{ active: isActive }"></div>
<a :href="url" :title="tooltip">{{ text }}</a>

v-model：用于在表单元素和Vue实例的数据之间实现双向绑定。例如：<input v-model="message">。

<input v-model="message">
<textarea v-model="text"></textarea>
<select v-model="selectedOption">
  <option v-for="option in options" :value="option.value">{{ option.label }}</option>
</select>

v-if：根据表达式的值来条件性地渲染元素。当表达式为真时，元素会被渲染，否则不会被渲染。例如：<div v-if="showMessage">Hello World</div>。

<div v-if="showMessage">Hello World</div>
<template v-if="isLoading">
  <div>Loading...</div>
</template>

v-for：用于遍历数组或对象，并渲染对应的元素列表。例如：<li v-for="item in items">{{ item }}</li>。

<ul>
  <li v-for="(item, index) in items">{{ index }} - {{ item }}</li>
</ul>
<table>
  <tr v-for="user in users">
    <td>{{ user.name }}</td>
    <td>{{ user.email }}</td>
    <td>{{ user.phone }}</td>
  </tr>
</table>

v-on 或简写为 @：用于监听DOM事件，并执行相应的方法。例如：<button @click="handleClick">Click me</button>。

<button @click="handleClick">Click me</button>
<input @keydown.enter="submitForm">
<form @submit.prevent="handleSubmit">
  <!-- form fields go here -->
</form>

v-text 或简写为 {{}}：用于输出文本内容，替代元素的 textContent。例如：<span v-text="message"></span>。

<span v-text="message"></span>
<p>{{ message }}</p>

v-html：用于输出HTML代码，替代元素的 innerHTML。请谨慎使用，因为存在安全风险。例如：<div v-html="htmlContent"></div>。

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

v-show：根据表达式的值来切换元素的显示和隐藏。与 v-if 不同，v-show 仅仅通过修改 display CSS属性来控制元素的显示和隐藏。例如：<div v-show="isVisible">Visible content</div>。

<div v-show="isVisible">Visible content</div>
<div v-show="isEditable">
  <input type="text" v-model="name">
  <button @click="saveChanges">Save</button>
</div>

三、Vue项目化

3.1 脚手架的安装

首先，确保你已经安装了Node.js和npm。你可以在终端或命令提示符中运行以下命令来验证它们的安装：

概述：npm（Node.js Package Manager）是一个Node.js的包管理工具，用来解决Node.js代码部署问题，只要电脑成功安装了node，npm也会自动安装在电脑上。

可以使用命令行查看npm是否安装成功

node -v
npm -v

如果没有安装Node,可以去官网下载，如果没有VScode也可以去官网下载

使用npm全局安装Vue CLI。在终端或命令提示符中运行以下命令：--/在@vue/cli后面加上@+版本号/-- 可以控制安装的Node版本

npm install -g @vue/cli

安装完成后，你可以通过以下命令检查Vue CLI的版本：

vue -V

现在，你已成功安装了Vue CLI。接下来，你可以使用Vue CLI创建新的Vue项目。

创建一个新的Vue项目。在终端或命令提示符中导航到你想要创建项目的目录，并运行以下命令：

vue create <project-name>

<project-name>是你希望你创建的项目指定的名称，可以根据你的需求进行修改。

在创建项目时，你将被提示选择一个预设配置。你可以选择默认配置，也可以手动选择所需的特性。选择之后，等待依赖包的安装过程。

安装完成后，进入项目目录：

cd <project-name>

启动开发服务器。运行以下命令以在本地开发服务器上运行Vue应用：

npm run serve

最后，控制台会跳出http://localhost:8080（默认端口为8080）可以在浏览器查看你的Vue应用程序。再附上一张项目目录结构图：

四、组件的创建与使用

4.1了解为什么使用组件

1、方便重复使用

2、减少代码重复冗余

3、便于多人协同开发

4、有助于提高开发效率

5、提升整个项目的可维护性

使用组件可以提高代码的重用性、可维护性和可扩展性，同时也有助于团队协作和开发效率。在构建复杂的应用程序时，使用组件是一个很好的实践，为了将复杂的用户界面拆分成可重用、可维护和独立的部分。这样可以提高开发效率和代码的可维护性，同时也有助于团队协作。

4.2 定义组件：

在Vue.js中，组件可以通过Vue.component()方法或Vue.extend()方法来定义。你可以选择使用全局注册或局部注册的方式。

全局注册示例：

// 全局注册一个名为'custom-component'的组件
Vue.component('custom-component', {
  // 组件的选项和配置
  template: '<div>这是一个自定义组件</div>',
  // ...
});

局部注册示例：

// 在Vue实例的components选项中局部注册一个名为'custom-component'的组件
var app = new Vue({
  el: '#app',
  components: {
    'custom-component': {
      template: '<div>这是一个自定义组件</div>',
      // ...
    }
  }
});

4.2 使用组件：

一旦组件被注册，它可以在模板中作为自定义元素来使用。你只需在模板中使用组件的标签，并将其当作普通的HTML元素使用。

<div id="app">
  <custom-component></custom-component>
</div>

4.3 父传子组件通信：

Props（属性）：父组件可以通过props属性将数据传递给子组件。在父组件中，你可以在子组件的标签上使用属性来传递数据。在子组件中，你可以通过props接收和使用这些数据。

在父组件中：

<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentMessage: 'Hello child component!'
    };
  },
  components: {
    ChildComponent
  }
}
</script>

在子组件中：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
}
</script>

在上面的代码中，父组件通过props属性将parentMessage传递给子组件，子组件通过props接收并在模板中使用message。

4.4 子传父组件通信：

emit事件：子组件可以通过emit方法触发自定义事件，并传递数据给父组件。在父组件中，你可以监听这些自定义事件，并在事件处理程序中接收和使用数据。

在父组件中：

<template>
  <div>
    <ChildComponent @customEvent="handleCustomEvent" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  methods: {
    handleCustomEvent(data) {
      console.log(data);
    }
  },
  components: {
    ChildComponent
  }
}
</script>

在子组件中：

<template>
  <div>
    <button @click="emitCustomEvent">Click me!</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('customEvent', 'Hello parent component!');
    }
  }
}
</script>

在上面的代码中，子组件通过$emit方法触发了名为customEvent的自定义事件，并传递了数据给父组件。父组件通过监听该事件，在事件处理程序中接收并使用数据。

这些是父组件向子组件（子组件向父组件）通信的两种常见方法，你可以根据具体的需求选择适合的方式。

目前就先写到这里，后续会补上 "O.o"

AtomGit 开源协作平台测评赛

瓜分20万奖金获得内推名额丰厚实物奖励易参与易上手

更多推荐

ADS1292R 使用过程心电图高精度ADC模块

文章目录1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础1 Fundamentals ofPrecision ADC Noise Analysis 精密模数转换器噪声分析基础https://www.ti.com.cn/cn/lit/wp/slyy192/slyy192.pdf?ts=1600659610730&ref_u

开放原子开发者工作坊

实现一个家庭安防与环境监测系统（一）

开放原子开发者工作坊

【cf】Codeforces Round #774 (Div. 2) 前4题

题目A. Square Counting 简单数学题目大意题解代码B. Quality vs Quantity 排序题目大意题解代码C. Factorials and Powers of Two 状态压缩dp+位运算题目大意题解代码D. Weight the Tree 树形dp+dfs题目大意题解代码E. Power Board 看起来像是数论？许多年没打cf了，偶尔打了一盘，恢复紫名了。A. S