Vue 快速启动及基础教学

已于 2022-03-22 21:28:54 修改
阅读量1.1k 收藏
点赞数
分类专栏： 经验 文章标签： vue.js
于 2022-03-22 11:50:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50302965/article/details/123655557
版权
本文提供了一个Vue.js的基础教程，涵盖了从下载Vue.js到创建基本的HTML页面，以及函数生命周期、模板语法、指令、class和style绑定、条件渲染、列表渲染、事件绑定、表单输入绑定和组件使用等核心概念。通过实例演示了Vue.js的常见操作，适合初学者入门。
摘要由CSDN通过智能技术生成

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

下载开发版vue.js

https://cn.vuejs.org/js/vue.js

创建demo文件夹拉入hbuilderx 把VUE.js 复制进去

创建html引用vue.js 及函数生命周期

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
		{{ message }}
		</div>
		<div id="app2">
		{{ a }}
		</div>
		<script  type="text/javascript">
		
		var app = new Vue({
			el:'#app',
			data:{
				message:'Hello Vue'
			},//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	beforeCreate:function(){
		console.log('beforeCreate');
	},
	/* 在实例创建完成后被立即调用。
	在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	然而，挂载阶段还没开始，$el 属性目前不可见。 */
	created	:function(){
		console.log('created');
	},
	//在挂载开始之前被调用：相关的渲染函数首次被调用
	beforeMount : function(){
		console.log('beforeMount');

	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
		console.log('mounted');
	
	},
	//数据更新时调用
	beforeUpdate : function(){
		console.log('beforeUpdate');
			
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
		console.log('updated');
			
	}
		});
		var data={a:7777}
		var vm = new Vue({
			el:'#app2',
			data:data
		});
		data.a=88888
		vm.a=9999
		vm.$data.a=1010//$放属性前表示vue自带属性
		vm.$watch("a",function(newVal,oldVal){//vue自带的属性监听回调函数
			console.log(newVal,oldVal)
		});
		vm.a=9999	
		setTimeout(function(){
			app.$data.message = "change ......";
		}, 3000);
		</script>
	</body>
</html>

vue模板语法–插值（html标签，css，js）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{msg}}
	<p>Using mustaches: {{ rawHtml }}</p>
	<p v-html="rawHtml"></p>
	<div v-bind:class="color">test...</div>
	<p>{{ number + 1 }}</p>
	<p>{{ 1 == 1 ? 'YES' : 'NO' }}</p>
	<p>{{ message.split('').reverse().join('') }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
		rawHtml : '<span style="color:red">this is should be red</span>',
		color:'blue',
		number : 10,
		ok : 1,
		message : "vue"
	}
});
vm.msg = "hi....";
</script>
<style type="text/css">
.red{color:red;}
.blue{color:blue; font-size:100px;}
</style>
</body>
</html>

vue模板语法–指令

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<p v-if="seen">现在你看到我了</p>
	<a v-bind:href="url">...</a>
	<div @click="click1">
		<div @click.stop="click2">
			click me
		</div>
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		seen : false,
		url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
	},
	methods:{
		click1 : function () {
			console.log('click1......');
		},
		click2 : function () {
			console.log('click2......');
		}
	}
});
</script>
<style type="text/css">

</style>
</body>
</html>

class绑定style属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<div 
	class="test" 
	v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']" 
	style="width:200px; height:200px; text-align:center; line-height:200px;">
		hi vue
	</div>
	
	<div 
	:style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
		hi vue
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		isActive : true,
		isGreen : true,
		color : "#FFFFFF",
		size : '50px',
		isRed : true
	}
});
</script>
<style>
.test{font-size:30px;}
.green{color:#00FF00;}
.active{background:#FF0000;}
</style>
</body>
</html>

条件渲染

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<div v-if="type === 'A'">
	  A
	</div>
	<div v-else-if="type === 'B'">
	  B
	</div>
	<div v-else-if="type === 'C'">
	  C
	</div>
	<div v-else>
	  Not A/B/C
	</div>
	<h1 v-show="ok">Hello!</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		type : "B",
		ok : false
	}
});
</script>
<style type="text/css">

</style>
</body>
</html>

列表渲染

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<ul>
		<li v-for="item,index in items" :key="index">
		{{index}}{{ item.message }}
		</li>
	</ul>
	<ul>
		<li v-for="value, key in object">
			{{key}} : {{ value }}
		</li>
	</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		items : [
			{ message: 'Foo' },
			{ message: 'Bar' }
		],
		object: {
			title: 'How to do lists in Vue',
			author: 'Jane Doe',
			publishedAt: '2016-04-10'
		}
	}
});
</script>
</body>
</html>

事件绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<div id="example-1">
		<button v-on:click="counter += 1"> 数值 :  {{ counter }} </button><br />
		<button v-on:dblclick="greet('abc', $event)">Greet</button>
	</div>
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		counter: 0,
		name : "vue"
	},
	methods:{
		greet : function (str, e) {
			alert(str);
			console.log(e);
		}
	}
});
</script>
<style type="text/css">

