vue2 介绍 - uniapp

1.1 介绍

Vue.js 是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，只关注视图层，易于上手。所有东西都是响应式的。

1.2 vue相比传统js的开发优势

在传统开发中，用原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。

vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和 DOM ，这样大大加快了访问速度和提升用户体验。

vue的优势：

轻量级渐进式框架
视图、数据和结构的分离
响应式双向数据绑定
组件化
虚拟DOM
运行速度快，易于上手
便于与第三方库或既有项目整合

1.2.1 文件类型变化

以前是.html文件，开发也是html，运行也是html。
现在是.vue文件，开发是vue，经过编译后，运行时已经变成了js文件。
现代前端开发，很少直接使用HTML，基本都是开发、编译、运行。所以 uni-app 有编译器、运行时的概念。

1.2.2 文件内代码架构的变化

以前一个 html 大节点，里面有 script 和 style 节点；

	<!DOCTYPE html>  
	<html>  
		<head>  
			<meta charset="utf-8" />  
			<title></title>  
			<script type="text/javascript">  
			</script>  
			<style type="text/css">  
			</style>  
		</head>  
		<body>  
		</body>  
	</html>

现在 template 是一级节点，用于写tag组件， script 和 style 是并列的一级节点，也就是有3个一级节点。这个叫vue单文件组件规范sfc。

	<template>  
		<view>  
		注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。  
		</view>  
	</template>  
	<script>  
		export default {  
		}  
	</script>  
	<style>  
	</style>

1.2.3 外部文件引用方式变化

以前通过script src、link href引入外部的js和css；

	<script src="js/jquery-1.10.2.js" type="text/javascript"></script>  
	<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>

现在是es6的写法， import 引入外部的js模块(注意不是文件)或css；

js要require进来，变成了对象。在hello uni-app的 common 目录有一个工具类 util.js ，可以在hello uni-app中搜索这个例子查看。hello uni-app示例代码可从 github 获取。

	<script>  
		var util = require('../../../common/util.js');  //require这个js模块  
		var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法  
	</script>

而在这个 util.js 里，要把之前的 function 封装为对象的方法

	function formatTime(time) {  
		return time;//这里没写逻辑  
	}  
	module.exports = {  
		formatTime: formatTime  
	}

当然还有一些高级的用法

	// 直接使用js模块的属性。在hello uni-app有示例 
	var dateUtils = require('../../../common/util.js').dateUtils; 
	// 将js导入并重命名为echarts，然后使用echarts.来继续执行方法。在hello uni-app有示例 
	import * as echarts from '/components/echarts/echarts.simple.min.js';

css外部文件导入。全局样式，在根目录下的 app.vue 里写入，每个页面都会加载 app.vue 里的样式。

	<style>  
		@import "./common/uni.css";  
		.uni-hello-text{  
			color:#7A7E83;  
		}  
	</style>

另外，vue支持组件导入，可以更方便的封装一个包括界面、js、样式的库。详见

1.2.4 组件/标签的变化

以前是html标签，比如 <div> ，现在是小程序组件，比如 <view> 。

那么标签和组件有什么区别，不都是用尖括号包围起来一段英文吗？

其实标签是老的概念，标签属于浏览器内置的东西。
但组件，是可以自由扩展的。类似你可以把一段js封装成函数或模块，你也可以把一个ui控件封装成一个组件。

uni-app 参考小程序规范，提供了一批内置组件。

1.2.5 js的变化

以前的 DOM 操作，如果你想改变某个 DOM 元素的显示内容，比如一个view的显示文字：给view设id，然后js里通过选择器获取 DOM 元素，进一步通过js进行赋值操作，修改 DOM 元素的属性或值。

	<html>  
		<head>  
			<script type="text/javascript">  
				document.addEventListener("DOMContentLoaded",function () {  
					document.getElementById("spana").innerText="456"  
				})  
				function changetextvalue () {  
					document.getElementById("spana").innerText="789"  
				}  
			</script>  
		</head>  
		<body>  
			<span id="spana">123</span>  
			<button type="button" onclick="changetextvalue()">修改为789</button>  
		</body>  
	</html>

