1. Toy模板网首页
  2. > Toy博客

Vue介绍与入门（一篇就可入门）

8月前 作者：夜雨微澜° 分类：Toy博客 阅读(28) 违法举报

这篇具有很好参考价值的文章主要介绍了Vue介绍与入门（一篇就可入门）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、Vue.js是什么？

vue官网说：Vue.js（读音 /vjuː/，类似于 view） 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。


渐进式我个人理解就是阶梯式向前。vue是轻量级的，它有很多独立的功能或库，我们会根据我们的项目来选用vue的一些功能。就像我们开发项目时如果只用到vue的声明式渲染，我就只用vue的声明渲染，而我们要用他的组件系统，我们可以引用它的组件系统。

官网：https://cn.vuejs.org/
Vue作者：尤雨溪/中国无锡


vue的渐进式表现为：

声明式渲染——组件系统——客户端路由——-大数据状态管理——-构建工具

二、库和框架的区别

库（Library）

库，本质上是一些函数的集合。每次调用函数，实现一个特定的功能，接着把 控制权交给使用者
  • 代表：jQuery
  • jQuery这个库的核心：DOM操作，即：封装DOM操作，简化DOM操作

框架（Framework）

框架，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
  • 框架规定了自己的编程方式，是一套完整的解决方案
  • 使用框架的时候，由框架控制一切，我们只需要按照规则写代码

主要区别

  • 核心点：谁起到主导作用（控制反转）

    • 框架中控制整个流程的是框架
    • 使用库，由开发人员决定如何调用库中提供的方法（辅助）
  • 框架的侵入性很高（从头到尾）

 框架与库之间最本质区别在于控制权：you call libs, frameworks call you（控制反转）

vue学习,Vue,java

三、MVVM的介绍

1.MVVM组成

  • MVVM ===> M / V / VM
  • M：model数据模型
  • V：view视图
  • VM：ViewModel 视图模型

 vue学习,Vue,java

2.优势对比

  • MVC模式，将应用程序划分为三大部分，实现了职责分离
  • 在前端中经常要通过 JS代码 来进行一些逻辑操作，最终还要把这些逻辑操作的结果现在页面中。也就是需要频繁的操作DOM

  • MVVM通过数据双向绑定让数据自动地双向同步

    • V（修改数据） -> M
    • M（修改数据） -> V
    • 数据是核心
  • Vue这种MVVM模式的框架，不推荐开发人员手动操作DOM

3.Vue中的MVVM

虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例

4.学习Vue要转化思想

  • 不要在想着怎么操作DOM，而是想着如何操作数据！！！
  • 数据是核心

四、安装Vue

1.CDN下载(需连接网络)

什么是CDN加速？

  • CDN的全称是(Content Delivery Network)，即内容分发网络。
  • CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术
  • CDN加速主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、css等文件。 
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.手动下载

开发环境版本：https://cn.vuejs.org/js/vue.js

生产环境版本：https://cn.vuejs.org/js/vue.min.js

Ctrl+S保存下载即可

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="ja/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="js/vue.min.js"></script>

 五、常用内置指令

v-text 更新元素的 tex
v-html 更新元素的 inn
v-if 如果为 true, 当前标签才会输出
v-else 如果为 false, 当前标签才会输出到页面
v-show 通过控制 display 样式来控制
v-for 遍历数组/对象
v-on 绑定事件监听, 一般简写为@
v-bind 绑定解析表达式, 可以省略 v-bin
v-model 双向数据绑定
v-cloak 防止闪现, 与 css 配合: [v-cloak] { display:

 文章来源地址https://www.toymoban.com/news/detail-842301.html

六、Hello Vue 实例

开发工具：HBuilderX

这里使用的是BootCDN中2.6.0版本的vue.js

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<h1>{{title}}</h1>
		<!-- 
		指定vue管理内容区域，通常我们也把它叫做边界，
		这意味着我们接下来的改动全部在指定的div内，div外部不受影响 
		-->
		<div id="zhq">
			<h1>{{title}}--{{ts}}</h1>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
            // DOM 元素，挂载视图模型，
			el:'#zhq',                  
            // 定义属性，并设置初始值
			//方式一
			/* data:{					    
				title:'Hello Vue!!!!',
				ts:new Date().getTime()
			}, */
			//方式二:函数方式  注：data在组件开发中的写法必须是一个函数
			data:function(){
				return{
					title:'Hello Vue!!!!',
					ts:new Date().getTime()
				}
			},
            // 定义方法，用于事件交互时使用的函数 
			methods:{					 
				
			}
		})
	</script>
