目录
-
Vue概念
-
Vue入门教学
-
源代码
Vue概念
在学习Vue之前，我们首先需要来了解什么是Vue，Vue.js（通常简称为Vue）是一种流行的JavaScript框架，用于构建用户界面。它是一种渐进式框架，适用于构建单页面应用程序（SPA）和复杂的前端应用程序。以下是Vue的一些特点与优势，可以简单了解一下：
-
简单易学：Vue的API设计简单明了，易于上手。即使对于初学者来说，也可以快速理解和使用Vue。
-
响应式数据绑定：Vue提供了一种响应式的数据绑定机制。只要数据发生变化，相应的DOM元素就会自动更新。这使得开发者只需关注业务逻辑，而无需手动操作DOM。
-
组件化开发：Vue以组件化的思想构建应用程序。通过将应用程序拆分为多个组件，可以提高代码的组织性和重用性。每个组件包含自己的HTML、CSS和JavaScript代码，以及对应的生命周期钩子函数。
-
指令系统：Vue提供了丰富的指令系统，使开发者可以轻松地与DOM进行交互。例如，v-if用于条件性地显示/隐藏元素，v-for用于遍历数组或对象来渲染列表，v-bind用于绑定HTML属性等。
-
虚拟DOM：Vue使用虚拟DOM来优化渲染性能。通过在内存中操作虚拟DOM，Vue可以在变化发生时，以最小的代价更新真实的DOM。
6.插件生态系统：Vue拥有丰富的插件生态系统，可以轻松地集成第三方库和工具，以满足各 种 开发需求。
Vue入门教学
Vue入门我们首先要做的就是导入vue.js包，这是Vue编程的关键，且导入是须放在head标签内
然后我们在script标签内创建一个Vue实例：
那么问题来了，我们应该如何去输出这个例子呢，这就是我们需要学的第二个知识点，也就是Vue的插值表达式：
如果只是单个输出，例如上面创建的Vue当中data的person例，可以做如下操作：
需要注意的是，文本内容必须要放在创建的div盒子标签内，否则输出的内容会不一样。
而多行输出的话，就需要运用到数组这一概念，这方面大概也都不陌生，可进行操作如下：
学完了这些，接下来需要了解到的就是单项绑定与双向绑定了
首先是通过使用v-bind指令来实现单向数据绑定。在第一个input标签中，v-bind:value="person.name"表示将person.name的值绑定到input标签的value属性上，使得输入框中显示person.name的值。同样地，在第二个input标签中，使用了简化形式的v-bind指令，即:value=“person.age”，将person.age的值绑定到input标签的value属性上。
接下来是双向数据绑定，通过使用v-model指令来实现。在第三个input标签中，v-model:value="person.name"表示将person.name的值与输入框的值进行双向绑定，当输入框的值改变时，person.name的值也会随之改变。同样地，在第四个input标签中，v-model指令被简化为:value，即:value=“person.age”，实现了双向绑定。
上述所有操作执行后运行效果如下：
源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue入门</title>
<!--引入vue.js-->
<script src="vue.min.js"></script>
</head>
<body>
<!--
插值表达式{{}}，读取vue中data的数据，应用于文本范围
v-for标签属性，用来循环遍历数组 e in arr
e是数组arr中的一个元素
v-bind：vaule 单向绑定某个元素，让属性中读取data的数据，通常简写为：value
v-model：value 双向绑定，可以读取，也可以改变data中的数据，通常简写为v_model，
只适用于表单项input标签
-->
<div id="app">
<p>大家好，我是{{person.name}} ,我今年{{person.age}} 岁了</p>
<p>
<!--可以理解为增强for循环-->
某公司的分公司地点有：
<!--{{hpList[0]}},{{hpList[1]}}-->
<ul>
<li v-for="(hp,i) in hpList">
{{hp}}--{{i}}
</li>
</ul>
<!--可以理解为循环遍历-->
普通的循环：
<ul>
<li v-for="i in 10">
{{i}}
</li>
</ul>
</p>
<h3>单向绑定</h3>
<!--:value实际上是v-bind：value，一般可以省略来写-->
<input type="text" name="" id="" v-bind:value="person.name" placeholder="请输入姓名">
<input type="text" name="" id="" :value="person.age" placeholder="请输入年龄">
<h3>双向绑定</h3>
<input type="text" name="" id="" v-model:value="person.name" placeholder="请输入姓名">
<input type="text" name="" id="" :value="person.age" placeholder="请输入年龄">
</div>
</body>
<script>
//创建vue实例
new Vue({
el:'#app',
data:{
person:{name:'曹操',age:36},
hpList:['武汉','湖南','河南','陕西']
}
})
</script>
</html>
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
