Vue简单入门

最新推荐文章于 2022-07-25 16:51:14 发布
最新推荐文章于 2022-07-25 16:51:14 发布
阅读量290 收藏 2
点赞数 1
分类专栏： Vue 文章标签： Vue简单入门 Vue Vue入门学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42836176/article/details/84865915
版权

1.VueJS 概述与快速入门

1.1 VueJS介绍
Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑 定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目整合。
官网:https://cn.vuejs.org/

1.2 MVVM模式
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为 抽象化，让我们将视图 UI 和业务逻辑分开 MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM， 也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端 开发更加高效、便捷
在这里插入图片描述
1.3 VueJS 快速入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue的快速入门</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}} <!-- vue 插值部分-->
		</div>
	</body>
	<script>
		//view model
		//创建Vue对象
		new Vue({
			el:"#app",//由vue接管id为app区域
			data:{
			    message:"Hello Vue!!!" //此处不能加分号
			}

		})
	</script>
</html>

1.4 插值表达式
数据绑定常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对 象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? ‘YES’ : ‘NO’ }}

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个 表达式，所以下面的例子都不会生效

<!-- 这是语句，不是表达式 --> 
{{ var a = 1 }} 
<!-- 流控制也不会生效，请使用三元表达式 -->
 {{ if (ok) { return message } }}

2.VueJS 常用系统指令
1.v-on 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
2. v-text与v-html
3. v-bind :插值语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind指令

<!-- v-bind完整语法 --> 
<a v-bind:href="url">...</a> 
<!-- 缩写 -->
 <a :href="url">...</a>

4.v-model 双向绑定（类似AngularJs）
5. v-for(循环遍历)
6. v-if与v-show
v-if是根据表达式的值来决定是否渲染元素
v-show是根据表达式的值来切换元素的display css属性

以下都是些案例（注意看html中的标题）：

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8" />
		<title>v-on:click 点击事件</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}  
			<button v-on:click="fun1('来了老弟')">点击</button>
		</div>
	</body>
	<script>
		//view model
		new Vue({

            el:"#app",//由vue接管id为app区域
            data:{
                message:"Hello 222" //此处不能加分号
            },
            methods: {
                fun1: function (msg) {
                    this.message = msg;
                }
            }
		})
	</script>
</html> 

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <title>v-on:keydown阻止其默认行为</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>

<body>
<div id="app">
    <!--获取用户输入值 触发的事件-->
    <h3>这是Vue框</h3>
    <input type="text" v-on:keydown="fun1($event)">

    <h3>这是传统框</h3>
    <input type="text" onkeydown="fun2()">
</div>
</body>
<script>
    //view model
    new Vue({
        el:"#app",//由vue接管id为app区域
        methods: {
            fun1: function (event) {
            if(event.keyCode<48||event.keyCode>105||(event.keyCode>57&&event.keyCode<96)){
                //阻止默认行为
                 event.preventDefault();
    }
            }
        }
    });

    //传统的JS
    function showKeyCode(){
        var code = event.keyCode;
        alert(code);
    }
    function fun2($event){
        if(event.keyCode<48||event.keyCode>105||(event.keyCode>57&&event.keyCode<96)){
            //阻止默认行为
            event.preventDefault();
        }
    }
</script>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:mouseover阻止事件传播</title>
		<style>
			#div {
				background-color: red;
				width: 300px;
				height: 300px;
			}
			#div2 {
				background-color: red;
				width: 300px;
				height: 300px;
			}
		</style>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
	<h3>这是Vue测试</h3>
		<div id="app">
			<div @mouseover="fun1()" id="div">
				<textarea @mouseover="fun2($event)">这是一个文件域</textarea>
			</div>
		</div>

	<h3>这是传统js测试</h3>
	<div id="app2">
		<div onmouseover="fun3()" id="div2">
			<textarea onmouseover="fun4()">这是一个文件域</textarea>
		</div>
	</div>

	</body>
	<script>
        //view model
        new Vue({
            el:"#app",//由vue接管id为app区域
            methods: {
                fun1: function () {
                    alert("这是div区域")
                },
                fun2: function ($event) {
                    alert("这是文本区域")
                    event.stopPropagation();//阻止冒泡
                }
            }
        });

        //传统JS
		function fun3() {
            alert("这是div区域")
        }
        function fun4($event) {
            alert("这是文本区域")
            event.stopPropagation();//阻止冒泡
        }
		
	</script>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:事件修饰符</title>

		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<form @submit.prevent action="http://www.baidu.cn" method="get">
				<input type="submit" value="提交"/>
			</form>

			<div @click="fun1()">
				<a @click.stop href="http://www.baidu.cn">百度</a>
				<!--触发事件后就不会再触发fun1了  因为+l stop-->
			</div>
		</div>
	</body>
	<script>
        new Vue({
			el:'#app',//表示当前vue对象接管了div区域
			methods:{
            fun1:function(){
                alert("hello baidu");
            }
        }
        });
		
		
		
	</script>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:按键修饰符</title>

		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<!--
		KeyDown：用户摁下摁键时发生
		KeyPress：用户摁下摁键，并且产生一个字符时发生
		KeyUp： 用户释放某一个摁键时触发
	-->
	<body>
		<div id="app">
			<input type="text" @keyUp.enter="fun"/>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
				fun:function(){
					alert("你按了回车");
				}
			}
		});
	</script>

