Vue入门示例（一）

最新推荐文章于 2024-02-19 09:00:00 发布
最新推荐文章于 2024-02-19 09:00:00 发布
阅读量312 收藏
点赞数
分类专栏： Vue2 文章标签： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40323256/article/details/100828825
版权

目录

01_hello-vue.html

02_v-model.html

03_v-model_1.html

04_v-text.html

05_v-for.html

06_v-on.html

07_event.html

 

01_hello-vue.html

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>hello-vue</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script>
			
			Vue.config.devtools = false;
			Vue.config.productionTip = false;//这两行代码可以消除插件提示
			
			var app = null;
			window.onload = function() {
				app = new Vue({
					el: '#sikiedu',
					data: {
						msg: 'Hello - Vue!'
					}
				});
			}
		</script>
	</head>

	<body>
		<div id="sikiedu">
			{{msg}}
		</div>
	</body>

</html>

运行结果：

02_v-model.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-model</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script>
			window.onload = () => {
				new Vue({
					el : 'div',
					data : {
						username : '',
						num : 123,
						arr : [11, 22 ,33],
						user : {
							name : 'Joey',
							age : 123
						}
					}
				});
			}
		</script>
	</head>
	<body>
		<div>
			用户名：<input type="text" v-model="username" />
			{{username}}<br />
			{{num}}<br />
			{{arr}}<br />
			{{user}}<br />
		</div>
	</body>
</html>

