Vue入门_今日相乐,皆当喜欢的博客-程序员秘密_vue 入门实例

技术标签: 前端框架  Vue  

1、简介

  • Vue.js是什么?

Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,非常容易与其它库或已有项目整合。

官网:https://cn.vuejs.org/

  • 库和框架的区别

库(Library):本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者。

         代表:jQuery

         jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作。

框架(Framework):是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码。

         代表:vue

         框架规定了自己的编程方式,是一套完整的解决方案,使用框架的时候,由框架控制一切,我们只需要按照规则写代码,框架的侵入性很高(从头到尾)

  • MVVM的介绍

MVVM,一种更好的UI模式解决方案,MVVM通过数据双向绑定让数据自动地双向同步。

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

注1:虽然没有完全遵循MVVM模型,Vue的设计无疑受到了它的启发,另外一个js框架“knockout”完全遵循MVVM模型

注2:学习Vue要转化思想:“不要在想着怎么操作DOM,而是想着如何操作数据”

2、安装Vue

  • cdn下载(需连接网络)
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
  • 手动下载,然后放进项目进行引用
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="dist/vue.js"></script>

<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="dist/vue.min.js"></script>

附:

  • 什么是CDN加速?

CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。

CDN的关键技术主要有内容存储和分发技术,CND加速主要是加速静态资源,如网站上面上传的图片、媒体,以及引入的一些Js、css等文件。

CND加速需要依靠各个网络节点,例如100台CDN服务器分布在全国范围,从上海访问,会从最近的节点返回资源,这是核心。

CND服务器通过缓存或者主动抓取主服务器的内容来实现资源储备。

CDN基本原理:将源站内容分发至最接近用户的节点,使用户可就近取得所需内容,提高用户访问的响应速度和成功率。

  • 什么是BootCDN?

BootCDN是Bootstrap中文网支持并维护的前端开源项目免费CDN服务,致力于为Bootstrap、jQuery、Angular、Vuejs一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。

官网:https://www.bootcdn.cn/
使用cdn的好处:
    1.不用担心自己网站访客,在任何时间,任何地点,任何网络运营商,都能快速打开网站,说白了就是把你的资源交给第三方托管,它快你的网站访问就快,并且不需要消耗你的网站流量,提升访问速度。
    2.各种服务器虚拟主机带宽等采购成本,包括后期运维成本都会大大减少。
    3.给网站直接带来的好处就是:流量,咨询量,客户量,成单量,都会得到大幅度提升。
    想想看,一个打开速度很快的网站和一个打开速度很慢的网站,用户的体验是完全不一样的,那么哪些群体使用更广泛呢?

使用cdn的坏处:
    说完好处也要说说坏处了,对于不使用cdn的网站来说,它崩任他崩,我自坐如松。对于少数资源依赖cdn的网站来说,可能仅影响体验,比如页面显示、js事件等,但对于严重依赖cdn的网站来说,只能说同归于尽了

3、Vue初体验

相关代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue入门</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 指定vue管理内容区域,通常我们也把它叫做边界,这意味着我们接下来的改动全部在指定的div内,div外部不受影响 -->
		<div id="app">
			<h3>{
   {title}},{
   {time}}</h3>
		</div>
	</body>
	
	<script>
		// 作用是将Vue实例挂载到具体的边界,那么这个边界就会被Vue这个渐进式框架所管理
		// 注意:边界不能有兄弟标签,边界一定是根标签
		new Vue({
			el: "#app",
			data(){
				return{
					title: "Hello Vue",
					time: new Date().toLocaleString()
				}
			}
		});
	</script>
</html>

4、v-on实例

相关代码: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on实例</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 指定vue管理内容区域,通常我们也把它叫做边界,这意味着我们接下来的改动全部在指定的div内,div外部不受影响 -->
		<div id="app">
			<h3>{
   {title}},{
   {time}}</h3>
			<button v-on:click="click">点我</button>
		</div>
	</body>
	
	<script>
		new Vue({
			el: "#app", //DOM元素,挂载视图模型
			data(){ //定义属性,并设置初始值
				return{
					title: "Hello Vue",
					time: new Date().toLocaleString()
				}
			},
			methods:{ //定义方法,用于事件交互时使用的函数  
				click: function(){
					console.log("我来啦")
				}
			}
		});
	</script>
</html>

注1:data在组件开发中的写法必须是一个函数

注2:vue指令:指的是是带有“v-”前缀的特殊属性

注3:用v-on:click指令绑定单击事件

5、V-model(双向数据绑定)