</html>

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-model</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			姓名:<input type="text" id="username" v-model="user.username"><br>
			密码:<input type="password" id="password" v-model="user.password"><br>
			<input type="button"  value="获取">
			<hr>
			<input type="button" @click="fun1()" value="测试双向绑定" />
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
                user:{
                    username:"xiaodong",
					password:"123456"
                }
			},
			methods:{
			    fun1:function () {
					this.user.username="zhangsan";
                }
			}
		});
		
	</script>

</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for遍历</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="v in arr">{{v}}</li>
			</ul>
			<hr>
			<ul>
				<li v-for="(value,key) in user">{{value}}={{key}}</li>
			</ul>
			<hr>
			<ul>
				<li v-for="(value,key) in grade">{{value}}={{key}}</li>
			</ul>
			<hr>
			<ul v-for="(value,key) in grade">
				<li v-for="(value2,key2) in value">{{value2}}={{key2}}</li>
			</ul>

		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
			   arr:[1,2,3,4,5], //数组
				user:{//对象
			        id:1,
					name:"张三",
					age:18
				},
				grade:{//班里的学生
			       student1:{
                        id:1,
                        name:"张三",
                        age:18
                    },
                    student2:{
                        id:2,
                        name:"张四",
                        age:19
                    }
				}
			},
			methods :{
			}
		});

		
	</script>
</html>


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-if与v-show</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
	<!--	v-if是根据表达式的值来决定是否渲染元素
			v-show是根据表达式的值来切换元素的display css属性
 -->
		<div id="app">
			<input type="button" v-if="boolen" value="张三出来了"><br>
			<input type="button" v-show="boolen" value="张四出来了"><br>

			<input type="button" @click="fun()" value="改成状态">
		</div>

	</body>
	<script>
				//view model
						new Vue({
							el:"#app",
							data:{
                                boolen:false
							},
							methods :{
							  fun: function () {
								  return this.boolen=!this.boolen
                              }
							}
						});
		
	</script>
</html>
小东哥哥
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue生命周期转
浅夏博客
10-20 309
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
vue-快速入门
最新发布
qq_62892403的博客
07-24 1221
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。[10]Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建， [4]是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web。
Vue笔记（狂神说）
THB66666的博客
09-09 1691
一、前端核心分析 狂神视频链接 1.1、概述 Soc原则：关注点分离原则 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：vuex Vue-UI : ICE , Element UI 1.2、前端三要素 HTML（结构）：超文本标记语言（Hyper Text Markup Language），决定网页的结构和内容 CSS（表现）：层叠样式表（C
vue简单入门介绍
liuerchong的博客
07-24 351
0.前言 先聊一下前端开发模式的发展。 静态页面 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。 异步刷新，操作DOM 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言. 随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。 ajax盛行： 2005年开始，ajax逐渐
Vue简单入门及案例
qq_54605990的博客
04-27 1802
VUE入门 简介： JavaScript框架 简化Dom操作 响应式数据驱动 之前基于DOM----->（1）获取DOM元素 （2）操作DOM元素 Vue官网： https://cn.vuejs.org Vue.js的优点 体积小 压缩后33K 更高的运行效率 基于虚拟dom，一种可以与预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术，由于这个DOM操作属于预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM 双向数据绑定 让开发者不用再去操作D
Vue简单入门.pdf
03-24
Vue.js 是一款流行的前端开发框架，以其简单、精确和快速上手的特点被广泛采用。它是一种渐进式框架，特别适合构建数据驱动的web界面。Vue.js 的设计目标是通过简洁的API实现响应式的数据绑定和组件组合，使得开发者...
vue简单入门.pptx
06-16
### Vue.js 简单入门知识点详解 #### 一、Vue.js 概述 - **定义**：Vue.js 是一种用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，易于上手...
vue简单入门介绍.docx
11-22
Vue.js的简单易用性和高效的性能使其在前端开发领域受到广泛欢迎。它的核心特性包括组件化、指令系统、虚拟DOM、计算属性、响应式系统等。组件化允许开发者将UI拆分为可复用的部分，提高代码重用率；指令系统如v-if...
Vue的简单入门使用
兵马未动，粮草先行。。。的博客
06-25 246
一、Vue的安装和使用（idea） vue是个前端框架。 1.安装Node NPM（node package manage）是Node提供的模块管理工具，可以非常方便的下载安装很多的前端框架，包括jquery，AngularJS，VueJs都有，我们需要先安装node及NPM工具。 下载地址：https://nodejs.org/en/download/（nodes自带NPM） 2.安装vue 下...
vue 简单入门
wx1762813417的博客
09-15 245
Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架 2.库和框架的区别 库(Library)，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把控制权交给使用者 代表：jQuery jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作 框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框...
Vue超简单入门
qq_44769099的博客
02-24 641
目录 概念 安装 实例化 内置指令 文本渲染 {{}} 语法 v-text与v-html 文本 属性渲染 v-bind 属性 条件渲染 v-if,v-else 选择 v-else-if 多重选择 v-show 显示隐藏 ...
VUE的简单入门
walker_0312的博客
06-30 172
VUE Vue介绍 Vue 是一套构建用户界面的渐进式前端框架。 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。 通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。 特点: 易用：在有 HTML CSS JavaScript 的基础上，快速上手。 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。 Vue快速入门 下载和引入 vue.js 文件。 编写入门程序。 视图：负
Vue 简单快速入门
woruosuifenglang的博客
07-25 2335
​Vue
vue简单入门的项目
01-31
Vue.js 是一款简单易学的前端框架，下面我将用300字详细介绍如何进行Vue简单入门项目。 首先，你需要确保你已经安装了Node.js和npm。然后通过npm全局安装Vue CLI，使用以下命令： npm install -g @vue/cli 接下来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值