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 实例数据之间的双向绑定行为，使得数据在不同场景下能够符合预期的处理方式。
1455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