</html>

页面：

vue学习,Vue,java

为什么第一个{{title}}没有显示Hello Vue!!!!呢？

因为第一个{{title}}没有在'#zhq'的边界内，所以不受影响

七、给Button绑定事件

给按钮设置一个点击事件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 方式一 手动方式 -->
		<!-- <script src="vue.js" type="text/javascript"></script> -->
		<!-- 方式二 CDN -->
		<!-- 开发环境版本，包含了有帮助的命令行警告 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<h1>{{title}}</h1>
		<!-- 
		指定vue管理内容区域，通常我们也把它叫做边界，
		这意味着我们接下来的改动全部在指定的div内，div外部不受影响 
		-->
		<div id="zhq">
			<h1>{{title}}--{{ts}}</h1>
            <!-- 
			 1) javascript:
			 window.addListener
			 <button onclick="return confirm('确定删除吗？')">按钮</button>
			 
			 2) jquery:
			 $('选择器').bind('click',function(){})
			 $('选择器').onclick(function(){})
			 -->
			 <button v-on:click="doClick(1)">有种点我</button>
		</div>
	</body>
	<script>
		// 每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的
		var vm=new Vue({
            // DOM 元素，挂载视图模型，
			el:'#zhq',                  
            // 定义属性，并设置初始值
			//方式一
			/* data:{					    
				title:'Hello Vue!!!!',
				ts:new Date().getTime()
			}, */
			//方式二:函数方式  注：data在组件开发中的写法必须是一个函数
			data:function(){
				return{
					title:'Hello Vue!!!!',
					ts:new Date().getTime()
				}
			},
            // 定义方法，用于事件交互时使用的函数 
			methods:{					 
				doClick:function(num){
					alert('Hello Vue'+num)
				}
			}
		})
	</script>
</html>

 页面：

vue学习,Vue,java

注：

  • data在组件开发中的写法必须是一个函数
  • vue指令：指的是是带有“v-”前缀的特殊属性
  • 像用v-on:click指令绑定单击事件

八、双向数据绑定(Vue two way data binding)  

1.数据的改变会引起DOM的改变，DOM的改变也会引起数据的变化

代码： 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<!-- 案例一：数据的改变会引起DOM的改变，DOM的改变也会引起数据的变化 -->
			<input type="text" v-model="num"/>
			<button v-on:click="doKeyup()">提交</button><br/>
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:'#zhq',                  // DOM 元素，挂载视图模型，
			data:function(){
				return{
					ts:new Date().getTime(),
					num:10,
				}
			},
			methods:{					// 定义方法，用于事件交互时使用的函数  
				doKeyup:function(){
					console.log(this.num);
				}
			}
		});
	</script>
</html>

 显示：

vue学习,Vue,java

点击提交后后台输出的num值也发生了改变

  • num初始值----》10
  • num点击提交后的值----》101

2.只有当实例被创建时data中存在的属性才是响应式的 

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<!-- 案例一：数据的改变会引起DOM的改变，DOM的改变也会引起数据的变化 -->
			<input type="text" v-model="num"/>
			<button v-on:click="doKeyup()">提交</button><br/>
			<!-- 案例二：只有当实例被创建时data中存在的属性才是响应式的 -->
			{{name}}<br/>
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:'#zhq',                  // DOM 元素，挂载视图模型，
			data:function(){
				return{
					ts:new Date().getTime(),
					num:10,
				}
			},
			methods:{					// 定义方法，用于事件交互时使用的函数  
				doKeyup:function(){
					console.log(this.num);
				}
			}
		});
        <!-- 案例二：只有当实例被创建时data中存在的属性才是响应式的 -->
		vm.name="zs";
	</script>
