Vue.js入门及基础特性、指令、计算属性与监听属性、Vue CLI、组件和路由详解

七安anananan

已于 2023-12-23 17:40:15 修改

阅读量223

点赞数 12

文章标签： vue.js

于 2023-12-23 17:21:21 首次发布

本文链接：https://blog.csdn.net/2301_78435164/article/details/135170027

版权

一：Vue.js入门

1.1 、Vue.js是什么

Vue.js是一种流行的JavaScript框架，用于构建用户界面和单页面应用程序。它专注于视图层，采用简洁的模板语法和响应式数据绑定机制，使得开发者可以更容易地构建交互式的Web界面。Vue.js也提供了灵活的组件系统，可以帮助开发者构建复杂的应用，并且具有良好的可扩展性。Vue.js在前端开发社区中备受欢迎，被认为是一种现代化、高效的前端开发框架。

1.2、Vue.js常用开发工具

1.谷歌浏览器（预览效果、调试代码）

2、VS Code（编写代码）

3、命令控制台（执行命令行）

1.3、Vue.js的安装使用

1、下载独立版本“直接引用” Vue.js

在HTML页面中使用Vue.js时，通过<script>标签可以“直接引入” Vue.js核心文件。代码如下所示：

<script src="vue.js"></script>

上述代码表示直接引入当前路径下的Vue.js文件，Vue.js相当于JavaScript中的一个库，

2、不下载.js文件直接使用CDN引入Vue.js

推荐一个由BootStrap中文网运作的免费开源的CDN加速服务，其地址为：

http://www.bootcdn.cn/，在HTML页面中即可完成Vue.js的引入，代码如下所示：

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script>

3、使用npm安装Vue.js框架（前期不推荐使用此方式）

若要使用npm，则需要先安装Node.js，然后使用npm（Node Package Manager）包管理工具安装。

执行命令：

npm install vue

即可安装Vue.js。

1.4、第一个Vue.js实例

<!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>
    // 第一步：引入vue.js
    <script src="../js/vue.js"></script>
  </head>
  <body>
    // 第二步：创建根节点
    <div id="app">
    </div>
    <script>
       // 第三步：初始化vue实例，绑定根节点
      var app= new Vue({
        el: "#app",
        data: {
          msg: "第一个vue实例!",
        },
      })
    </script>
  </body>
</html>

二、 Vue.js的基础特性

2.1、vue实例常用到的构造选项

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

2.2、data数据对象

data概述：data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。

var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。

data定义的数据通过插值语法(“{{}}”)绑定到DOM节点，data数据对象有以下两种写法：

1、对象（Object）的形式

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

2、函数（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>

2.3、methods方法

概述：methods用来定义Vue实例中的方法，可以通过Vue实例直接访问这些方法。在定义的方法中，this对象指向Vue实例本身。通过methods定义的方法还可以作为页面中的事件处理方法使用，一旦事件被触发，即执行相应的方法进行处理。

在methods方法中访问 data 的数据，可以直接通过 this.属性名的形式来访问，this表示Vue实例。

示例代码：

<!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>

三、常用指令

Vue.js中常用的指令有：

1、v-bind：用于绑定数据，将Vue实例中的数据绑定到HTML元素的属性上，例如：

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

2、 v-model：用于实现双向数据绑定，通常用于表单输入元素。例如：

<input v-model="message">

3、v-if / v-else：用于条件渲染，根据表达式的值来决定是否渲染某个元素。例如：

<p v-if="seen">Now you see me</p>

<p v-else>Now you don't</p>

4、v-for：用于循环渲染，根据数据源循环生成多个元素或组件。例如：

<li v-for="item in items">{{ item.text }}</li>

5、v-on：用于绑定事件监听器。例如：

<button v-on:click="doSomething">Click me</button>

6、v-show：类似于 v-if，也是用于条件渲染，但是通过控制元素的 display 属性来显示或隐藏元素。例如：

<div v-show="isShow">Hello!</div>

7、v-text：用于输出文本内容，将 Vue 实例中的数据直接输出到元素的文本内容中。例如：

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

8、v-html：与 v-text 类似，但可以输出包含 HTML 代码的内容。例如：

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

