Vue.js学习总结

最新推荐文章于 2024-11-12 20:45:00 发布

matong666

最新推荐文章于 2024-11-12 20:45:00 发布

阅读量1.3k

点赞数 52

文章标签：前端框架 vue.js react.js

本文链接：https://blog.csdn.net/matong666/article/details/135290360

版权

一. Web前端开发概述

1.1 Vue.js的出现

Vue.js 诞生于 2014年，由尤雨溪开发，是一套基于前后端分离模式、用于构建用 22Web前
户界面的渐进式框架，它只关注视图层的逻辑、采用自底向上、增量式开发的设计。

1.2 Vue.js的优点

轻量级:Vue 简单、直接，所以Vue使用起来更加友好。
双向数据绑定:数据驱动视图，视图也可以驱动数据。
组件化开发:vue.js提供了非常方便且高效的组件管理来进行加载公用的模块。
指令:指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。
插件:插件用于对vue框架功能进行扩展。

1.3 第一个Vue实例

创建第一个Vue实例是学习Vue.js的重要一步。下面是一个简单的示例，演示如何创建和渲染一个Vue实例：

<!DOCTYPE html>
<html>
<head>
  <title>我的第一个Vue实例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})
</script>

</body>
</html>

二. Vue构造选项

el

Vue构造选项中的"el"是用来指定Vue实例挂载的元素，它可以是一个CSS选择器，也可以是一个DOM元素。在Vue实例被创建之后，它将会管理这个特定的DOM元素，将其作为Vue应用的根元素。

通常情况下，我们会将"el"选项设置为一个在HTML中已存在的DOM元素，以便Vue能够控制这个元素及其内部的数据和行为。当Vue实例挂载到指定的元素上后，Vue将开始监控该元素及其内部的指令、事件和数据绑定等内容，从而实现数据驱动的视图更新。

下面是一个简单的示例，演示了如何使用"el"选项将Vue实例挂载到一个具体的DOM元素上：

<div id="app">
  {{ message }}
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})
</script>

在这个示例中，我们创建了一个id为"app"的div元素，并将它作为Vue实例的挂载点。这样一来，Vue实例就会管理这个div元素，并且可以通过插值表达式{{ message }}来渲染其中的数据。

data数据对象

在Vue构造选项中，"data"是用来指定Vue实例中的数据对象。这个数据对象包含了Vue实例需要响应式地追踪和渲染的数据。

下面是一个简单的示例，演示了如何在Vue实例中使用"data"选项定义数据：

<div id="app">
  <p>{{ message }}</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})
</script>

在这个示例中，我们通过"data"选项定义了一个名为"message"的属性，并将其初始值设为’Hello, Vue!'。这样一来，Vue实例就拥有了一个响应式的数据对象，可以在模板中使用插值表达式{{ message }}来渲染这个数据。

当"message"的值发生变化时，相关的视图也会随之自动更新，这就是Vue的响应式数据绑定机制。这使得我们可以方便地管理数据和视图之间的关系，而无需手动操作DOM。

methods方法

在Vue构造选项中，"methods"用于指定Vue实例中的方法。这些方法可以在Vue实例的模板中被调用，也可以在Vue实例的其他方法中使用。

下面是一个简单的示例，演示了如何在Vue实例中使用"methods"选项定义方法：

<div id="app">
  <button v-on:click="sayHello">Say Hello</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  methods: {
    sayHello: function() {
      alert('Hello, Vue!');
    }
  }
})
</script>

在这个示例中，我们通过"methods"选项定义了一个名为"sayHello"的方法，当按钮被点击时会调用这个方法。在方法中，我们使用JavaScript的alert函数显示了一个简单的弹框消息。

computed计算属性

在Vue构造选项中，"computed"用于指定计算属性，也就是根据其他数据计算而来的属性。在实际应用中，我们经常需要根据已有的数据进行一些复杂的计算或处理，这时就可以使用"computed"选项。