</html>

显示：

vue学习,Vue,java

  可以看到name没有在data中定义，所以{{name}}是没有值的

 在data中定义一个name:

            data:function(){
				return{
					ts:new Date().getTime(),
					num:10,
					name:'ls'
				}
			},

 再来看看页面：

vue学习,Vue,java

 zs就显示出来了，页面也没报错

3.用v-model指令在表单控件元素上创建双向数据绑定

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<!-- 案例一：数据的改变会引起DOM的改变，DOM的改变也会引起数据的变化 -->
			<input type="text" v-model="num"/>
			<button v-on:click="doKeyup()">提交</button><br/>
			<!-- 案例二：只有当实例被创建时data中存在的属性才是响应式的 -->
			{{name}}<br/>
			<!-- 案例三：用v-model指令在表单控件元素上创建双向数据绑定-->
			<input type="text" v-model="num" />
			<button v-on:click="doIncrement()">++</button><br/>
			
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:'#zhq',                  // DOM 元素，挂载视图模型，
			data:function(){
				return{
					ts:new Date().getTime(),
					num:10,
					name:'ls'
				}
			},
			methods:{					// 定义方法，用于事件交互时使用的函数  
				doKeyup:function(){
					console.log(this.num);
				},
				doIncrement:function(){
					this.num=this.num+1;
                    console.log(this.num);
				}
			}
		});
		vm.name="zs";
	</script>
</html>

 页面：

vue学习,Vue,java

 点击++之后前面文本框也跟着改变，但是给它手动赋值之后再点++就会出现拼接的效果

vue学习,Vue,java 

 很简单，把数据强转成int就行

                doIncrement:function(){
					this.num=parseInt(this.num)+1;
					console.log(vm.num);
				}

 vue学习,Vue,java

4.this在methods属性的方法里指向当前Vue实例

 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<!-- 案例一：数据的改变会引起DOM的改变，DOM的改变也会引起数据的变化 -->
			<input type="text" v-model="num"/>
			<button v-on:click="doKeyup()">提交</button><br/>
			<!-- 案例二：只有当实例被创建时data中存在的属性才是响应式的 -->
			{{name}}<br/>
			<!-- 案例三：用v-model指令在表单控件元素上创建双向数据绑定-->
			<input type="text" v-model="num" />
			<button v-on:click="doIncrement()">++</button><br/>
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:'#zhq',                  // DOM 元素，挂载视图模型，
			data:function(){
				return{
					ts:new Date().getTime(),
					num:10,
					name:'ls'
				}
			},
			methods:{					// 定义方法，用于事件交互时使用的函数  
				doKeyup:function(){
					console.log(this.num);
				},
				doIncrement:function(){
					this.num=parseInt(this.num)+1;
					<!-- 案例五：局部访问与全局访问 -->
					/* console.log(this.num); */
					console.log(vm.num);
				}
			}
		});
		vm.name="zs";
	</script>
</html>

 页面：

vue学习,Vue,java

可以看到使用vm.num也可以输出

  • vm.name/vm.$data.name(外部访问)    
  • this.name(内部访问)

九、单向绑定

