vue.js组件的基础学习_vue组件的学习-优快云博客

本文详细介绍了Vue.js的核心特性，包括组件化开发、数据双向绑定、父子组件通信、路由设置以及常用指令如v-for和v-model的应用实例，为初学者提供了入门指南。

Vue.js是一款当前非常流行的前端框架，它采用了组件化开发、数据双向绑定、虚拟DOM等技术，可以帮助我们快速构建高性能的Web应用程序。在本篇博客中，我们将会介绍Vue.js的组件化开发、父向子通信、子向父通信、路由搭建和一些指令的基本知识。

1、组件化开发

Vue.js采用了组件化开发的思想，将页面拆分为多个小组件，每个组件都有自己的HTML模板、JavaScript和CSS样式。组件之间可以嵌套、传递数据和事件，使得应用程序更加模块化、可复用和易于维护。

例：

<template>
  <div>
    <h1>{{title}}</h1>
    <my-button :text="buttonText" @click="handleClick"></my-button>
  </div>
</template>

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

export default {
  name: 'MyComponent',
  components: {
    MyButton,
  },
  data() {
    return {
      title: 'Hello Vue.js!',
      buttonText: 'Click Me',
    };
  },
  methods: {
    handleClick() {
      alert('Button Clicked!');
    },
  },
};
</script>

在这个例子中，父组件向子组件传递了一条消息，子组件将这个消息作为属性接收。当子组件中的按钮被点击时，它会触发一个名为notify的事件，并将一条数据发送给父组件。父组件中的handleNotify方法会接收到这个数据，并进行处理。

2、父组件向子组件通信

在Vue.js中，父组件可以通过属性的方式向子组件传递数据和事件。子组件可以通过props属性接收父组件传递过来的数据，通过$emit方法触发父组件的事件。例：

父组件代码：

<template>
  <div>
    <h1>Parent Component</h1>
    <child-component :message="message" @notify="handleNotify"></child-component>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: 'Hello From Parent',
    };
  },
  methods: {
    handleNotify(data) {
      console.log(`Received Data From Child: ${data}`);
    },
  },
};
</script>

子组件代码：

<template>
  <div>
    <h2>Child Component</h2>
    <button @click="handleClick">Send Message</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    message: String,
  },
  methods: {
    handleClick() {
      this.$emit('notify', 'Hello From Child');
    },
  },
};
</script>

3、子组件向父组件通信

与父向子通信相反，子组件也可以向父组件传递数据和事件。Vue.js提供了$parent和$root等特殊属性，可以访问到父组件和根组件实例。此外，Vue.js还提供了$refs属性，可以获取到子组件的引用。例：

父组件代码：

<template>
  <div>
    <h1>Parent Component</h1>
    <child-component ref="child"></child-component>
    <p>{{message}}</p>
  </div>
</template>

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

export default {
  name: 'ParentComponent',
  components: {
    ChildComponent,
  },
  data() {
    return {
      message: '',
    };
  },
  mounted() {
    const child = this.$refs.child;
    child.$on('notify', (data) => {
      this.message = data;
    });
  },
};
</script>

子组件代码：

<template>
  <div>
    <h2>Child Component</h2>
    <button @click="handleClick">Send Message</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    handleClick() {
      this.$parent.$emit('notify', 'Hello From Child');
    },
  },
};
</script>

在这个例子中，子组件中的按钮被点击时，它会通过$parent属性访问到父组件实例，并触发一个名为notify的事件，并将一条数据发送给父组件。父组件中的mounted钩子函数会在页面挂载后执行，此时可以通过$refs属性获取到子组件的引用，并通过$on方法监听子组件的事件。

4、路由搭建

在Vue.js中，路由是指根据URL路径来匹配和渲染组件的机制。Vue.js提供了vue-router库，可以方便地实现路由搭建和管理。例：

<!-- App.vue -->
<template>
  <div>
    <h1>My App</h1>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import { createRouter, createWebHistory } from 'vue-router';
import Home from './Home.vue';
import About from './About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default {
  name: 'App',
  router,
};
</script>

<!-- Home.vue -->
<template>
  <div>
    <h2>Home Page</h2>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      message: 'Welcome to My App!',
    };
  },
};
</script>

<!-- About.vue -->
<template>
  <div>
    <h2>About Page</h2>
    <p>{{message}}</p>
  </div>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {
      message: 'This is My App!',
    };
  },
};
</script>

在这个例子中，我们创建了两个页面组件Home和About，并使用vue-router库创建了一个路由实例。在App组件中，我们使用router-link组件来定义导航链接，使用router-view组件来显示当前页面组件。在路由实例中，我们定义了两个路由规则，分别匹配/和/about路径，并对应渲染对应的页面组件。这样，我们就完成了一个简单的路由搭建。

5、指令

1、v-for遍历：

遍历数组

<template>
  <div>
    <h1>Array Example</h1>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};
</script>

在这个例子中，我们有一个名为items的数组，使用v-for指令遍历数组中的每个元素，并通过:key绑定每个元素的唯一标识符。在<li>标签中，我们通过插值表达式{{ item.name }}将数组元素的name属性渲染到页面上。

2、遍历对象

<template>
  <div>
    <h1>Object Example</h1>
    <ul>
      <li v-for="(value, key) in user" :key="key">{{ key }}: {{ value }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 25,
        email: 'john@example.com',
      },
    };
  },
};
</script>

在这个例子中，我们有一个名为user的对象，使用v-for指令遍历对象中的每个属性。在<li>标签中，我们使用两个参数(value, key)分别表示属性值和属性名，并通过插值表达式{{ key }}: {{ value }}将属性名和属性值渲染到页面上。

2、v-model双向绑定：

1、文本框输入：

<template>
  <div>
    <h1>Text Input Example</h1>
    <input type="text" v-model="message">
    <p>{{ message }}</p>
  </div>
</template>

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

在这个例子中，我们有一个文本输入框，通过v-model指令将其与Vue实例中的message属性进行双向绑定。当用户在输入框中输入内容时，message属性的值会自动更新，同时在页面上显示出来。

2、单选按钮：

<template>
  <div>
    <h1>Radio Button Example</h1>
    <label>
      <input type="radio" value="option1" v-model="selectedOption">
      Option 1
    </label>
    <label>
      <input type="radio" value="option2" v-model="selectedOption">
      Option 2
    </label>
    <p>Selected Option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
    };
  },
};
</script>

在这个例子中，我们有两个单选按钮，通过v-model指令将它们与Vue实例中的selectedOption属性进行双向绑定。当用户选择其中一个选项时，selectedOption属性的值会自动更新，同时在页面上显示出来。

3、复选框

<template>
  <div>
    <h1>Checkbox Example</h1>
    <label>
      <input type="checkbox" v-model="isChecked">
      Check me
    </label>
    <p>Checked: {{ isChecked }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChecked: false,
    };
  },
};
</script>

在这个例子中，我们有一个复选框，通过v-model指令将其与Vue实例中的isChecked属性进行双向绑定。当用户勾选或取消勾选复选框时，isChecked属性的值会自动更新，同时在页面上显示出来。

Vue.js是一款非常流行的前端框架，它采用了组件化开发、数据双向绑定、虚拟DOM等技术，可以帮助我们快速构建高性能的Web应用程序。在本篇博客中，我们介绍了Vue.js的组件化开发、父向子通信、子向父通信、路由搭建和一些指令的基本知识，并提供了一些简单的示例。如果你想学习Vue.js，可以从官方文档、视频教程、博客文章等方面入手，多动手实践，不断提升自己的技能水平。