Vue.js介绍_vue官网怎么下载-CSDN博客

选项	说明
el	唯一根标签，决定Vue实例会管理哪一个DOM节点
data	Vue实例对应的数据对象
methods	定义Vue实例的方法，可以在其他地方调用，也可以在指令中使用
computed	定义Vue实例的计算属性，可以在其他地方调用，也可以在指令中使用，本质是一个属性而不是一个函数，在调用时不用加小括号
components	定义Vue实例的子组件
filters	定义Vue实例的过滤器
watch	监听数据变化，观察和响应 Vue 实例上的数据变动

四. Vue.js常用的内置指令:

指令	描述
v-text	用于将数据绑定到元素的文本内容
v-html	用于将数据绑定到元素的innerHTML属性
v-if	用于根据条件来决定是否渲染或显示某个元素或组件
v-else	用于表示一个“否定”条件分支
v-show	用于根据表达式的真假值来控制元素的显示和隐藏
v-for	用于渲染一个数组或对象的数据为一组元素
v-on	用于绑定事件监听器
v-bind	用于动态地绑定 HTML 特性的指令
v-model	用于实现双向数据绑定的指令

v-text

使用v-text指令的语法如下：

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

v-html

使用v-html指令的语法如下：

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

v-if

使用v-if指令的语法如下：

<div v-if="condition">
  <!-- 在条件为true时渲染的内容 -->
</div>

condition是一个返回布尔值的表达式

v-else

使用v-else指令的语法如下：

<div v-if="condition">
  <!-- 条件为true时渲染的内容 -->
</div>
<div v-else>
  <!-- 条件为false时渲染的内容 -->
</div>

v-show

使用v-show指令的语法如下：

<div v-show="isShow">
  这个元素会根据isShow的值来显示或隐藏
</div>

v-for

使用v-for指令的语法如下：

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

v-on

使用v-on 指令的语法如下：

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

v-on: 可以简写@

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

v-bind

使用v-bind指令的语法如下：

<img v-bind:src="imageSrc">

v-bind可以简写为：

<img :src="imageSrc">

v-model

使用v-model指令的语法如下：

<input v-model="message">

五.Vue.js 组件

Vue.js组件是Vue.js框架中的核心概念之一，它允许开发者将页面拆分为独立且可复用的模块。组件可以封装自己的HTML模板、CSS样式和JavaScript逻辑，并通过组件间的通信实现更灵活和可维护的代码结构。

在Vue.js中，一个组件由三部分组成：模板（template）、脚本（script）和样式（style）。下面是一个最简单的组件示例：

<template>
  <div>
    <!-- 组件的HTML模板 -->
  </div>
</template>

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

<style scoped>
/* 组件的CSS样式 */
</style>

上述示例中，template标签定义了组件的HTML模板，可以在其中使用Vue.js的数据绑定和指令等功能。script标签定义了组件的JavaScript逻辑，使用export default导出一个对象，其中可以包含组件的数据、方法、生命周期钩子等。style标签定义了组件的CSS样式，可以使用普通的CSS语法。

组件可以在父组件中使用，只需在父组件的模板中使用自定义的标签名即可，如：

<template>
  <div>
    <!-- 父组件中使用自定义组件 -->
    <my-component></my-component>
  </div>
</template>

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

export default {
  components: {
    'my-component': MyComponent
  }
};
</script>

在上述示例中，父组件通过import语句导入了自定义的组件，并将其注册到components选项中，然后在模板中使用该组件的标签名。

通过组件化开发，我们可以将复杂的界面拆分为多个独立、可复用的组件，提高代码的可维护性和复用性。组件之间可以进行数据传递和通信，使得应用程序更加灵活和可扩展。

总结来说，Vue.js组件是Vue.js框架中的重要概念，允许开发者将页面拆分为独立且可复用的模块。组件由模板、脚本和样式组成，可以在父组件中使用和复用。通过组件化开发，可以提高代码的可维护性和复用性。

六.Vue.js 路由

Vue.js 路由是一个用于在 Vue.js 应用程序中实现页面导航的插件。它允许您定义应用程序的不同视图，并将其与 URL 中的特定路径关联起来。当用户导航到不同的路径时，路由可以帮助您动态切换视图，而无需重新加载整个页面。

Vue.js 路由通常通过 Vue Router 实现。使用 Vue Router，您可以将路由定义为对象或数组，并使用组件来实现每个视图。以下是一个简单的例子：

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

new Vue({
  el: '#app',
  router
})

在这个例子中，我们首先引入了 Vue.js 和 Vue Router。然后，我们定义了两个视图：Home 和 About，并将它们与路径 '/' 和 '/about' 关联起来。最后，我们将 Vue Router 实例传递给 Vue 根实例中的 router 选项。

这样，当用户访问根路径或 /about 路径时，Vue.js 将动态地渲染相应的视图组件，而无需重新加载整个页面。