1.用v-once指令进行单向绑定（一般不用）

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js"></script>
	</head>
	<body>
		<div id="zhq">
			<h1>{{ts}}</h1>
			<!-- 案例一：数据的改变会引起DOM的改变，DOM的改变也会引起数据的变化 -->
			<input type="text" v-model="num"/>
			<button v-on:click="doKeyup()">提交</button><br/>
			<!-- 案例二：只有当实例被创建时data中存在的属性才是响应式的 -->
			{{name}}<br/>
			<!-- 案例三：用v-model指令在表单控件元素上创建双向数据绑定-->
			<input type="text" v-model="num" />
			<button v-on:click="doIncrement()">++</button><br/>
			<!-- 案例四：用v-once指令进行单向绑定，一般不用-->
			<span v-once>{{num}}</span>
		</div>
	</body>
	<script>
		var vm=new Vue({
			el:'#zhq',                  // DOM 元素，挂载视图模型，
			data:function(){
				return{
					ts:new Date().getTime(),
					num:10,
					name:'ls'
				}
			},
			methods:{					// 定义方法，用于事件交互时使用的函数  
				doKeyup:function(){
					console.log(this.num);
				},
				doIncrement:function(){
					this.num=parseInt(this.num)+1;
					<!-- 案例五：局部访问与全局访问 -->
					/* console.log(this.num); */
					console.log(vm.num);
				}
			}
		});
		vm.name="zs";
	</script>
</html>

页面：

vue学习,Vue,java

 可以看出加了v-once的<span>标签没有变依然是初始值

注1：console对象可以使用printf风格的占位符。只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种

                doIncrement:function(){
					this.num=parseInt(this.num)+1;
					<!-- 案例五：局部访问与全局访问 -->
					/* console.log(this.num); */
					console.log(vm.num);
					<!-- console对象可以使用printf风格的占位符 -->
					console.log("num=%d,name=%s",this.num,this.name);
				}

vue学习,Vue,java
注2：Vue实例还暴露了一些有用的实例属性与方法。它们都有前缀$，以便与用户定义的属性区分开来

 

十、实例生命周期

1.生命周期流程图:

vue学习,Vue,java

  • 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象即可 (一些根实例特有的选项除外)。
  • 实例生命周期也叫做：组件生命周期

2.生命周期介绍

  • vue生命周期钩子函数
  • 简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期

生命周期钩子函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，这些事件，统称为组件的生命周期函数！

  • 注意：Vue在执行过程中会自动调用生命周期钩子函数，我们只需要提供这些钩子函数即可
  • 注意：钩子函数的名称都是Vue中规定好的！

 

3. vue 生命周期分析

1) 初始化显示

  • beforeCreate()
  • created()
  • beforeMount()
  • mounted()

2) 更新状态: this.xxx = value

  • beforeUpdate()
  • updated()

3) 销毁 vue 实例: vm.$destory()

  • beforeDestory()
  • destoryed()

4. 常用的生命周期方法

  1. mounted(): 发送 ajax 请求, 启动定时器等异步任务
  2. beforeDestory(): 做收尾工作, 如: 清除定时器