下面是一个简单的示例，演示了如何在Vue实例中使用"computed"选项定义计算属性：

<div id="app">
  <p>Radius: <input v-model="radius"></p>
  <p>Area: {{ area }}</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    radius: 0
  },
  computed: {
    area: function() {
      return Math.PI * this.radius * this.radius;
    }
  }
})
</script>

在这个示例中，我们通过"data"选项定义了一个名为"radius"的属性，然后通过"computed"选项定义了一个计算属性"area"，它根据"radius"的值计算出圆的面积。在模板中，我们直接使用插值表达式{{ area }}来展示这个计算属性的值。

components

在Vue构造选项中，"components"用于注册Vue组件，使得我们可以在模板中使用这些组件。Vue组件可以帮助我们将页面拆分成独立、可复用的组件，从而提高代码的可维护性和可复用性。

下面是一个简单的示例，演示了如何在Vue实例中使用"components"选项注册组件：

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

<script>
// 定义一个名为 my-component 的组件
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

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

在这个示例中，我们通过"Vue.component"方法注册了一个名为"my-component"的组件，并指定了这个组件的模板内容。然后在Vue实例的模板中使用了这个自定义组件。

通过"components"选项，我们可以将整个应用分割成多个小的、独立的组件，在需要的时候灵活地组合和调用。这种组件化的思想非常有利于提高代码的可维护性和可读性，也方便了团队协作和开发。

<div id="app">
  <p>{{ message | capitalize }}</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'hello, vue!'
  },
  filters: {
    capitalize: function(value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
})
</script>

fiters

在Vue构造选项中，"filters"用于定义可复用的文本格式化函数，可以在模板中使用。这些过滤器可以用于格式化文本、日期、数字等数据，使得模板中的数据展示更加灵活和易读。

下面是一个简单的示例，演示了如何在Vue实例中使用"filters"选项定义过滤器：

<div id="app">
  <p>{{ message | capitalize }}</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'hello, vue!'
  },
  filters: {
    capitalize: function(value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
})
</script>

在这个示例中，我们通过"filters"选项定义了一个名为"capitalize"的过滤器，它将输入的字符串首字母大写。然后在模板中，我们使用了管道符号"|"将"message"的值传递给"capitalize"过滤器进行处理，并最终显示在页面上。

通过"filters"选项，我们可以轻松地在模板中应用各种文本格式化函数，而不必在模板中编写过多的逻辑。这样可以使得模板更加简洁和易读，也方便了对文本格式的统一管理和调整。

watch监听属性

在 Vue 构造函数中，“watch” 选项用于监视 Vue 实例中数据的变化，并在数据变化时执行相应的操作。通常情况下，“watch” 选项用于对数据变化做出响应性的处理，比如发起异步请求、执行一些额外的逻辑等。

以下是一个简单的示例，演示了如何在 Vue 实例中使用 “watch” 选项：

<div id="app">
  <p>Current count: {{ count }}</p>
  <button @click="increment">Increment</button>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  watch: {
    count: function(newValue, oldValue) {
      console.log('count changed from ' + oldValue + ' to ' + newValue);
      // 在这里可以编写数据变化时的响应逻辑，比如发起异步请求等
    }
  },
  methods: {
    increment: function() {
      this.count++;
    }
  }
});
</script>

在这个示例中，我们定义了一个名为 “count” 的数据属性，并且在 “watch” 选项中监视了这个属性。当 “count” 发生变化时，我们定义的回调函数将被触发，可以在这个回调函数中执行相应的操作。

通过使用 “watch” 选项，我们能够以声明式的方式监视数据的变化，而不需要在模板或方法中编写过多的逻辑。这样可以使得代码更加清晰和易于维护。

computed和watch的使用场景对比

computed

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

watch

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

三. Vue常用指令

（1）v-text:

v-text用来在DOM元素内部插入文本内容，该指令以文本的方式更新元素的内容，即使是HTML代码，它也只当做普通字符串处理，不会解析标签，与插值表达式作用相同。

