Vue.js是一个渐进式JavaScript框架，用于构建用户界面。它专门设计用于Web应用程序，并专注于视图层。Vue允许开发人员创建可重用的组件，并轻松管理状态和数据绑定。它还提供了一个虚拟DOM系统，用于高效地渲染和重新渲染组件。Vue以其简单易用的特点而闻名，使其成为初学者和有经验的开发人员的首选。
使用以下方法构建版本
下载 vue.esm-browser.js 这个模块文件
使用了<script type="module">，且导入了上面的js文件（详细点击这里）
<div id="app">{{ msg }}</div>
<!-- ES6基准新的特性，支持类似Python的模板开发方式 -->
<script type="module">
import { createApp } from "../vue.esm-browser.js"
createApp({
data() {
return {
msg: 'Hello Vue!'
}
}
}).mount('#app')
</script>一、创建一个 Vue 应用程序
每个 Vue 应用都是通过 createApp 函数创建一个新的应用实例
<script type="module">
import { createApp } from "../vue.esm-browser.js"
//通过 createApp 函数创建一个新的应用实例
createApp({
})应用实例必须在调用了.mount() 方法后才会渲染出来，该方法接收一个“容器”参数，可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串，createApp 里面的内容将会被渲染在容器元素里面
<div id="app"> </div>
<!-- ES6基准新的特性，支持类似Python的模板开发方式 -->
<script type="module">
import { createApp } from "../vue.esm-browser.js"
createApp({
}).mount('#app'); //将 Vue 应用程序挂载(mount) 到 app 元素上
</script>然后手写一个setup函数, 用于设置组件的响应式"数据（属性）"和"函数（方法）"等
创建一个Vue实例，并利用setup函数配置好这个实例里的数据和方法，并将需要用到的数据和方法暴露出来，供HTML调用。
<div id="app">
</div>
<script type="module">
import { createApp } from "../vue.esm-browser.js"
createApp({
setup(){
// 定义数据（属性）
let msg = "成功创建第一个Vue应用程序!";
const web = {
title: "百度一下，你就知道",
url: "www.baidu.com"
}
// 定义函数（方法）
const func = ()=> console.log("方法func被调用");
// 返回一个对象类型的数据
return { msg,
web,
func
}
}
}).mount('#app');
</script>{{ }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染
<div id="app">
<!-- 如: Vue 实例中定义一个 msg 变量, 值为 "成功创建第一个Vue应用程序!",
在模板中若使用插值表达式 {{ msg }} 则会被渲染成 "成功创建第一个Vue应用程序!" -->
<p>{{ msg }}</p>
<p>{{ web.title }}</p>
<p>{{ web.url }}</p>
<p>{{ func() }}</p>
</div>
<script type="module">
import { createApp } from "../vue.esm-browser.js"
createApp({
setup(){
// 定义数据（属性）
let msg = "成功创建第一个Vue应用程序!";
const web = {
title: "百度一下，你就知道",
url: "www.baidu.com"
}
// 定义函数（方法）
const func = ()=> console.log("方法func被调用");
// 返回一个对象类型的数据
return { msg,
web,
func
}
}
}).mount('#app');
</script>接下来需要下载一个live-server插件，我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。（实现自动刷新，架设本地服务器环境）
二、让数据变成响应式 ref 和 reactive
在Vue 3中，非响应式数据，在模板中普通变量不会自动更新，我们可以使用 ref 和 reactive 函数来将数据变成响应式。
1、ref 函数：可以将基本类型数据包装成响应式对象
//使用 {{ }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染
<div id="app">
<p>{{ msg }}</p>
</div>
<script type="module">
//导入 ref
import {createApp, ref} from "../vue.esm-browser.js"
createApp({
setup(){
// 定义数据
let msg = ref("成功创建第一个Vue应用程序!");
// 返回一个对象类型的数据
return { msg,
}
}
}).mount("#app");
</script>
在上面的例子中，使用 ref 函数将 "成功创建第一个Vue应用程序!" 包装成响应式对象 msg，然后使用 {{ }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染
2、reactive 函数：可以将对象或数组转换成响应式对象。
//使用 {{ }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染
<div id="app">
<p>{{ web.title }}</p>
<p>{{ web.url }}</p>
</div>
<script type="module">
//导入 ref
import {createApp, reactive} from "../vue.esm-browser.js"
createApp({
setup(){
// 定义数据
const web = reactive(
{
title: "百度一下，你就知道",
url: "www.baidu.com"
}
);
// 返回一个对象类型的数据
return { web,
}
}
}).mount("#app");
</script>
在上面的例子中，我们使用 reactive 函数将包含 title 和 url 属性的对象转换成响应式对象 web。我们可以直接访问和修改 web 中的属性。
ref 和 reactive 函数的不同之处在于，ref 返回的是一个包装对象，我们需要使用 .value 来访问和修改数据。而 reactive 返回的是一个原始对象，我们可以直接访问和修改其中的属性。
无论是 ref 还是 reactive，当数据发生变化时，相应的视图也会自动更新。这使得我们能够轻松地实现数据的响应性。
三、事件绑定指令 v-on
在Vue中，可以使用 v-on 指令来绑定事件处理函数。
v-on指令可以简写为@，使用方式如下：
<!-- v-on:click 表示在 button 元素上监听 click 事件 -->
<button v-on:click="edit">修改</button> <br>
<!-- @click 简写形式 -->
<button @click="edit">修改</button>上面的代码将 edit 方法绑定到 click 事件上。当按钮被点击时，edit 方法将被执行。
事件处理函数可以是一个直接的方法引用，也可以是一个内联函数。例如：
<div id="app">
<h3>{{ web.user }}</h3>
<!-- @click 简写形式 -->
<button @click="add(20, 30)">加法</button> <br>
</div>
<script type="module">
import { createApp, reactive, ref } from './vue.esm-browser.js'
createApp({
setup() {
const web = reactive({
user: 0
});
const add = (a, b) => {
web.user += a + b
}
return {
web,//响应式数据
add,//方法
}
}
}).mount("#app")
</script>
在上面的例子中，将 add 方法绑定到 click 事件上，我们通过传递 "20" 和 "30" 来调用 add 方法修改web中的user属性，并使用 {{ }} 插值表达式, 将 Vue 实例中定义的数据在视图中进行渲染
除了click事件，v-on 指令还可以绑定其他DOM事件，如keyup、keydown等(点击这里了解DOM事件) 。例如：
<!--
enter space tab 按键修饰符
keyup是在用户松开按键时才触发
keydown是在用户按下按键时立即触发
-->
回车 <input type="text" @keyup.enter="add(40, 60)"> <br>
空格 <input type="text" @keyup.space="add(20, 30)"> <br>
Tab <input type="text" @keydown.tab="add(10, 20)"> <br>
w <input type="text" @keyup.w="add(5, 10)"> <br>
四、条件渲染指令 v-show 和 v-if
条件渲染指令在Vue.js中用于控制元素的显示或隐藏，它们分别是v-show和v-if。
v-show指令根据其后表达式的真假值来控制元素的显示与隐藏。它通过修改元素的display:none实现隐藏的，当表达式为真时，元素显示，为假时，元素隐藏。例如：
<div id="app">
<h3>显示状态: {{ web.show }}</h3>
<!-- Vue处理v-show变化时，是用display:none实现隐藏的（可以通过F12检查源代码，当点击时，源码会加入display:none） -->
<p v-show="web.show">广东云浮中医药职业学院计算机学院v-show</p>
</div>
<script type="module">
import { createApp, reactive, ref } from './vue.esm-browser.js'
createApp({
setup() {
const web = reactive({ // 响应式数据
show: true, //真
});
return {
web,
}
}
}).mount("#app");
</script>
上面的代码将根据web中show属性的值来显示或隐藏<p>元素
v-if指令是真正地条件渲染。当表达式为真时，元素会被渲染到DOM中，为假时，元素会被移除。 例如：
<div id="app">
<h3>显示状态: {{ web.show }}</h3>
<!-- Vue处理v-if变化时，是通过删除节点实现隐藏的（可以通过F12检查源代码，当点击时，源码会删除节点） 。
当遇到需要频繁显示和隐藏的场景时，不是合使用v-if， 因为频繁增删节点，会导致渲染效率下降 -->
<p v-if="web.show">广东云浮中医药职业学院基础学院v-if</p>
<button @click="toggle">切换显示状态</button>
</div>
<script type="module">
import { createApp, reactive, ref } from './vue.esm-browser.js'
createApp({
setup() {
const web = reactive({ // 响应式数据
show: true
});
const toggle = () => {
web.show = !web.show; // 这个布尔变量被切换后，模板中用到的地方会自动更新，进而被v-show捕获
}
return {
web,
toggle
}
}
}).mount("#app");
</script>
v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。
相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。
总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适。
在使用 v-if 时，还可以通过使用 v-else-if 和 v-else 指令来实现条件分支。
例如： （当用户数量小于100为新网站；用户数量大于等于100，小于1000为优秀网站；用户数量大于等于1000，小于10000为资深网站；否则为超级网站）
<div id="app">
<h3>{{ web.user }}</h3>
<p v-if="web.user < 100">新网站</p>
<p v-else-if="web.user >= 100 && web.user < 1000">优秀网站</p>
<p v-else-if="web.user >= 1000 && web.user < 10000">资深网站</p>
<p v-else>超级网站</p>
<button @click="add_user">增加用户</button>
</div>
<script type="module">
import { createApp, reactive, ref } from './vue.esm-browser.js'
createApp({
setup() {
const web = reactive({ // 响应式数据
user: 50 //初始用户为50
});
const add_user = () => {
web.user += 1000;
}
return {
web,
add_user
}
}
}).mount("#app");
</script>
上面的代码展示了如何使用 v-else-if 和 v-else 来创建条件分支。根据不同的条件，会显示不同的内容。
五、遍历指令 v-for
在Vue中，使用 v-for 指令可以遍历数组或对象，根据每个元素生成相应的元素或组件。它用于数组或者对象的迭代，帮助开发者轻松地将数据渲染成列表或重复结构。
它的基本语法如下：
<div id="app">
<!-- 遍历对象的值 -->
<h4>实验1：遍历对象的值</h4>
<p v-for="value in data.user">
{{value}}
</p>
</div>
<script type="module">
import { createApp, reactive } from '../vue.esm-browser.js'
createApp({
setup() {
const data = reactive({
//数组
number: ["十", "十一", "十二"],
//对象
user: { name: "李雷", gender: "女", class:1}
});
return {
data
}
}
}).mount("#app")
</script>
其中，data.user是data中的user属性（对象），value是对象中的每个值
除了对对象的值进行遍历，v-for还支持对对象、数组的值、索引和键进行遍历，以及迭代数字。下面是一些示例：
遍历对象的值和索引（先值后索引）：
<!-- 遍历对象的值和索引。 注意：写指令时，先值后索引 -->
<h4>实验2：遍历对象的值和索引（键）。 注意：写指令时，先值后索引</h4>
<p v-for="(value, key) in data.user">
{{key}} : {{value}}
</p>
遍历数组的值和索引（先值后索引）：
<!-- 遍历数组的值和索引。 注意：写指令时，先值后索引 -->
<h4>实验3：遍历数组的值和索引。 注意：写指令时，先值后索引</h4>
<p v-for="(v, i) in data.number">
{{i}} : {{v}}
</p>上面代码中值和索引的名字可改变，但要一定注意的是写指令时，先值后索引
遍历对象的值、键和索引（先值再键后索引）：
<!-- 遍历对象的值，键和索引。 注意：写指令时，先值再键后索引 -->
<h4>实验4：遍历对象的值，键和索引。 注意：写指令时，先值再键后索引</h4>
<p v-for="(v, k, i) in data.user">
{{i}} : {{k}}: {{v}}
</p>
遍历数字：
<ul>
<li v-for="n in 10">{{ n }}</li>
</ul>
总结起来，v-for指令用于在Vue.js模板中进行循环遍历，可以对数组、对象和数字进行遍历
六、节点的动态属性 v-bind (单向绑定)
v-bind是Vue.js的指令之一，用于动态地绑定节点的属性。它可以将Vue实例的数据或计算属性绑定到节点的属性上，实现单向绑定。
v-bind的基本语法是在属性名前加上 v-bind: 或简写为 : ，后面跟上要绑定的表达式。例如：
input标签动态属性绑定
<div id="app">
<h3> 实验1：input标签动态属性绑定 v-bind:value </h3>
<input type="text" v-bind:value="web.str">
<!-- 简写形式： <input type="text" :value="web.str"> -->
</div>
<script type="module">
import { createApp, reactive } from '../vue.esm-browser.js'
createApp({
setup() {
const web = reactive({
str: "www.baidu.com"
})
return {
web
}
}
}).mount("#app")
</script>
上面的代码中，:value 是 v-bind:value 的简写形式，web.str 是一个Vue实例的数据或属性，它会在渲染时被动态地绑定到 <input> 节点的 value 属性上。
img标签动态属性绑定
<div id="app">
<h3> 实验2： img标签动态属性绑定</h3>
<img v-bind:src="web.img">
</div>
<script type="module">
import { createApp, reactive } from '../vue.esm-browser.js'
createApp({
setup() {
const web = reactive({
img: "../img_src/logo0.png"
})
return {
web
}
}
}).mount("#app")
</script>
上面的代码中，web.img 是一个Vue实例的数据或属性，它会在渲染时被动态地绑定到<img>节点的src属性上。
控制HTML标签的class中某个值是否存在
除了绑定属性值，v-bind还可以绑定动态的CSS类和内联样式。例如：
控制HTML标签的class中某个值是否存在使用 v-bind:class或 v-bind:id（通过布尔值控制该类名是否存在，进而控制CSS样式是否被选择生效）
<head>
<style>
.textColor{
color: red;
font-size: larger;
}
</style>
</head>
<body>
<div id="app">
<b v-bind:class="{textColor:web.fontStatus}" id="b1">广东云浮中医药职业学院</b>
<br><br><br>
<button v-on:click="change">修改</button>
</div>
<script type="module">
import { createApp, reactive } from '../vue.esm-browser.js'
createApp({
setup() {
const web = reactive({
fontStatus: false
})
const change = () => {
web.fontStatus = !web.fontStatus; //修改布尔变量
}
return {
web,
change
}
}
}).mount("#app")
</script>
</body>
上面的代码中，web.fontStatus 是Vue实例的数据或计算属性，根据它的布尔值来动态地控制CSS样式是否被选择生效。 fontStatus的初始值为false，所以不生效。定义了一个change方法来修改布尔变量，将 change方法绑定到 click 事件上。当按钮被点击时，change方法将被执行，此时fontStatus 的值变为true，textColor的CSS样式就被选择生效。
需要注意的是，v-bind实现的是单向绑定，也就是数据变化会导致视图更新，但视图更新不会反过来改变数据。如果需要实现双向绑定，则应该使用v-model指令。
综上所述，v-bind指令用于动态绑定节点的属性，可以绑定属性值、CSS类和内联样式。它通过将Vue实例的数据或计算属性与节点属性进行绑定，实现数据的单向绑定。
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » Vue.js基础——贼简单易懂！！（响应式 ref 和 reactive、v-on、v-show 和 v-if、v-for、v-bind）
发表评论 取消回复