到了这里，关于Vue介绍与入门（一篇就可入门）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • 【Java面向对象】多态的详细介绍，简单易懂，看这一篇就够了

    A： 方法或对象具有多种形态，是面向对象的第三大特征，多态是建立在封装和继承的基础之上的。简单来说，多态是具有表现多种形态的能力的特征。 消除类型之间的耦合关系 可替代性 可扩充性 接口性 灵活性 简化性 重载式多态在编译时已经确定好了。方法名相同而参数

    2024年01月20日
    浏览(66)
  • JavaSE基础篇——超详细，Java入门，这一篇就够了

    JavaSE基础篇——超详细，Java入门，这一篇就够了

    一、java背景知识 1、 Java是 美国sun公司（Stanford University Network）在1995年推出的一门计算机 高级编程语言 。 2、Java早期被称为Oak（橡树），后期改名为Java。 3、Java之父：詹姆斯·高斯林（James Gosling） 4、2009年sun公司被Oracle（甲骨文）公司收购 二、为什么用Java 1、世界上最流

    2024年02月03日
    浏览(45)
  • Vue3超详细的ref()用法，看这一篇就够了

    Vue3超详细的ref()用法，看这一篇就够了

    ref( ) 接受一个内部值，返回一个 ref 对象 ，这个对象是 响应式 的 、 可更改 的，且只有一个指向其内部值的属性 .value 。 ref() 将传入参数的值包装为一个带 .value 属性的 ref 对象。 举例： 查看打印结果： ref()方法允许创建可以使用 任何值类型的响应式 ref ref 的 .value 属性也

    2024年02月17日
    浏览(43)
  • 前端vue后端go如何进行跨域设置？一篇就通透理解

    前端vue后端go如何进行跨域设置？一篇就通透理解

    跨域 （Cross-Origin）指的是在 浏览器 中，当一个 web 应用程序试图访问 不同域名、不同端口或不同协议的资源时，就会发生跨域请求 ，此时浏览器的 同源策略 （Same-Origin Policy）就会进行拦截，他是同源策略是一种 安全机制 ，它限制了网页中的 JavaScript 代码只能访问同源（

    2024年04月12日
    浏览(46)
  • MySQL入门阶段这一篇就够了-学习笔记(手敲1.5万字)

    MySQL入门阶段这一篇就够了-学习笔记(手敲1.5万字)

    虽然在大一下学期，就已经接触到了MySQL，但是那个时候只是会用MySQL进行增删改查，在大三上学期，尝试投简历寻找实习时，对方公司对于程序员的MySQL水平有很高的要求，所以我开始系统化的学习MySQL。顺便将整理出的笔记逐步写入博客中，日积月累，准备发表一篇长篇博

    2024年02月15日
    浏览(41)
  • Redis01——Redis入门这一篇就够了(可学习、复习、面试，收藏备用)

    Redis01——Redis入门这一篇就够了(可学习、复习、面试，收藏备用)

    前 言 🍉 作者简介：半旧518，长跑型选手，立志坚持写10年博客，专注于java后端 ☕专栏简介：深入、全面、系统的介绍redis知识 🌰 文章简介：本文将深入、全面介绍Redis的入门，包括redis的介绍、历史、安装、特点、基本知识等，建议收藏备用，创作不易，敬请三连哦 Red

    2024年02月07日
    浏览(46)
  • Vue3基础看这一篇就够了（万字长篇，附实例代码及效果演示）

    Vue3基础看这一篇就够了（万字长篇，附实例代码及效果演示）

    目录 前言 概述 Vue3组合式api  VS  Vue2选项式api 基础部分 setup 选项式api的风格 组合式api的风格 区别  响应式数据 ref reactive shallowReactive 与 shallowRef   计算属性和监听  computed 函数  watch 函数  watchEffect 生命周期  响应式数据只读 toRaw 返回代理的源 markRaw 标记对象拒绝代理

    2024年03月24日
    浏览(48)
  • 黑客零基础从入门到精通学习成长路线（超多图、非常详细），看完这一篇就够了

    黑客零基础从入门到精通学习成长路线（超多图、非常详细），看完这一篇就够了

    近几年，随着移动互联网、大数据、云计算、人工智能等新一代信息技术的快速发展，围绕网络和数据的服务与应用呈现爆发式增长，丰富的应用场景下暴露出越来越多的网络安全风险和问题。 但是，我国网络安全整体投入不高。网络安全建设方面，国内网络安全投入占信息

    2024年02月07日
    浏览(55)
  • 如何学习及计算机编程，入门看这一篇就够了---以c语言为例

    如何学习及计算机编程，入门看这一篇就够了---以c语言为例

    用计算机爬取信息（爬虫） 进行数据分析，数据可视化（大数据的某个方面） 处理海量的数据，如excel（百万条数据） example1. 来看下面一段代码 大家一定会说 这太简单了 输出hello world 学习计算机的入门程序嘛！！ 那么请问 这是什么？我们第一次编程应该不会知道这是什

    2024年02月08日
    浏览(52)

  • 01实战：Vue3 的基本语法和应用详细演示与剖析(带注释讲解、带全部代码、页面展示)，掌握和了解 Vue3 这一篇就够了；

    2023年07月13日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包