<div id="app"	v-text="msg"></div>	
<script>
var app=new Vue({
  el: "#app",
   data:{
     msg: "Hello,v-text!"
}

})
</script>

（2）v-html:

v-html用来在DOM元素内部插入HTML代码内容。某些情况下，从服务器请求到的数据本身就是一个HTML代码，如果直接通过“{{}}”来输出，会将HTML代码也一起输出。v-html指令更新节点元素的 innerHTML ，内容按照HTML格式进行解析，并且显示对应的内容。

<divid="app"	v-html="msg"></div>	
<script>
var app=new Vue({
el: "#app", data:{
msg: "<h1>Hello,v-html! </h1>"
}

})
</script>

(3)v-bind ：指令用于实现单向动态数据绑定。

前面学习的v-text和v-html指令主要作用是将值插入到模板标签的内容当中。但是，除了标签内容需要动态来渲染外，某些标签的属性也希望动态来绑定，这时就可以使用v-bind动态绑定属性

<divid-"app" >
<input v-bind:vahue="msg"></div>
<script>
var app=ncw Vue({
el: "#app", data:{
msg: "Hello,v-bind!"
}

})
</script>

（4）v-show:是另一个条件渲染语句，用于根据条件展示元素，用法与v-if大致一样。

带有v-show的元素始终会被渲染并保留在DOM中，v-show指令使用css样式来控制元素的显示/隐藏。值得注意的是，注意，v-show不支持<template>元素，也不支持v-else。

<div id="app">
<h1 v-show="ok">Hello!</h1></div>
<script> 
  new Vue({
  el: "#app', 
  data: { 
  ok: true
  })
</script>

（5）v-for: 是Vue.js的循环语句，当需要遍历数组或对象时，常用的就是列表渲染指令v-for，它需要结合着in或者of来使用。

<div id="app">
<ul>
<li v-for="(item,index) of fruit" :key="index">
索引值index: {{index}}---每一项item: {{item}}
</1i>
</ul>
</div>
<script>
new vue({
el:"#app"，//绑定了app这个元素 data:{
fruit :["苹果","梨子","香蕉","橘子"]
}
})
</script>

（6）v-on: 指令用来绑定事件监听器。在普通元素上，v-on指令可以监听原生的DOM事件(如click、dblclick、keyup、mouseover等)。

<div id="app">
<p>{{mg}}</p >
<button v-on:click="sayHello">请单击</button>
</div>
<script>
var app=new Vue({
el: "#app", data:{
msg:"Hi"
},
methods:{
sayHello:function){
this.msg="Hello,v-on!"

</script>

(7）v-if和v-else:

v-if是Vue.js的条件语句，v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回 true 值的时候被渲染。特别注意的是，v-if所关联的是Vue.js的动态变量。

v-if的使用一般有两个场景：

1.通过条件判断展示或者隐藏某个元素或者多个元素；

2.进行视图之间的切换。

v-if

<!--使用v-if进行条件判断，条件为true则显示此标签，false则不显示-->
<div id="app">
<p v-if="seen">现在你看到我了
</p >
</div>
<script>
new Vue({
el: '#app', data: {
seen: true}})
</script>

v-else

<div id="app">
<p v-if="seen">现在你看到我了</p >
<p v-else>你看不到我了</p >
</div>
<script>
new Vue({
el: '#app', data: {
seen: true

})
</script>

(8)v-mode:l指令主要用于实现表单元素和数据的双向绑定，通常用在表单类元素上(如input、select、textarea等)。所谓双向绑定，指的就是Vue实例中的data与其渲染的DOM元素上的内容保持一致，两者无论谁被改变，另一方也会相应的同步更新为相同的数据。

<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">
<input type="text" v-model="msg"><p>文本框的内容:{{msg}}</p >/div<script>
var app = new Vue({
el: "#app", data: {
msg:""
}})
</script></body>
</html>