介绍
Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
简单来说，其实 Vue 就是用尽量简单的 API 来实现响应的数据绑定和组合的视图组件，所以我们在实际看 Vue 的实例，就会发现它的逻辑实现方法不是传统的先有 HTML 元素，再通过 JavaScript 来操作 DOM；它恰好是反过来的，是先有 Vue 的逻辑，然后通过关键字绑定对应的 HTML 元素，并不操作实际的 DOM，而是虚拟 DOM
基础演示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
});
</script>
</body>
</html>data数据对象
简述：
data是Vue实例的数据对象，Vue.js会将data对象的属性转换为getter/setter，从而让data的属性能够响应数据变化。
var app= new Vue({data: {数据}})，Vue通过这种方式监听了data内的数据修改，因此，只要data内的数据进行变动，视图层就会同步自动刷新。
对象形式
<div id="app">{{content}}</div>
<script>
var app = new Vue({
el: "#app",
data: {
content: "Mustache表达式通过data为对象获取content的值"
}
})
</script>函数形式
<div id="app">{{content}}</div>
<script>
var app = new Vue({
el: "#app",
// 这是下面function的简写形式
data(){
return {
name:'张三',
age:25
}
},
// 另一种写法
// data:function() {
// return {
// name: '李四',
// age: 28,
// sex: '男'
// }
// },
})
</script>methods方法
在Vue.js中，methods是一个用于存放方法的对象。在Vue组件中，可以通过在methods对象中定义方法来响应用户的交互、处理事件、执行业务逻辑等操作。
以下是对Vue.js中methods的简述：
- 定义方式：在Vue组件的选项对象中，通过
methods字段定义一个包含各种方法的对象。 - 方法调用：可以在模板中通过
v-on指令绑定到用户交互事件，也可以在组件的其他方法中调用。 - 作用域：在方法中，可以通过
this关键字访问组件实例的数据和方法。 - 响应用户交互：通过将方法与DOM事件相结合，响应用户的点击、输入等操作。
- 执行业务逻辑：可以在方法中编写业务逻辑，如数据处理、计算、发送网络请求等。
- 避免直接操作DOM：在Vue.js中，推荐使用数据驱动的方式来更新视图，而不是直接操作DOM，因此
methods中的方法通常用于更新数据，而不是直接修改DOM
以下是一个简单的事例：
<body>
<div id="app">
<div>
{{msg}}
<p>tip:点击按钮把“旧文本”字样修改为“新文本”</p>
<!-- v-on 可以简写为 @ -->
<button v-on:click="btnClick">点击</button>
<!-- 简写形式 -->
<!-- <button @click="btnClick">点击</button> -->
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
msg: "旧文本"
},
// 页面的点击事件都需要放到 methods 里面
methods:{
btnClick(){
this.msg="新文本"
}
}
})
</script>
</body>常用指令
1.v-bind：用于动态绑定属性值，将组件的数据绑定到HTML元素的属性上
<div v-bind:title="message">Hover over me</div>2.v-model：实现表单元素与组件数据的双向绑定，可以在表单元素上使用该指令
<input v-model="inputValue" type="text">3.v-if/v-else：根据条件来控制元素的显示与隐藏
<div v-if="isShow">Hello Vue!</div>
<div v-else>Goodbye Vue!</div>4.v-for：用于循环渲染一组元素或对象的属性
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>5.v-on：用于监听DOM事件，执行相应的方法
<button v-on:click="handleClick">Click me</button>6.v-show：根据条件来控制元素的显示与隐藏，使用CSS的display属性
<div v-show="isShow">Hello Vue!</div>7.v-html：用于将组件的数据渲染为HTML，可以解析其中的HTML标签
<div v-html="message"></div>事件修饰符
1.stop：阻止事件冒泡
<!-- 点击按钮时，不会触发父元素的点击事件 -->
<button @click.stop="handleClick">Click me</button>2.prevent：阻止默认事件
<!-- 提交表单时，不会刷新页面 -->
<form @submit.prevent="handleSubmit">
<!-- form fields -->
<button type="submit">Submit</button>
</form>3.capture：使用事件捕获模式，即从父元素到子元素的顺序触发事件
<!-- 在捕获阶段触发点击事件 -->
<div @click.capture="handleClick">
<button>Click me</button>
</div>4.self：只有事件的目标元素自身触发时才会调用处理函数，而不是其子元素
<!-- 只有点击div元素时，才会调用handleClick方法 -->
<div @click.self="handleClick">
<button>Click me</button>
</div>5.once：只触发一次事件
<!-- 只有第一次点击按钮时，才会调用handleClick方法 -->
<button @click.once="handleClick">Click me</button>6.passive：指示浏览器不需要等待事件处理函数完成，可以立即进行滚动等操作，提升性能
<!-- 使用.passive修饰符加速滚动事件的处理 -->
<div @scroll.passive="handleScroll">
<!-- content -->
</div>这些事件修饰符可以与Vue.js的事件绑定一起使用，以增强事件处理的灵活性和功能。通过合理地使用事件修饰符，可以更好地控制事件的传播、防止默认行为，并提高应用的性能。
计算属性与监听属性
计算属性 computed
一般我们是可以在模板内使用表达式的，但是建议只用于一些简单的运算，在执行一些复杂的运算逻辑时，一般不建议在模板中实现，这样会让模板过重难以维护。例如以下的代码：
下列代码中，{{}}插值模板中不再是简单的数据绑定，而是包含了一些逻辑处理，一般在处理这些比较复杂的逻辑处理时，Vue.js框架提倡使用计算属性来处理，在计算属性当中，可以完成各种复杂的逻辑处理，包含运算逻辑、函数调用等等，只要最终返回一个结果即可。在Vue.js框架当中，所有计算属性都以函数的形式写在Vue实例的computed选项内，最终返回计算的结果。
<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>
监听属性 watch
Vue.js中的事件处理方法可以根据用户的需要自定义，能通过单击事件、鼠标事件等触发，但是不能自动监听当前Vue实例对象的状态的变化。为了解决上述问题，Vue.js提供了watch状态监听功能，只要监听到当前Vue实例中数据的变化，就会调用当前数据所绑定的事件处理方法。
<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>
组件
在Vue.js中，组件是构建用户界面的基本单元。组件可以将页面划分为一些独立的、可复用的模块，每个组件具有自己的模板、逻辑和样式。通过组合不同的组件，可以创建出复杂的应用程序。
Vue.js中的组件具有以下特点：
-
封装和复用：组件允许开发者将页面拆分为独立的功能模块，每个组件都具有自己的模板、逻辑和样式。这种封装性使得组件可以在不同的地方进行复用，提高了代码的可维护性和可复用性。
-
组件化开发：Vue.js中的组件采用了组件化开发的思想，将页面拆分为多个组件，每个组件负责自己的部分，通过组合不同的组件来构建完整的页面。这种模块化的开发方式使得项目结构更清晰，维护更便捷。
-
数据驱动：组件可以接收和管理自己的数据，在组件内部可以定义数据、计算属性和方法。Vue.js借助响应式系统，实现了数据与视图的自动同步，当数据发生变化时，相关的视图会自动更新。
-
通信与事件机制：组件之间可以通过props和events进行通信。父组件通过props向子组件传递数据，子组件通过events向父组件发送消息。这种父子组件之间的通信机制使得组件之间的交互更加灵活。
-
生命周期钩子：Vue.js中的组件具有一系列的生命周期钩子函数，可以在不同阶段执行相关的操作。例如，created、mounted、updated和destroyed等生命周期钩子函数允许开发者在组件创建、挂载、更新和销毁时执行特定的代码逻辑。
通过组件化开发，Vue.js能够提供更高效、更灵活的方式来构建用户界面。组件化开发使得代码的可维护性更强，同时也提升了开发效率和代码复用性。
使用组件的好处有很多，以下是几个主要的原因：
-
代码复用：组件可以将页面拆分为可独立复用的模块，每个组件负责自己的功能。通过在不同的页面或应用中重复使用组件，可以大大减少代码的冗余，提高代码的复用性和可维护性。
-
模块化开发：组件化开发使得项目结构更清晰、更易于理解和维护。通过将功能模块拆分为独立的组件，可以将关注点分离，降低了代码的耦合度，提高了代码的可读性和可维护性。
-
开发效率：组件化开发可以提高开发效率。一旦创建了一个组件，可以在项目中的任何地方重复使用它，而无需重复编写相同的代码。这样可以节省开发时间，并且可以快速构建出复杂的应用程序。
-
可维护性：组件具有良好的封装性，每个组件都有自己的模板、逻辑和样式，在开发过程中更容易追踪和调试问题。同时，当需要对某个功能进行修改或优化时，只需要修改对应的组件，而不会影响到其他部分，提高了代码的可维护性。
-
团队协作：在团队开发中，不同的开发者可以独立负责不同的组件开发，互不干扰。组件化开发使得团队协作更加高效，开发者可以根据需求开发、测试和维护自己负责的组件，降低了项目开发的复杂度。
总而言之，使用组件可以提高代码的复用性、可维护性和开发效率，降低代码的耦合度，使得项目结构更清晰、更易于理解和维护。在大型应用程序中尤其重要，可以帮助开发者更好地组织和管理代码。
路由插件
Vue.js中最常用的路由插件是Vue Router，它是Vue.js官方提供的路由插件，可以帮助开发者轻松地实现SPA（单页应用）的路由功能。
Vue Router提供了以下功能：
-
嵌套路由和视图：Vue Router允许嵌套多层路由，并且每个路由可以对应一个组件。这种嵌套的路由结构可以轻松地构建出复杂的应用程序。
-
路由参数：通过路由参数，可以在URL中传递参数，并且可以在组件中获取这些参数。这种方式非常适合需要根据不同的参数来渲染不同的内容的场景。
-
路由导航守卫：Vue Router提供了导航守卫，在路由跳转前、跳转后或者跳转被取消时，可以执行相应的回调函数。这种特性非常适合实现权限控制、登录验证等功能。
-
动态路由匹配：Vue Router支持动态路由匹配，可以根据不同的路由动态加载不同的组件。这种方式能够更好地实现代码复用和模块化开发。
-
编程式导航：Vue Router提供了编程式导航API，可以在JavaScript代码中进行路由跳转、参数传递等操作。这种方式非常适合在组件内部进行路由操作，实现更加灵活的交互效果。
除了Vue Router之外，还有其他的路由插件，例如vue-router-sync、vue-navigation等，它们也都提供了类似的路由功能。开发者可以根据项目需求和个人喜好选择不同的路由插件。
Axios插件
Axios 是一个基于 Promise 的 HTTP 客户端库，用于在浏览器和 Node.js 中发送 HTTP 请求。它是一个第三方库，Vue.js 并不包含在其核心库中，但是可以方便地与 Vue.js 一起使用。
Axios 提供了一种简洁、灵活且功能强大的方式来处理 HTTP 请求。它支持异步请求和响应拦截器，提供了丰富的配置选项，并且具有良好的可扩展性。
使用 Axios 可以轻松地发送各种类型的 HTTP 请求，例如 GET、POST、PUT、DELETE 等。它还支持在请求中传递参数、设置请求头、处理响应等常见的 HTTP 操作。
以下是一个使用 Axios 发送 GET 请求的示例：
import axios from 'axios';
axios.get('/api/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});在这个示例中，我们首先通过 import 语句导入了 Axios。然后，使用 axios.get() 方法发送一个 GET 请求到 "/api/data" 路径，并通过 .then() 处理成功的响应，使用 .catch() 处理错误的情况。
Axios 还可以通过配置全局默认值、创建拦截器、取消请求等功能来满足更复杂的需求。它被广泛用于 Vue.js 项目中进行与后端 API 的通信。
总结起来，Axios 是一个在 Vue.js 中常用的 HTTP 客户端库，用于发送 HTTP 请求，并提供了丰富的功能和配置选项。它简化了前端与后端之间的数据交互过程，使得开发者可以更加方便地处理网络请求。
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
