Vue学习—Vue的安装与使用

文章目录

一.vue简介
- 1.1 vue概念
- 1.2 vue的特点
二.搭建vue环境
三.Hello入门案例
四.案例原理分析

一.vue简介

1.1 vue概念

vue是一套用于构建用户界面的渐进式（自底向上逐层的应用）Javascript框架

1.2 vue的特点

采用组件化（一个.vue文件就是一个组件）的模式，提高代码复用率、且让代码更好维护
声明式编码，让编码人员无需直接操作DOM，提高开发效率
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点
官网页面

二.搭建vue环境

2.1 安装vue

在HTML中

doctype html>d
<html>
<head>
<script type="text/javascript" src="vue.js">script>
<meta charset="UTF-8">
<title>Untitled Documenttitle>
head>

<body>
body>
html>
1
2
3
4
5
6
7
8
9
10
11

使用CDN安装

<script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js">script>


1
2
3

2.2 安装谷歌vue扩展程序

无法访问谷歌商店的可以网上下载以后直接拖到谷歌浏览器中

在这里插入图片描述

2.3 修改Vue的全局配置文件

vue的全局配置文件为vue.config

在这里插入图片描述

修改配置文件内容

<script type="application/javascript">
	vue.config.productionTip=false //阻止vue在启东时生成生产提升
script>
1
2
3

三.Hello入门案例

3.1 需求

生成一个div容器，容器内容为hello ()，使用vue自动生成括号里面的内容

3.2 代码

<script type="text/javascript" src="../vue/vue.js">script>
head>

	<div id="root"> 
		<h1>hello，{{name}}h1>
	div>
<script type="application/javascript">
Vue.config.productionTip=false //阻止vue在启东时生成生产提升
const vm=new Vue({
	el:'#root',  //el指定当前vue实例为哪个服务器服务，值通常为css选择器字符串
	data:{ //data用于指定数据，数据供el指定的容器使用
		name:"chailong"
	}
}) //创建vue实例，参数为一个配置对象
script>
<body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.3 实验结果

在这里插入图片描述

四.案例原理分析

创建一个vue对象，通过指定el来与相关的html容器管理（这里的容器的获取用的是css的对象选择器），然后指定的容器对象就可以使用vue对象提供的数据，Vue对象和容器只能是一一对应的关系

在这里插入图片描述

相关阅读:
结合OD和《植物大战僵尸》，实现随意过关
Linux 分区 parted 使用教程
数字化建设方案
设计模式-中介者模式-笔记
HTML5生日快乐在线网页祝福 (一场浪漫的烟花秀) HTML+CSS+JavaScript
软件设计原则（下）
前端利器躬行记（8）——VSCode插件研发
“蔚来杯“2022牛客暑期多校训练营4
网络安全进阶学习第十六课——业务逻辑漏洞介绍
人工智能第2版学习——人工智能中的逻辑1

原文地址：https://blog.csdn.net/qq_43456605/article/details/127651260