数据的改变会引起DOM的改变,DOM的改变也会引起数据的变化

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

用v-model指令在表单控件元素上创建双向数据绑定,用v-once指令进行单向绑定

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

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

相关代码: 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue双向数据绑定</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 指定vue管理内容区域,通常我们也把它叫做边界,这意味着我们接下来的改动全部在指定的div内,div外部不受影响 -->
		<div id="app">
			<h3>{
   {title}},{
   {time}}</h3>
			<input type="text" v-model="count" />
			<button v-on:click="add">自增</button>
		</div>
	</body>
	
	<script>
	 	var vm = new Vue({
			el: "#app",
			data(){
				return{
					title: "Hello Vue",
					time: new Date().toLocaleString(),
					// 数据的改变会引起DOM的改变
					// 注意:只有当实例被创建时data中存在的属性才是响应式的 
					count: 0
				}
			},
			methods:{
				add: function(){
					// DOM的改变也会引起数据的变化
					this.count++;
					
					// this在methods属性的方法里指向当前Vue实例   
					console.log("count=",this.count);
				}
			}
		});
		
		console.log("vm.count=",vm.count);
		console.log("vm.$data.count=",vm.$data.count);
	</script>
</html>

双向数据绑定效果:

6、钩子函数

每个Vue实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。

同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

这个过程类似于Servlet生命周期及相关方法,实例生命周期详情见下图:

相关代码: 

<!DOCTYPE html>
<html>
<head>
    <title>钩子函数</title>
    <meta charset="utf-8">
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>
<body>

<div id="app">
    <p>{
   { message }}</p>
    <input type="button" @click="change" value="更新数据" />
    <input type="button" @click="destroy" value="销毁" />
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            message : "Welcome Vue"
        },
        methods:{
            change() {
                this.message = 'Datura is me';
            },
            destroy() {
                vm.$destroy();
            }
        },
        beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:red","data   : " + this.$data); //undefined
            console.log("%c%s", "color:red","message: " + this.message);//undefined
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
            console.log("%c%s", "color:green","data   : " + this.$data); //[object Object]  =>  已被初始化
            console.log("%c%s", "color:green","message: " + this.message); //Welcome Vue  =>  已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:green","el     : " + (this.$el)); //已被初始化
            console.log(this.$el); // 当前挂载的元素
            console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:green","message: " + this.message); //已被初始化
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:green","el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:green","data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:green","message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
            alert("更新前状态");
            console.group('beforeUpdate 更新前状态===============》'); //这里指的是页面渲染新数据之前
            console.log("%c%s", "color:green","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:green","data   : " + this.$data);
            console.log("%c%s", "color:green","message: " + this.message);
            alert("更新前状态2");
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:green","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:green","data   : " + this.$data);
            console.log("%c%s", "color:green","message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red","data   : " + this.$data);
            console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>
  •  create 和 mounted

beforecreated:el 和 data 并未初始化

created:完成了 data 数据的初始化,el没有

beforeMount:完成了 el 和 data 初始化

mounted :完成挂载

另外如上图,在挂载前状态,我们能发现el还是 { {message}},这里就是应用的 Virtual DOM(虚拟Dom)技术,先把坑占住了,到后面mounted挂载的时候再把值渲染进去

  • update

我们单击页面中的“更新数据”按钮,将数据更新,下面就能看到data里的值被修改后,将会触发update的操作

注意:beforeUpdate是指view层的数据变化前,不是data中的数据改变前触发。因为Vue是数据驱动的,注意观察弹窗就容易发现

  • destroy

销毁完成后,我们再重新改变message的值,vue不再对此动作进行响应了。但是原先生成的dom元素还存在,可以这么理解,执行了destroy操作,后续就不再受vue控制了,因为这个Vue实例已经不存在了。
我们单击页面中的“销毁”按钮,将指定的Vue实例销毁

钩子函数总结:

beforecreate:举个栗子,可以在这加个loading事件
created :在这结束loading,还做一些初始化,实现函数自执行
mounted : 在这发起后端请求,拿回数据
beforeDestory: 你确认删除XX吗? 
destoryed :当前组件已被删除,清空相关内容

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42687829/article/details/100639624

智能推荐

尺寸(Dimension)_yuanlong_zheng的博客-程序员秘密

原文:file:///D:/AndroidDevelop/android-sdk/docs/guide/topics/resources/more-resources.html#Dimension尺寸:dp:密度无关象素-一个基于屏幕物理密度的抽象单位。这些单位都是相对于一个160dpi(点每英寸)的屏幕而言。因此,不论屏幕密度是多少,160dp就等于一象素。这个“密度无关

