Vue简介与安装

最新推荐文章于 2022-05-26 22:53:02 发布

Sinner°

最新推荐文章于 2022-05-26 22:53:02 发布

阅读量129

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m0_46890027/article/details/108093823

版权

1.Vue.js是什么？

Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架

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

2. 库和框架的区别

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

2.2 框架(Framework)，是一套完整的解决方案，使用框架的时候，需要把你的代码放到框架合适的地方，框架会在合适的时机调用你的代码
代表：vue
框架规定了自己的编程方式，是一套完整的解决方案
使用框架的时候，由框架控制一切，我们只需要按照规则写代码
框架的侵入性很高(从头到尾)

3. MVVM的介绍

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

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

V（修改数据） -> M
M（修改数据） -> V
数据是核心

4. 安装Vue

4.1 cdn下载(需连接网络)

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

  <!-- 生产环境版本，优化了尺寸和速度 -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>

4.2 手动下载

  <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  <script src="dist/vue.js"></script>

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

   注1：什么是CDN加速？
        CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，
        使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术

    CDN概况
    CDN的全称是Content Delivery Network，即内容分发网络。
   
 CDN加速主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、css等文件。 
        CDN加速需要依靠各个网络节点，例如100台CDN服务器分布在全国范围，从上海访问，会从最近的节点返回资源，这是核心。


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

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

5.Vue实例

每个Vue应用都是通过用Vue构造器创建一个新的Vue实例开始的

var vm = new Vue({
el：’#ID’ // DOM 元素，挂载视图模型，
data：{}, // 定义属性，并设置初始值
methods：{} // 定义方法，用于事件交互时使用的函数
});

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

6.双向数据绑定(Vue two way data binding)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h3>{{msg}}</h3>
			<input type="text" v-model="msg" />
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			data:{
				msg:'hell vue!!'
			}
		})
		
	</script>
</html>

7.Vue核心指令

v-model
v-on