Cpp五条

这个屌丝很懒，什么也没留下！

热门标签

【Vue】基础入门学习_vue入门

作者：Cpp五条 | 2024-03-20 00:21:39

踩

vue入门

文章目录

一、介绍
二、安装
三、初步使用

一、介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

返回顶部

二、安装

作为新手的我建议大家初学的时候使用如下的方式导入：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
1
2
3
4
5

或者也可以下载到本地进行读取使用！（打开src中的网址复制网页全部内容保存至.js文件中即可）

返回顶部

三、初步使用

3.1 声明式渲染

1、第一个程序

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 开发环境版本，包含了有帮助的命令行警告 从本地导入js资源-->
		<script src="static/vue.js"></script>
	</head>
	<body>
		<div id="app">          <!-- 定义div容器  -->
			{{ message }}       <!-- 模板语法：插值表达式  -->
		</div>
		<script>
			var app = new Vue({   // 创建Vue实例
				el: "#app",       // id定位到容器  --- el：挂载点
				data: {           // 指定容器数据
					message: "Hello World!"
				}
			})
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2、响应式编程

我们已经成功创建了第一个 Vue 应用！现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。

返回顶部

3、元素绑定

一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

除了文本插值，我们还可以像这样来绑定元素 attribute：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="static/vue.js"></script>
	</head>
	<body>
		<div id="app-2">
			<!-- 定义div容器  -->
			<span v-bind:title="message">
				鼠标悬停几秒钟查看此处动态绑定的提示信息！
			</span>
		</div>
		<script>
			var app2 = new Vue({
				el: "#app-2",
				data: {
					message: "页面加载于" + new Date().toLocaleString()
				}
			})
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

文本插值绑定元素
返回顶部

新东西：你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property(属性) 保持一致”。

如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = '新消息'，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

文本插值绑定元素_动态修改

返回顶部

4、术语

el 挂载点

所谓的el挂载点，一眼便可以看出是element的缩写，也就是标签元素的挂载点，通过值的书写样式可以推断出就是指定该Vue实例作用于哪个（些）标签元素。

data 数据对象

在上述的案例中，都使用模板插值表达式展示数据对象message的数据值。如下图所示，我们新建数据对象teams，并且通过插值表达式进行数据对象的数据值输出。
对于对象的属性值采用对象.属性的形式进行访问，具体的属性数据值采用对应的数据类型相应的访问形式访问。例如，在teams对象中的member属性为一个数组，我们访问其中某一个属性值就按照数组的下标形式进行访问。

返回顶部

5、疑问

1、Vue实例作用的范围？

可以看到作用在挂载点外部的标签元素并没起到作用，而挂载点及其内部的标签元素全都生效了~

2、是否可以使用其他的选择器？

不论是id选择器还是标签选择器、类选择器等其他类型的选择器，均支持。但是建议使用id选择器 — 唯一性

3、是否可以设置其他的dom元素？

可以使用其他的双标签，但是html、body标签除外（还有单标签）

返回顶部

3.2 v- 指令

在上一小节中有涉及到指令。所谓的指令就是带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute，会在渲染的 DOM 上应用特殊的响应式行为。

1、v-if 条件指令

控制切换一个元素是否显示，如果含有 seen对象并且其值为 ‘true’ 则显示当前标签下的内容，否则不显示。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="static/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app-3">
			<p v-if="seen">现在你看到我了</p>   <!-- 条件指令 -->
		</div>
		<script>
			var app = new Vue({
				el:"#app-3",
				data:{
					seen:true
				}
			})
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

返回顶部

2、v-for 循环指令

v-for 指令可以绑定数组的数据来渲染一个项目列表，v-for后的内容类似于java中的foreach语法规则。

在控制台里，输入 app4.todos.push({ text: 'learn javascript' })，你会发现列表最后添加了一个新项目。

返回顶部

3、v-on 事件绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="static/vue.js"></script>
	</head>
	<body>
		<div id="app-5">
		  <p>{{ message }}</p>
		  <button v-on:click="reverseMessage">反转消息</button>
		</div>
		<script>
			var app5 = new Vue({
				el:"#app-5",
				data:{
					message:"Hello Vue!"
				},
				methods:{ // button点击事件方法
					reverseMessage:function(){
                        // 将message数据对象数据值进行拆分反转输出 
						this.message=this.message.split("").reverse().join()
					}
				}
			})
		</script>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，我们编写的代码只需要关注逻辑层面即可。

时间绑定_消息反转

小技巧：v-on：可以使用@替代

时间绑定_消息反转@

返回顶部

4、v-model 表单输入<=>应用状态

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
<script>
    var app6 = new Vue({
        el: '#app-6',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
1
2
3
4
5
6
7
8
9
10
11
12

这里的双向绑定个人理解就是实现表单输入和应用状态之间的数据同步。如下图所示，一开始的时候我们定义message的数据为Hello Vue，在控制台中我们对message的数据值进行修改，同时修改了input表单中的数据值。

返回顶部

3.3 组件化应用构建

组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。几乎任意类型的应用界面都可以抽象为一个组件树：

Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

var app = new Vue(...)
1
2
3
4
5
6

现在我们可以用它构建另一个组件模板：

<ul>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ul>
1
2
3
4

但是这样会为每个待办项渲染同样的文本，这看起来并不炫酷。我们应该能从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 prop：

Vue.component('todo-item', {
  // todo-item 组件现在接受一个"prop"，类似于一个自定义 attribute。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})
1
2
3
4
5
6

接着，我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中，即使用v-bind 来动态传递 prop：

<div id="app-7">
  <ol>
    <!--
      现在我们为每个 todo-item 提供 todo 对象，todo 对象是变量，即其内容可以是动态的。
      我们也需要为每个组件提供一个“key”，vue会尽可能的复用之前已经存在的元素，给元素一个唯一的 
       key，该元素将不会被复用，表示该元素是独立的。
    -->
    <todo-item
      v-for="item in groceryList"   <!-- 循环 -->
      v-bind:todo="item"            <!-- 动态传递 prop => ['todo'] -->
      v-bind:key="item.id"          <!-- id 独立元素标识 -->
    ></todo-item>
  </ol>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

完整演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="static/vue.js"></script>
	</head>
	<body>
		<div id="app-7">
		  <ol>
			<todo-item 
               v-for="item in groceryList" 
               v-bind:todo="item" 
               v-bind:key="item.id"></todo-item>
		  </ol>
		</div>
		<script>
			Vue.component('todo-item', {
				props: ['todo'],
				template: '<li>{{ todo.text }}</li>'
			})
			var app7 = new Vue({
				el: '#app-7',
				data: {
					groceryList: [
						{id: 0,text: '蔬菜'},
						{id: 1,text: '奶酪'},
						{id: 2,text: '随便其它什么人吃的东西'}
					]
				}
			})
		</script>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

返回顶部

学习参考：https://cn.vuejs.org/v2/guide/
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/269299