lua代码加密策略_云哥哥_的博客-程序员秘密_lua加密

1、使用类似cocos的加密方式,对文件打上加密标记头,然后文件内容呢,加密后存放。需要修改lua加载文件的部分代码。安全性:基于算法保密+密钥保密,对于很多cocos程序来说,密钥是写死在代码里,所以通过反编译代码很容易获取到2、luac编译后使用,luac编译后的代码,采用工具能够恢复一部分,可读性不强,可以作为一般应用的加密方式3、将加密解密的函数,由服务端传入。客户端执行这个函数...

量化投资学习——高频交易研究_量化橙同学的博客-程序员秘密_量化投资 高频交易

高频交易的行为: (一)做市行为  高频做市行为一方面为市场提供流动性,另一方面通过价差收益和交易所返利两种方式实现盈利。在传统证券市场中流动性的主要提供者是做市商,近年来,美国证券市场高频交易商已经逐渐取代了传统的做市商,成为了最大的流动性提供者。由于高频交易单笔获利极小,因此需要交易量来保证自己获利,这就会为市场带来大量流动性。  高频做市行为需要防范被逆向选择的风险。一般认为,越靠近最新形成的价格的委托单,遭遇的逆向选择越少。这是因为,新价格形成之际是市场信息最不充分的时刻,也是投资者对下

常用的第三方库_缘的博客-程序员秘密

原文链接列举一下在平常开发中的一些常用的工具xcode 插件Alcatraz: xcode 插件管理工具FuzzyAutocompletePlugin: 代码智能提示、自动补全KSImageNamed-Xcode: 引入图片自动提示,预览ColorSense-for-Xcode: 代码生成颜色预览,可视化编辑VVDocumente

spring微服务学习5_coffeesunshine的博客-程序员秘密

一、客户端弹性模式4种客户端弹性模式:客户端负载均衡(client load balance )模式;断路器(circuit breaker)模式;后备(fallback)模式;舱壁(bulkhead)模式.1、客户端负载均衡(client load balance )模式客户端负载均衡涉及让客户端从服务发现代理(如 Netflix Eureka )查找服务的所有实例 ,然后缓存服务实例的物理位置。每当服务消费者需要调用该服务实例时,客户端负载均衡器将从它维护的服务位置池返回一个位置。2

随便推点

收货MIGO_weixin_34290000的博客-程序员秘密

FUNCTION zrfc_mm003.*"----------------------------------------------------------------------*"*"Local interface:*" IMPORTING*" VALUE(CALLNO) TYPE ZCALLNO*" VALUE(BUDAT) LIKE BAP...

VsCode 出现 UnicodeEncodeError: 'ascii' codec can't encode characters in position 311-314:_ReBrain的博客-程序员秘密

推荐一个简单的方法:将以下代码放到代码开头运行就ok。-*-coding:utf-8 -*-import ioimport sys#改变标准输出的默认编码sys.stdout=io.TextIOWrapper(sys.stdout.buffer,encoding='utf8')...

如何使用xstream解析网络上请求的xml文件,解析并展示_偶像宣言的博客-程序员秘密

//主界面package com.example.mounth_test;import java.util.ArrayList;import java.util.List;import com.example.adapter.FragAdapter;import android.app.Activity;import android.graphics

STM32 USBHID应用_imxiangzi的博客-程序员秘密_stm32 usbhid

    关于USB接口不多说了,你可以到网络上搜索很多的。我这里只是说说STM32的应用,具体USB的东西不多说。    我在设计STM32程序的时候,如果需要和上位机通信,一般来说串口,485啊,或者CAN,也可以USB,或者网络通信,下面具体说说USB通信,正点原子的开发板提供了一些关于USB接口的使用例程,如果你将那个例程看懂的话,自己移植一个关于HID或者虚拟串口,甚至自己写一个固件,设计...

【Redis学习笔记】redis哨兵模式选举机制_夏付国的博客-程序员秘密_redis哨兵选举机制

文章目录1. 选举过程1.1. 主观下线1.2. 客观下线1.3. Sentinel集群选举Leader1.4. Sentinel Leader决定新主节点2. 为什么Sentinel集群至少3节点当redis集群的主节点故障时,Sentinel集群将从剩余的从节点中选举一个新的主节点,有以下步骤:故障节点主观下线故障节点客观下线Sentinel集群选举LeaderSentinel Leader决定新主节点1. 选举过程1.1. 主观下线Sentinel集群的每一个Sentinel节点会定时

推荐文章

热门文章

相关标签