Vue入门:
1.MVVM 模式
MVVM(Model-View-ViewModel)是一种用于构建用户界面的软件架构模式。它将用户界面分为三个部分:模型(Model)、视图(View)和视图模型(ViewModel)。模型表示应用程序的数据和业务逻辑,视图负责显示用户界面,而视图模型负责将模型中的数据转换为视图所需的格式。MVVM 模式通过数据绑定实现了视图和模型之间的双向通信,使得视图的状态和内容能够自动更新。
2.什么是 Vue.js
Vue.js 是一款流行的前端 JavaScript 框架,用于构建用户界面。它的目标是通过简单易用的 API 提供高效的视图层渲染,并实现组件化和可复用性。Vue.js 借鉴了 Angular 和 React 的优点,提供了一个轻量级的解决方案,适用于构建各种规模的应用程序。
3.Vue.is 开发环境的搭建方法
在搭建 Vue.js 开发环境时,需要准备以下工具和步骤:
-
安装 Node.js:Vue.js 是基于 Node.js 运行的,因此首先需要安装 Node.js。可以从官方网站(https://nodejs.org/)下载合适的安装包进行安装。
-
安装 Vue CLI:Vue CLI 是 Vue.js 的官方命令行工具,用于快速搭建 Vue.js 项目和管理开发环境。可以使用以下命令全局安装 Vue CLI:npm install -g @vue/cli
4.创建 Vue.js 应用
1.创建 Vue.js 应用:使用 Vue CLI 创建一个新的 Vue.js 应用非常简单。在命令行中执行以下命令:vue create my-app (其中 my-app
是你想要创建的项目名称,可以根据实际情况修改。)
-
进入项目目录:创建完成后,进入项目目录:cd my-app
-
启动开发服务器:执行以下命令启动开发服务器:npm run serve
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>
// 第一步:引入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>
常用指令
-
v-bind:用于将组件的属性与数据进行绑定,实现动态更新。例如,
v-bind:title="message"
将组件的title
属性与数据message
进行绑定,当message
发生变化时,title
也会更新。 -
v-model:用于实现表单元素与数据的双向绑定。例如,
<input v-model="message">
将输入框的值与数据message
进行双向绑定,当输入框的值发生变化时,message
也会更新。 -
v-for:用于循环渲染列表数据。例如,
<li v-for="item in list">{{ item }}</li>
将会根据数据list
循环渲染多个<li>
元素,每个元素显示一个item
。 -
v-if / v-else / v-else-if:用于条件性地渲染元素。例如,
<div v-if="show">显示内容</div>
根据show
的值决定是否渲染该<div>
元素。
事件修饰符
在Vue.js中,事件修饰符是用于修改事件的行为或特性的特殊标记。它们以点号.
的形式添加到事件监听器后面。
以下是常用的事件修饰符:
-
.stop
:阻止事件冒泡,相当于调用event.stopPropagation()
。 -
.prevent
:阻止事件的默认行为,相当于调用event.preventDefault()
。 -
.capture
:使用事件捕获模式而不是冒泡模式。 -
.self
:只有当事件在绑定事件的元素本身触发时才触发事件处理程序。 -
.once
:事件只会触发一次,然后自动移除事件监听器。 -
.passive
:告知浏览器该事件的监听器不会调用event.preventDefault()
,可以提高滚动性能。
这些修饰符可以结合使用,例如:.stop.prevent
、.capture.self
等。
下面是一个示例代码片段,展示了如何在Vue.js中使用事件修饰符:
计算监听属性
计算属性是 Vue 实例中的一个属性,用于根据已有的数据计算出新的数据,并将其缓存起来。计算属性的值会根据依赖的数据自动更新。与计算属性类似的是监听属性(watch),它用来监听指定的数据变化并执行相应的操作。
计算属性可以根据依赖的数据进行计算后得到一个新值,同时会缓存计算结果。当依赖的数据发生变化时,会重新计算新值。计算属性的定义方式如下
computed: {
// 计算属性的名称
// 返回基于依赖数据计算出的新值
computedProperty: function() {
// 计算代码
return value;
}
}
监听属性则是在依赖数据发生变化时执行特定的操作,例如发送请求等。监听属性的定义方式如下:
watch: {
// 监听的数据名称 //
当数据发生变化时执行的回调函数
watchProperty: function(newValue, oldValue) {
// 回调函数代码
}
}
需要注意的是,计算属性适合计算复杂或需要缓存的值,而监听属性则适合执行异步或副作用操作,例如异步请求、修改 DOM 等。此外,计算属性和监听属性都可以使用箭头函数简化代码。
样式绑定
在 Vue 中,可以使用 v-bind:style
或 :style
指令来进行样式绑定。下面是一些样式绑定的常见用法:
- 对象语法:可以将一个包含样式属性和值的对象作为
v-bind:style
的值。每个属性对应着样式名,每个值对应着样式值。例如:
<div v-bind:style="{ color: 'red', fontSize: '20px' }">文本内容</div>
2.数组语法:可以将多个样式对象放在一个数组中,并将该数组作为 v-bind:style
的值。数组中的样式对象会依次生效,后面的样式会覆盖前面的样式。例如:
<div v-bind:style="[styleObject1, styleObject2]">文本内容</div>
3.动态样式:可以根据 Vue 实例中的数据动态地绑定样式。可以使用计算属性或直接在模板中使用表达式来实现。例如:
<div :style="{ color: isActive ? 'red' : 'blue' }">文本内容</div>
4.内联样式对象:可以将样式对象定义在 Vue 实例的 data
或 computed
中,然后在模板中使用。例如:
<div :style="customStyle">文本内容</div>
<script> export default {
data() {
return {
customStyle: { color: 'red', fontSize: '20px' }
};
}
};
</script>
需要注意的是,在样式对象中,样式属性名需要使用驼峰命名法,例如 fontSize
,而不是 font-size
。
filter过滤器
在Vue.js中提供了一种过滤器,它可以对数据进行过滤处理,它的作用一般是用于一些常见的文本格式化,即 修饰文本,并根据过滤的条件返回需要的结果,过滤器通常由管道符"|"进行标识。
过滤器一般可以用在两个地方:双花括号{{}}或v-bind表达式中。它分为全局过滤器和局部过滤器。
当全局过滤器和局部过滤器重名时,会采用局部过滤器。
过滤器函数必须接收表达式的值 (之前的操作链的结果) 作为第一个参数。
局部过滤器示例代码:
<!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>电脑的价格:{{price|addPriceIcon}}</p>
</div>
<script>
new Vue({
el:'#app',
data:{
price:200
},
// 通过过滤器的方式在价格前面加上价格的符号
filters:{
// value就是传入的200的值
addPriceIcon(value){
return '¥'+value
}
}
})
</script>
</body>
</html>
全局过滤器示例代码:
<!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>电脑的价格:{{price|addPriceIcon}}</p>
</div>
<script>
// 通过过滤器的方式在价格前面加上价格的符号
Vue.filter('addPriceIcon', function (value) {
return '¥' + value
})
new Vue({
el: '#app',
data: {
price: 200
},
})
</script>
</body>
</html>
v-for
v-for 是 Vue.js 中用于循环渲染列表的指令。它可以遍历数组或对象,并为每个项生成相应的 DOM 元素。使用 v-for 的语法如下:
<div v-for="item in items" :key="item.id">
{{ item }}
</div>
在上面的示例中,items
是一个数组,item
是当前遍历的项,:key
是为了给每个生成的元素指定一个唯一的键值,以便 Vue.js 进行高效的更新。
你可以在 v-for 指令中使用多个参数,例如获取索引值:
<div v-for="(item, index) in items" :key="item.id">
{{ index }} - {{ item }}
</div>
这样,在模板中就可以同时访问到当前遍历的项和索引值。
除了数组,你也可以使用 v-for 遍历对象的属性:
<div v-for="(value, key) in object" :key="key">
{{ key }}: {{ value }}
</div>
在上述示例中,object
是一个对象,value
和 key
分别表示当前遍历的属性值和属性名。
总结来说,v-for 是 Vue.js 中用于循环渲染列表的指令,可以用于遍历数组或对象,并为每个项生成相应的 DOM 元素。
v-if
v-if 是 Vue.js 框架中的一个指令,用于根据条件来动态地渲染或销毁 DOM 元素。
v-if 的使用方式如下:
<template>
<div>
<p v-if="condition">条件为真时显示的内容</p>
<p v-else>条件为假时显示的内容</p>
</div>
</template>
在上述代码中,condition
是一个 Vue 实例中的数据属性,它可以是任意的 JavaScript 表达式。当 condition
为真时,会渲染并显示包含在 v-if
指令内的元素;当 condition
为假时,会销毁这些元素,或者显示包含在 v-else
指令内的元素。
需要注意的是,v-if
是惰性的,即只有在条件为真时才会创建和渲染对应的元素,而在条件为假时会将元素销毁。这样可以提高性能,但频繁地切换 v-if
的条件可能会导致不必要的 DOM 操作,影响页面性能。如果需要频繁切换条件,可以考虑使用 v-show
指令,它会通过 CSS 控制元素的显示与隐藏,不涉及 DOM 的销毁与重建。
总结起来,v-if
是用于根据条件动态渲染 DOM 元素的指令,可以根据条件的真假来显示或隐藏元素。
v-show
v-show
是 Vue 提供的一个指令,用于根据表达式的真假值来切换元素的显示与隐藏。当表达式的值为真时,元素会显示;当表达式的值为假时,元素会隐藏。
使用 v-show
的示例:
<div v-show="isVisible">显示内容</div>
在上述示例中,isVisible
是一个在 Vue 实例中定义的数据属性。当 isVisible
的值为 true
时,<div>
元素会显示;当 isVisible
的值为 false
时,<div>
元素会隐藏。
v-if与v-show的区别
相比之下,v-if
和 v-show
在功能上有一些区别:
-
v-if
是条件性地渲染元素,即在条件为真时才会创建和插入元素节点到 DOM 中;在条件为假时,元素节点会被销毁并从 DOM 中移除。适用于需要频繁切换显示状态的情况。 -
v-show
是通过修改元素的 CSS 属性来控制元素的显示与隐藏,即元素一直存在于 DOM 中,只是通过修改display
属性来切换可见性。适用于需要频繁切换可见性的情况。
选择使用哪个指令,取决于具体的需求和场景。如果需要在多次显示和隐藏之间切换,且切换频率较高,则可以使用 v-show
,因为它只会修改 CSS 属性,不需要频繁创建和销毁元素节点,性能较好。如果需要根据条件动态地创建和销毁元素节点,则可以使用 v-if
。
v-model
在Vue.js中,v-model
是一个用于双向数据绑定的指令,它能够将表单元素的值与 Vue 实例中的数据进行绑定。
v-model
指令可以用于输入框、复选框、单选框、选择框等表单元素上,通过将表单元素的值绑定到 Vue 实例的数据属性上,实现数据的双向同步。
除了基本的双向绑定外,Vue.js 还提供了一些修饰符,可以用于进一步改变 v-model
的行为。以下是常用的 v-model
修饰符:
-
.lazy
:默认情况下,在表单元素的input
事件触发时会立即更新数据。使用.lazy
修饰符后,将改为在change
事件触发时才更新数据。 -
.number
:将用户的输入转换为数值类型。 -
.trim
:自动去除用户输入的首尾空格。
这些修饰符可以单独使用,也可以组合使用。例如,v-model.lazy.number.trim
可以用于一个文本输入框,使得数据在用户输入后、失去焦点后,并且自动去除首尾空格和转换为数值类型。
以下是一个示例代码片段,展示了如何在 Vue.js 中使用 v-model
修饰符:
<template>
<div>
<input v-model="message" type="text" />
<input v-model.number="age" type="number" />
<input v-model.trim="username" type="text" />
</div>
</template>
<script> export default {
data() {
return { message: '', age: 0, username: '', };
},
};
</script>
在上述示例中,v-model
用于不同的表单元素,并且使用了不同的修饰符。message
对应一个文本输入框,age
对应一个数值输入框,username
对应一个文本输入框,分别应用了相应的修饰符。
通过使用 v-model
修饰符,您可以更灵活地控制表单元素与 Vue 实例数据之间的双向绑定行为,使得数据在不同场景下能够符合预期的处理方式。