四、计算属性与监听属性

4.1、计算属性（computed）

一般我们是可以在模板内使用表达式的，但是建议只用于一些简单的运算，在执行一些复杂的运算逻辑时，一般不建议在模板中实现，这样会让模板过重难以维护。例如以下的代码：

下列代码中，{{}}插值模板中不再是简单的数据绑定，而是包含了一些逻辑处理，一般在处理这些比较复杂的逻辑处理时，Vue.js框架提倡使用计算属性来处理，在计算属性当中，可以完成各种复杂的逻辑处理，包含运算逻辑、函数调用等等，只要最终返回一个结果即可。在Vue.js框架当中，所有计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算的结果。

例如：

<!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>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{reverseMsg}}</p>
    </div>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'hello'
            },
            computed:{
                reverseMsg(){
                    return this.msg.split("").reverse().join("")
                }
            }
        })
    </script>
</body>
</html>

当一个结果受多个值影响时候就需要用到computed
最典型的例子：购物车商品结算的时候。

4.2、监听属性（watch）

Vue.js中的事件处理方法可以根据用户的需要自定义，能通过单击事件、鼠标事件等触发，但是不能自动监听当前Vue实例对象的状态的变化。为了解决上述问题，Vue.js提供了watch状态监听功能，只要监听到当前Vue实例中数据的变化，就会调用当前数据所绑定的事件处理方法。

例如：

<!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>
</head>
<style>
    .tip {
        color: red;
        font-size: 14px;
    }
</style>
<body>
    <div id="app">
        ￥<input type="text" placeholder="请输入借款金额" v-model.number="money">
        <p class="tip">{{tip}}</p>
    </div>
    <script src="../js/Vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                money: "",
                tip: ""
            },
            watch: {
                money(newVal, oldVal) {
                    if (newVal > 1000) {
                        this.tip = "单笔借款金额最高￥1000";
                    }else{
                        this.tip = "";
                    }
                }
            }
        })
    </script>
</body>
</html>

当一个值变化触发多个响应事件的时候就需要用watch
最典型的例子：搜索数据

4.3 、计算属性和方法的区别

Vue实例中的methods也可以完成计算的功能，与计算属性的作用相同。那么为什么在做计算的时候通常选择计算属性而不选择方法呢？因为计算属性是基于他的依赖缓存的，所以只有当其依赖的数据发生改变的时候，才会重新求值。这就意味着，只要依赖的数据没有发生改变，多次访问计算属性就会立即返回之前的计算结果，不必再次执行函数。而methods不同，他每调用一次就执行一次函数，所以computed 和 methods相比，computed有缓存，性能开销小。

五、使用VueCli快速构建项目

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

node -v

npm -v

如果显示了版本号，则表示已经成功安装。

2、安装 Vue Cli，在终端或命令提示符中运行以下命令：

npm install -g @vue/cli

这将全局安装 Vue Cli。

3、创建新的 Vue 项目。在终端或命令提示符中进入你希望创建项目的目录，并运行以下命令：

vue create <project-name>

替换 <project-name> 为你想要的项目名称。

4、在创建项目时，Vue CLI 会提示你选择预设配置，可以选择默认值（默认情况下，你可以使用空格键来选择/取消选择），或手动选择特定配置选项。

5、完成项目创建后，进入项目目录：

cd <project-name>

6、启动开发服务器。运行以下命令启动开发服务器：

npm run serve

这将启动一个开发服务器并编译你的项目。你可以在浏览器中访问 http://localhost:8080 查看项目运行效果。

六：组件

在 Vue.js 中，组件是可复用的 Vue 实例，可以封装一部分功能和界面，并在应用中多次使用。组件化是 Vue.js 的核心概念之一，它能够提高代码的可维护性和复用性。

要创建一个组件，你可以使用 Vue.extend() 方法或者直接使用 Vue.component() 方法。下面是一个使用 Vue.component() 创建组件的示例：

// 创建一个全局组件
Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello, Vue!'
    }
  }
})

在这个示例中，我们创建了一个名为 "my-component" 的全局组件。它有一个简单的模板，显示了一个数据属性 message 的值。

在 HTML 中使用组件的方式如下：

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