03_v-model_1.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-model</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script>
			window.onload = () => {
				new Vue({
					el : '#sikiedu',
					data : {
						checked : false,
						users : [],
						selected : '',
						msg : ''
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="sikiedu">
			<div id="checkbox">
				<input type="checkbox" v-model="checked" />{{checked}}
			</div>
			<div id="multi-checkbox">
				<input type="checkbox" value="siki" v-model="users" />siki
				<input type="checkbox" value="lain" v-model="users" />lain
				<input type="checkbox" value="joey" v-model="users" />joey
				<br />
				选中的老师 : {{users}}
			</div>
			<div id="select">
				<select v-model="selected">
					<option disabled="disabled" value="">请选择</option>
					<option>JavaEE</option>
					<option>Unity3D</option>
					<option>UE4</option>
					<option>VUE</option>
				</select>
				<span>已选择：{{selected}}</span>
			</div>
			<div id="textarea">
				<textarea v-model="msg"></textarea>
				<p style="white-space: pre-line;">{{msg}}</p>
			</div>
		</div>
	</body>
</html>

04_v-text.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-text</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script>
			window.onload = () => {
				new Vue({
					el : '#sikiedu',
					data : {
						msg : 'siki学院<br>asfd'
					},
					created : function(){
						alert(1);
					}
				});
			}
		</script>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="sikiedu">
			<input type="text" v-model="msg"/>
			<h2 v-pre>{{msg}}</h2>    <!--还是输出{{msg}}-->
			<h2 v-cloak>{{msg}}</h2>
			<h2 v-text="msg"></h2>    <!--如果有<br>，它不会换行，而是会输出<br>-->
			<h2 v-html="msg"></h2>  <!--如果有<br>，则会有换行效果-->
			<h2 v-html="msg" v-once></h2>
		</div>
	</body>
</html>

05_v-for.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-for</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script>
			window.onload = () => {
				new Vue({
					el : '#sikiedu',
					data : {
						arr : [11, 22, 33, 44],
						user : {
							id : '01',
							name : 'joey'
						},
						users : [
							{id : '01', name : 'joey'},
							{id : '04', name : 'xxxx'},
							{id : '02', name : 'siki'},
							{id : '03', name : 'lain'}
						]
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="sikiedu">
			<ul>
				<li v-for="value in arr">{{value}}</li><br />
				<li v-for="(value, key, index) in user">{{index}} - {{key}} - {{value}}</li><br />
				<li v-for="(value, index) in users">{{index}} - {{value.id}} - {{value.name}}</li>
			</ul>
		</div>
	</body>
</html>

 

06_v-on.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-on</title>
		<script type="text/javascript" src="../js/vue.js" ></script>
		<script>
			window.onload = () => {
				let vm = new Vue({
					el : '#sikiedu',
					data : {
						result : 0
					},
					methods : {
						show : function(){
							console.log("show");
						},
						add (a, b){
							console.log("add");
							console.log(this === vm);
							this.result += a + b;
						}
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="sikiedu">
			<button v-on:click="show">click!</button>
			<button @click="show">click!</button>
			<button v-on:click="add(1, 2)">click add!</button>result : {{result}}
			<button v-on:mouseenter="add(10, 20)">click mouseenter!</button>result : {{result}}
		</div>
	</body>
</html>

07_event.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-event</title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			window.onload=()=>{
				var vm=new Vue({
					el:'#sikiedu',
					data:{
						result:0,
						result_once:0
					},
					methods:{
						show(e){
							console.log(e);
							console.log(e.target.innerHTML);
						},
						add(a,b){
							console.log("add");
							this.result+=a+b;
						},
						add_once(a,b){
							console.log("add_once");
							this.result_once+=a+b;
						},
						showA(){
							console.log("showA");
						},
						showB(){
							console.log("showB");
						}
						
					}
				});
			}
		</script>
	</head>
	<body>
		<div id="sikiedu">
			<button @click="show($event)">click A</button><br />
			<button @click="add(1,2)">click add</button>result:{{result}}<br />
			<button @click.once="add_once(1,2)">click.once add</button>result_once:{{result_once}}<br />
			
			<div @click="showA()">
				<div @click="showB()">
					<button @click="show($event)">事件冒泡</button>
				</div>
			</div>
			
			<!--阻止事件冒泡-->
			<div @click="showA()">
				<div @click="showB()">
					<button @click.stop="show($event)">阻止事件冒泡</button>
				</div>
			</div>
			
			<a href="https://www.baidu.com">链接到baidu.com</a><br />
			<!--阻止事件默认行为-->
			<a href="https://www.baidu.com" @click.prevent>阻止链接到baidu.com</a>
		</div>
	</body>
</html>

运行结果如下： 

 

 

Vue入门示例（二） 

疆~
关注
专栏目录
vue基础入门及示例
08-22
Vue的基础入门主要涵盖以下几个核心概念： 1. **安装与设置**：Vue可以通过CDN链接直接引入，也可以通过npm全局或局部安装。对于本地开发，推荐使用`npm install vue`进行安装，然后在项目中通过`import Vue from '...
VUE入门+5个小案例
热门推荐
Beyondczn的博客
02-23 3万+
本文是我心血来潮学习Vue框架所做的笔记，也供童鞋们学习参考。作为后端的开发人员，学习前端的Vue框架只是单纯地去了解下前端框架的内容，所以并没有深入地去学习，因此本文只适合Vue入门的童鞋哦。由于我的能力有限，所写的内容可能有错误，小伙伴们可以在评论区中进行讨论。这篇笔记是根据哔哩哔哩大学中黑马程序员up主的视频内容进行记录的。视频地址：前端基础必会教程-4个小时带你快速入门vue，欢迎童鞋们去三连哦。 一、Vue基础 1.第一个Vue程序 步骤： 引入vue开发环境 <script sr.
Vue简单入门及案例
qq_54605990的博客
04-27 1805
VUE入门 简介： JavaScript框架 简化Dom操作 响应式数据驱动 之前基于DOM----->（1）获取DOM元素 （2）操作DOM元素 Vue官网： https://cn.vuejs.org Vue.js的优点 体积小 压缩后33K 更高的运行效率 基于虚拟dom，一种可以与预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM 双向数据绑定 让开发者不用再去操作D
vue快速入门的三个小实例,vue从入门到精通教程
chatgpt001的博客
10-16 2139
使用v-bind指令∶作用：动态绑定属性预期：any (with argument) | Object (without argument)参数：attrOrProp (optional)v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值(这个学到组件时再介绍)在开发中，有很多属性需要动态进行绑定，比如图片的链接src、网站的链接href、动态绑定一些类、样式等等。作用:绑定事件监听器缩写:@
Vue入门示例，样例
zjl523357813的专栏
02-24 458
介绍几个入门示例，通过不同的实现方式从而体会一下 Vue
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 2万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
vue入门学习示例.zip
05-04
根据网上手工编写练习，供需要的用户快速浏览学习，index.html简单学习，super.html for学习，super two.html 自定义事件https://blog.csdn.net/maomaoqiukqq/article/details/99967143
vue官方示例(入门学习)
11-22
为了学习vue，照着官方网站的示例敲了一遍，当然有些自己的想法写在了里面，但是基本都是官方基础的内容，仅供初级入门学习。
Vue快速入门使用示例附录
最新发布
03-10
"Vue快速入门使用示例附录"这个压缩包可能是为了帮助初学者快速理解并掌握Vue的基础操作和常见应用场景。让我们通过以下几个关键知识点来深入探讨Vue.js。 1. **安装Vue**: Vue可以通过CDN链接直接在HTML中引入，也...
vue入门vue入门vue入门
05-14
"Vue入门"意味着我们将探讨如何开始学习和掌握这个强大的技术。 Vue.js 的核心理念是通过声明式的数据绑定和组件化来构建用户界面。它的设计目标是使开发过程更加直观和可维护，使得开发者可以专注于应用的业务逻辑...
vue入门小例子
07-08
学习vue.js官网时,写的几个小例子.
vue使用实例
08-23
vue实例、vue持续更新中、vueDemo 1、vue的基础概念和构建开发环境、 2、数据渲染、事件监听和表单处理， 后续更新待续
带你入门vue2.0及案例开发
11-09
vue2.0入门教程，对于刚学习vue的同学很有帮助。前面主要讲解vue的基础知识，后面章节会做一个小项目巩固知识
Vue 入门简单示例
Elvira_Sunset的博客
06-11 1253
#Vue ##1、创建Vue实例展示在页面上 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> {{message}} </div> <script src="https://cd
Vue | 入门案例
匿名攻城狮
02-13 420
文章目录一、MVVM思想二、Vue入门案例1.初始化项目2. 声明式渲染+双向绑定3.事件处理三、Vue开发插件介绍安装 Vue3 Snippets代码提示安装vue-devtools方便调试 一、MVVM思想 M： 即 Model， 模型， 包括数据和一些基本操作。 V： 即 View， 视图， 页面渲染结果。 VM： 即 View-Model， 模型与视图间的双向操作（无需开发人员干涉） 在 MVVM 之前， 开发人员从后端获取需要的数据模型， 然后要通过 DOM 操作 Model 渲染到 V
Vue快速入门（笔记+小案例）
renluoluo_6464的博客
12-09 284
Vue基础 一、第一个Vue程序 1、el挂载点 用来设置Vue实例挂载（管理）的元素 Vue会管理el选项命中的元素及其内部的后代元素 也可以使用其他选择器，建议使用ID选择器 可以使用其他的双标签，不能使用html和body 2、data数据对象 vue中用的数据定义在data中，可以是复杂类型的数据，数据，对象，函数等 二、内容绑定，事件绑定 v-text，v-html，v-on 1、v-text（可设置文本内容） v-text设置标签的文本内容，默认替换全部内容，可以使用表达式{{}}替换指定
vue从入门到进阶的30个vue代码示例
温暖前端的博客
02-19 1456
【代码】vue从入门到进阶的30个vue代码示例。
Vue简单练手案例
A_Common_Man的博客
05-05 4433
适合vue初学者的3个练手小案例，加深对数据驱动视图的理解，体会到与原生js直接操纵Dom节点的区别
VUE入门案例
qixiang_chen的博客
01-13 443
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。 VUE在前端页面实现双向数据绑定，即DOM控件与Javascript数据对...
Vue SSR入门示例：三步骤实现简单前后端渲染
总结来说，这篇文章提供了一个实战型的Vue SSR入门指南，通过逐步分解，让开发者了解如何从基本的前端渲染过渡到具有数据动态加载能力的后端渲染，从而更好地适应未来可能的业务优化需求。这对于希望通过SSR提升用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值