Vue学习—Vue的安装与使用

最新推荐文章于 2024-05-16 13:23:25 发布

jakiechaipush

最新推荐文章于 2024-05-16 13:23:25 发布

阅读量615

点赞数

分类专栏：前端文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/qq_43456605/article/details/127651260

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

文章目录

一.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 Document</title>
</head>

<body>
</body>
</html>

使用CDN安装

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

2.2 安装谷歌vue扩展程序

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

在这里插入图片描述

2.3 修改Vue的全局配置文件

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

在这里插入图片描述

修改配置文件内容

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

三.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>