在这个示例中，我们将组件 <my-component> 插入到了 Vue 实例的根元素 #app 中。

除了全局组件外，你还可以在 Vue 实例的 components 选项中定义局部组件。例如：

var vm = new Vue({
  el: '#app',
  components: {
    'my-component': {
      template: '<div>{{ message }}</div>',
      data: function () {
        return {
          message: 'Hello, Vue!'
        }
      }
    }
  }
})

在这个示例中，我们在 Vue 实例的components选项中定义了一个局部组件 "my-component"。

无论是全局组件还是局部组件，它们都可以像普通 HTML 标签一样在模板中使用。组件也可以接收父组件传递的属性（props），从而实现更加灵活和可定制的功能。

七：路由

Vue.js 中的路由是指根据 URL 地址的不同，展示不同的页面或组件。Vue.js 路由通过 Vue Router 实现，它提供了一种简单、高效的方式来管理应用程序的路由。

要使用 Vue Router，需要先引入 Vue Router 库，并创建一个 router 实例。下面是一个简单的示例：

// 引入 Vue 和 Vue Router 库
import Vue from 'vue'
import VueRouter from 'vue-router'

// 注册 Vue Router 插件
Vue.use(VueRouter)

// 创建路由实例
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/about',
      component: About
    }
  ]
})

在这个示例中，我们首先引入了 Vue 和 Vue Router 库，并注册了 Vue Router 插件。然后，我们创建了一个路由实例，并在 routes 选项中定义了两个路由规则：

当 URL 地址为 "/" 时，使用 Home 组件进行展示

当 URL 地址为 "/about" 时，使用 About 组件进行展示

接下来，在 Vue 实例中使用这个 router 实例：

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

在这个示例中，我们将 router 实例作为 Vue 实例的一个选项，并在 components 选项中注册了 Home 和 About 组件。这样，我们就可以在模板中使用 <router-link> 标签和 <router-view> 标签来展示不同的页面或组件了。

<router-link> 标签用于在模板中生成链接，跳转到指定的路由。例如：

<!-- 在模板中生成一个链接，跳转到 "/" 路由 -->
<router-link to="/">Home</router-link>

<!-- 在模板中生成一个链接，跳转到 "/about" 路由 -->
<router-link to="/about">About</router-link>

<router-view>标签用于在模板中显示当前路由对应的组件。例如：

<!-- 在模板中显示当前路由对应的组件 -->
<router-view></router-view>

八：总结

Vue.js是一款流行的JavaScript框架，用于构建现代化的Web应用程序。它的灵活性和高效性使得开发者能够更加轻松地构建交互性强、响应迅速的应用程序。

首先，Vue.js采用了简洁的语法，易于上手和学习。它使用类似HTML的模板语法，让开发者能够更加直观地描述应用程序的结构和逻辑。同时，Vue.js还提供了丰富的指令和组件，使得开发者能够快速地构建复杂的用户界面。

其次，Vue.js支持组件化开发，将应用程序拆分成多个独立、可复用的组件。每个组件具有自己的模板、样式和逻辑，能够提高代码的可维护性和复用性。通过组合不同的组件，开发者能够构建出复杂的应用程序，并且能够方便地对各个组件进行独立的开发和测试。

另外，Vue.js采用了响应式数据绑定的机制，能够自动追踪数据的变化并更新对应的视图。开发者只需要关注数据的状态，而无需手动操作DOM元素。这种机制使得开发过程更加高效，同时也提升了应用程序的性能。

此外，Vue.js还具有一些其他的特点和优势。它支持虚拟DOM技术，通过比较前后两次状态的差异，最小化实际DOM操作，提升性能和效率。Vue.js还拥有一个活跃的社区和丰富的生态系统，提供了大量的插件、工具和第三方库，能够快速解决各种开发需求。

总结来说，Vue.js是一款灵活、高效的JavaScript框架，能够帮助开发者构建交互性强、响应迅速的现代Web应用程序。它的简洁语法、组件化开发和响应式数据绑定等特点使得开发过程更加愉快和高效。无论是小型项目还是大型企业应用，Vue.js都是一个值得考虑的选择。

以上就是小编对Vue.js知识的总结，谢谢观看！