</style>
</body>
</html>

表单输入绑定

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<div id="example-1">
		<input v-model="message" placeholder="edit me">
		<p>Message is: {{ message }}</p>
		<textarea v-model="message2" placeholder="add multiple lines"></textarea>
		<p style="white-space: pre-line;">{{ message2 }}</p>
		<br />
		
		<div style="margin-top:20px;">
			<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
			<label for="jack">Jack</label>
			<input type="checkbox" id="john" value="John" v-model="checkedNames">
			<label for="john">John</label>
			<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
			<label for="mike">Mike</label>
			<br>
			<span>Checked names: {{ checkedNames }}</span>
		</div>
		
		<div style="margin-top:20px;">
			<input type="radio" id="one" value="One" v-model="picked">
			<label for="one">One</label>
			<br>
			<input type="radio" id="two" value="Two" v-model="picked">
			<label for="two">Two</label>
			<br>
			<span>Picked: {{ picked }}</span>
		</div>
		<button type="button" @click="submit">提交</button>
	</div>
	
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		message : "test",
		message2 :"hi",
		checkedNames : ['Jack', 'John'],
		picked : "Two"
	},
	methods: {
		submit : function () {
			console.log(this.message);
			
		}
	}
});
</script>
<style type="text/css">

</style>
</body>
</html>

组件基础

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<button-counter title="title1 : " @clicknow="clicknow">
		<h2>hi...h2</h2>
	</button-counter>
	<button-counter title="title2 : "></button-counter>
</div>
<script type="text/javascript">
Vue.component('button-counter', {
	props: ['title'],
	data: function () {
		return {
		  count: 0
		}
	},
	template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>',
	methods:{
		clickfun : function () {
			this.count ++;
			this.$emit('clicknow', this.count);
		}
	}
})
var vm = new Vue({
	el : "#app",
	data : {
		
	},
	methods:{
		clicknow : function (e) {
			console.log(e);
		}
	}
});
</script>
<style type="text/css">

</style>
</body>
</html>

组件注册

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	<button-counter></button-counter>
	<test></test>
</div>
<script type="text/javascript">
Vue.component('button-counter', {
	props: ['title'],
	data: function () {
		return {}
	},
	template: '<div><h1>hi...</h1></div>',
	methods:{
		
	}
})
var vm = new Vue({
	el : "#app",
	data : {
		
	},
	methods:{
		clicknow : function (e) {
			console.log(e);
		}
	},
	components:{
		test : {
			template:"<h2>h2...</h2>"
		}
	}
});
</script>
<style type="text/css">

</style>
</body>
</html>

单文件组件

安装 npm

npm 全称为 Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。

npm -v

由于网络原因 安装 cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 vue-cli

cnpm install -g @vue/cli

安装 webpack

webpack 是 JavaScript 打包器(module bundler)