现在的做法，是vue的绑定模式，给这个 DOM 元素绑定一个js变量，在script中修改js变量的值，DOM 会自动变化，页面会自动更新渲染。
- 前端改用 MVVM (Model-View-ViewModel的简写)模式，简单来说，Model:代表数据模型，View:只专注视图UI处理，ViewModel:只处理业务和数据。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷，大幅减少代码行数，同时差量渲染性能更好。
- uni-app 使用vue的数据绑定方式解决js和 DOM 界面交互的问题。

	<template>  
		<view>  
			<text>{{textvalue}}</text><!-- 这里演示了组件值的绑定 -->  
			<button :type="buttontype" @click="changetextvalue()">修改为789</button><!-- 这里演示了属性和事件的绑定 -->  
		</view>  
	</template>  
	<script>  
		export default {  
			data() {  
				return {  
					textvalue:"123",  
					buttontype:"primary"  
				};  
			},  
			onLoad() {  
				this.textvalue="456"//这里修改textvalue的值，其实123都来不及显示就变成了456  
			},  
			methods: {  
				changetextvalue() {  
					this.textvalue="789"//这里修改textvalue的值，页面自动刷新为789  
				}  
			}  
		}  
	</script>

1.3 在 uni-app 中使用差异

uni-app 在发布到H5时支持所有vue的语法；发布到App和小程序时，由于平台限制，无法实现全部vue语法，但 uni-app 仍是对vue语法支持度最高的跨端框架。

相比Web平台， Vue.js 在 uni-app 中使用差异主要集中在两个方面：

新增：uni-app 除了支持 Vue 实例的组件生命周期，还拥有应用生命周期及页面的生命周期。
受限：相比 Web 平台，在小程序和 App 端部分功能支持不完善，具体见兼容性列表。

1.4 模板语法

1.4.1 插值

数据绑定最常见的形式就是文本插值：

<template>
	<view>
		<view>Message: {{ msg }}</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				msg: 'Hello Vue!'
			}
		}
	}
</script>

里的内容将会被替代为对应数据对象上msg的值。无论何时，绑定的数据对象上msg发生了改变，插值处的内容都会更新。

使用 JavaScript 表达式

迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。

<template>
    <view>
      <view>{{ number + 1 }}</view>
      <view>{{ ok ? 'YES' : 'NO' }}</view>
      <!-- 把一个字符串分割成字符串数组,颠倒其元素的顺序,把数组中的所有元素放入一个字符串 -->
      <view>{{ message.split('').reverse().join('') }}</view>
    </view>
</template>
<script>
  export default {
    data() {
      return {
        number:1,
        ok:true,
        message: 'Hello Vue!'
      }
    }
  }
</script>

<template>
  <view>
      <view v-for="(item,index) in 10">
      <!-- 通过%运算符求余数，实现隔行换色的效果 -->
      <view :class="'list-' + index%2">{{index%2}}</view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return { }
    }
  }
</script>
<style>
  .list-0{
    background-color: #aaaaff;
  }
  .list-1{
    background-color: #ffaa7f;
  }
</style>

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

<template>
  <view>
    <!-- 这是语句，不是表达式 -->
    <view>{{ var a = 1 }}</view>
    <!-- 流控制也不会生效，请使用三元表达式 -->
    <view>{{ if (ok) { return message } }}</view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        ok:true,
        message: 'Hello Vue!'
      }
    }
  }
</script>

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单：

Infinity

undefined

NaN

isFinite

isNaN

parseFloat

parseInt

decodeURI

decodeURIComponent

encodeURI

encodeURIComponent

Math

Number

Date

Array

Object

Boolean

String

RegExp

Map

Set

JSON

Intl

你不应该在模板表达式中试图访问用户定义的全局变量。

posted @ 2023-10-03 17:23 Cold的窝阅读(22) 评论(0) 收藏举报

刷新页面返回顶部

Cold的窝