Vue学习—Vue的安装与使用

文章目录

  • 一.vue简介
    • 1.1 vue概念
    • 1.2 vue的特点
  • 二.搭建vue环境
    • 2.1 安装vue
    • 2.2 安装谷歌vue扩展程序
    • 2.3 修改Vue的全局配置文件
  • 三.Hello入门案例
    • 3.1 需求
    • 3.2 代码
    • 3.3 实验结果
  • 四.案例原理分析

一.vue简介

1.1 vue概念

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

1.2 vue的特点

  1. 采用组件化(一个.vue文件就是一个组件)的模式,提高代码复用率、且让代码更好维护
  2. 声明式编码,让编码人员无需直接操作DOM,提高开发效率
  3. 使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点
    Vue学习—Vue的安装与使用_第1张图片官网页面

二.搭建vue环境

2.1 安装vue

  1. 在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. 使用CDN安装
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>


2.2 安装谷歌vue扩展程序

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

Vue学习—Vue的安装与使用_第2张图片

2.3 修改Vue的全局配置文件

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

Vue学习—Vue的安装与使用_第3张图片

修改配置文件内容

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

3.3 实验结果

Vue学习—Vue的安装与使用_第4张图片

四.案例原理分析

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

Vue学习—Vue的安装与使用_第5张图片

你可能感兴趣的:(vue,vue.js,学习,javascript)