VUE框架介绍

介绍

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

安装

通过 `<script>` 引入

如果想快速体验 Vue ，可以在 html 中直接引入 Vue.js，如下：

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

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 生成版本最好明确到一个版本号，以免造成非预期的影响 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

NPM

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

https://www.webpackjs.com/concepts/loaders/

# 最新稳定版
$ npm install vue

命令行工具

…

https://cli.vuejs.org/zh/guide/deployment.html

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，数据改变会直接反应在界面上。每个 Vue 实例有着自己的生命周期，生命周期图示如下：

生命周期

参考如上生命周期，同时有对应的生命周期函数回调，与Android Activity 的生命周期函数类似。

条件和循环

双向绑定

组件化

模板语法

插值`<slot>`

指令

以 v- 作为前缀

缩写

v-bind:href ==> :href v-bind:[key] ==> :[key] v-on:click ==> @click

computed & watch

以上各项可以demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{ message }}

			<!-- if条件 -->
			<div v-if="show">
				我是if
			</div>
			<div v-else>
				我是else
			</div>

			<!-- 循环 -->
			<ul>
				<li v-for="todo in todos">
					{{ todo.text }}
				</li>
			</ul>

			<!-- 事件绑定 -->
			<button @click="reverseMessageA">反转</button>

			<!-- 双向绑定 -->
			<input v-model="message">

			<!-- 计算属性 -->
			<p>{{reverseMessage}}</p>
		</div>

		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					message: 'Hello Vue!',
					show: false,
					todos: [{
							text: 'John'
						},
						{
							text: 'Smith'
						},
						{
							text: '小张'
						}
					]
				},
				methods: {
					reverseMessageA: function() {
						this.message = this.message.split('').reverse().join('');
					}
				},
				computed:{
					reverseMessage: function() {
						return this.message.split('').reverse().join('');
					}
				},
				watch:{
					message: function(val) {
						console.log('message changed:' + val);
					}
				}
			});
		</script>

	</body>
</html>

web 框架性能对比

https://stefankrause.net/js-frameworks-benchmark8/table.html

参考

https://cn.vuejs.org/v2/guide/installation.html

文章目录

介绍

安装

通过 <script> 引入

NPM