cnpm install -g webpack
虚构的乌托邦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
idea配置vue项目快速启动
qq_45383769的博客
12-24 1024
idea配置vue项目快速启动+启动后自动弹出网页
vue快速启动
weixin_43919497的博客
04-27 150
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc
WebStrom中实现Vue项目的快速启动
dawei131415的博客
04-20 172
工具：WebStrom+vue 前提：你已经安装了node.js，vuejs，会创建vue项目等一系列的操作 发生场景：希望在WebStrom中能够快速启动vue的项目，省去npm install, npm run dev 的操作实现一键启动项目 最终实现效果： 解决办法： 第一步：打开已有项目 找到工具栏的Run------->Edit Configuraton...
如何设置加入的vue，快速启动。
weixin_44166718的博客
04-14 476
毕业设计中的心得。
一个vue快速启动的项目模板，集成了一些基础的工具
qq_34576748的博客
03-14 295
项目集成 全局重置样式 => src/assets/style/common/reset.css 支持 sass 语法写 css 封装了一些常用的弹性盒子的 class 使用 nProgress，支持页面跳转时，顶部显示进度条的过度效果 集成 axios 并简单封装通用请求函数 集成 Vuex 集成轻量级本地数据库 lowdb，更好的操作本地缓存的工具 项目地址 github地址 ...
vue文件运行的方法教学
10-17
首先，要想运行Vue文件，你必须先搭建起一个适合Vue开发的环境。为了使Vue项目能够正常运行，需要满足以下前提条件： 1. Node.js环境：Node.js是一个基于Chrome...因此，掌握这些基础知识是深入学习Vue.js开发的前提。
vite+vue2的项目基础包
06-17
这个“vite+vue2的项目基础包”为开发者提供了一个快速启动Vue2项目的模板，免去了从零开始配置的繁琐过程。 1. Vite的核心特性： - **即时编译**：Vite在开发模式下，采用ES模块的热重载和按需编译，大大提高了...
Vue-app
03-22
在这个项目中，"Vue-app"可能是一个基础模板或者示例应用，用于教学或快速启动一个新的Vue项目。 Vue.js的核心特性包括： 1. **声明式渲染**：Vue采用声明式的数据绑定，允许开发者通过简单的HTML语法定义视图与...
基于ssm+vue课程辅助教学平台.zip
04-01
它可以快速启动服务，提供RESTful API接口，方便前后端分离，同时集成其他微服务组件，如Spring Security进行权限控制。 **4. 微信小程序** 微信小程序是一种轻量级的应用开发平台，可以在微信内部运行，无需下载...
基于SSM+vue的小码创客教育教学资源库.zip
03-31
但可以推测，Spring Boot可能被用于快速搭建项目基础结构，简化配置，提供自动配置的特性，以及内置的Tomcat服务器，使得项目能快速启动并运行。 **6. Vue.js** Vue.js是一个轻量级的前端MVVM框架，它具有组件化、...
vue起步
轻水与猫的博客
03-27 184
vue构造器中的 el 参数是DOM元素的id，vue的改动全部在指定的div内。data用于定义属性，如：site，urlmethods用于定义函数，可通过return来返回函数值{{ }}用于输出对象属性和函数返回值当一个Vue被创建时，它向Vue响应式系统中加入了其data对象中能找到的所有属性，这些属性的值发生改变时，html视图也会产生相应的变化。Vue实例提供了一些有用的实例属性与方法...
vue的快速开发
wj859548的博客
06-11 431
1.最近就很苦恼，发现我们开发vue的时候，需要安装node，挺复杂的，但是有的时候我们只是做个单元测试，很简单的跑下，这个时候我们就可以用vue-cli给我们提供的快速开发， npm install -g @vue/cli-service-global 直接安装，在进行单元测试，就很方便啦 注意点： 1.你所需要将文件命名为 App.vue 文件 2.然后在这个 App.vue 文件所在的目录下运行： vue serve vue serve 使用了和 vue create 创建的项目相同的默认设置
Vue2.9脚手架的安装和项目的快速启动
momo牛的博客
11-05 368
一.准备工作 1.node.js Vue的脚手架是依赖于node.js，无论哪个版本，先安装node.js。(官网下载) 2.npm npm是node的包管理工具，node.js成功安装之后，npm一并安装成功，这个时候我们可以打开cmd窗口，输入node -v和npm -v来查看node.js和npm的版本，如果能够显示出版本，说明已经安装成功。 3安装淘宝镜像 从国内的镜像服务器下载搭建脚手架所需的文件，可以很快的完成下载任务。 完成之后，我们就可以用cnpm命令代替...
vue3快速开始
weixin_45730243的博客
05-08 374
快速开始 cdn <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.11/vue.cjs.js"></script> vue-cli 升级vue-cli v4.5 npm i -g @vue/cli@next 新建项目会有vue3选项 vite 使用vite体验更快速 npm init vite-app <project-name> cd <project-name> npm install n
vue项目启动
正伯Pro的博客
01-24 4402
为保险起见，用管理员启动方式，启动cmd, 切换目录到项目根文件夹 输入命令 npm install npm run dev/serve
Vue 快速启动指南（一）
最新发布
龙哥盟
07-25 538
直到几年前，直接 DOM 操作是前端开发的标准，jQuery 一直引领潮流。所有这一切都随着现代 JavaScript 库和框架的普及而开始改变，主要是 Angular 和 React。然后，在 2014 年 2 月，Vue 发布了初始版本。由于大型 IT 公司都支持 Angular 和 React，Vue 如何确立自己的地位并不清楚。
Vue框架项目实战整理：1、Vue开发工具介绍、快速启动、常见错误
鲁迷那的专栏—坚持实践后再写出来！
11-09 1150
声明：本教程不收取任何费用，欢迎转载，尊重作者劳动成果，不得用于商业用途，侵权必究！！！ 系列文章 Vue框架项目实战整理：1、Vue开发工具介绍、快速启动、常见错误 Vue框架项目实战整理：2、Vue环境搭建（有图有真相） Vue框架项目实战整理：3、Vue项目执行流程分析（一） Vue框架项目实战整理：4、Vue项目执行流程分析（二） 目录 一、前言 二、使用过的开发工具介绍 ...
Vue项目创建与启动（2023超详细的图文教程）
Alphamilk的博客
11-01 1万+
一、下载node.js ， 二、下载vue-cli与webpack插件 ， 三、项目初始化(项目配置详细信息) ，四、项目启动 ， 五、Vue项目工程结构（扩展知识）
Vue如何启动项目
热门推荐
m0_50013284的博客
07-11 3万+
Vue如何启动项目
Vue快速入门：环境搭建与基础教程
"Vue环境搭建与快速上手指南" Vue.js 是一个流行的JavaScript框架，用于构建用户界面，特别是单页应用程序（SPA）。它以其渐进式特性著称，可以根据项目需求逐步引入，同时保持灵活性。Vue的核心专注于视图层，使得...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

虚构的乌托邦

如果可以请打赏鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值