Vue学习日志：初识VUE（1）

最新推荐文章于 2024-08-26 13:26:44 发布

原创最新推荐文章于 2024-08-26 13:26:44 发布 · 436 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js

VUE 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了Vue.js的基本概念，包括安装方法、声明式渲染、条件与循环的使用、用户输入处理及组件化应用构建等核心功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、概念

Vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

二、安装

1、兼容性

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的浏览器。

2、开发版本

直接下载并用script标签引用，Vue会被注册成一个全局变量。

CDN：

推荐：unpkg, 会保持和 npm 发布的最新的版本一致。可以在 unpkg.com/vue/ 浏览 npm 包资源。

也可以从jsdelivr或cdnjs获取，不过这两个服务版本更新可能略滞后。

3、NPM

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

# 最新稳定版
$ npm install vue

独立构建 vs 运行时构建
有两种构建方式，独立构建和运行构建。它们的区别在于前者包含模板编译器而后者不包含。
模板编译用于编译 Vue 模板字符串成纯 JavaScript 渲染函数。如果你想用 template 选项，你需要编译。
模板编译器的职责是将模板字符串编译为纯 JavaScript 的渲染函数。如果你想要在组件中使用 template 选项，你就需要编译器。
。独立构建包含模板编译器并支持 template 选项。它也依赖于浏览器的接口的存在，所以你不能使用它来为服务器端渲染。
。运行时构建不包含模板编译器，因此不支持 template 选项，只能用 render 选项，但即使使用运行时构建，在单文件组件中也依然可以写模板，因为单文件组件的模板会在构建时预编译为 render 函数。运行时构建比独立构建要轻量30%，只有 16.39 Kb min+gzip大小。
默认 NPM 包导出的是运行时构建。为了使用独立构建，在 webpack 配置中添加下面的别名：

resolve: {  
    alias: {    
         'vue$': 'vue/dist/vue.js'  
    }
}

4、命令行工具
Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：

# 全局安装 
vue-cli$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$  vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

在安装之前要检测自己的node和cpm，国内建议使用cnpm

5、开发版本
重要: Github 仓库的 /dist 文件夹只有在新版本发布时才会更新。如果想要使用 Github 上 Vue 最新的源码，你需要自己构建。

git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

6、Bower

# 最新稳定版本
$ bower install vue

7、AMD模块加载器
独立下载版本或通过 Bower 安装的版本已用 UMD 包装，因此它们可以直接用作 AMD 模块。

三、简单介绍
1、声明式渲染
个人理解就是数据的绑定。
Code：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
		  	{{ message }}
		</div>
		<script type="text/javascript">
			var app = new Vue({
			  	el: '#app',
			  	data: {
			    	message: 'Hello Vue!'
			  	}
			})
		</script>
		<div id="app-2">
		  	<span v-bind:title="message">
		    	鼠标悬停几秒钟查看此处动态绑定的提示信息！
		  	</span>
		</div>
		<script type="text/javascript">
			var app2 = new Vue({
			  	el: '#app-2',
			  	data: {
			    	message: '页面加载于 ' + new Date().toLocaleString()
			  	}
			})
		</script>
	</body>
</html>

2、条件和循环
条件渲染和列表渲染
Code：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
		  	<p v-if="seen">现在你看到我了</p>
		</div>
		<script type="text/javascript">
			var app = new Vue({
			  	el: '#app',
			  	data: {
			    	seen: true
			  	}
			})
		</script>
		<div id="app-2">
		  	<ol>
			    <li v-for="todo in todos">
			      	{{todo.text}}
			    </li>
			</ol>
		</div>
		<script type="text/javascript">
			var app2 = new Vue({
			  	el: '#app-2',
				data: {
				    todos: [
				      	{ text: '学习 JavaScript' },
				      	{ text: '学习 Vue' },
				      	{ text: '整个牛项目' }
				    ]
				}
			})
		</script>
	</body>
</html>

3、用户输入处理
todo
Code：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
		  	<p>{{ message }}</p>
  			<button v-on:click="reverseMessage">逆转消息</button>
		</div>
		<script type="text/javascript">
			var app = new Vue({
			  	el: '#app',
			  	data: {
			    	message: 'Hello Vue.js!'
			  	},
			  	methods: {
			    	reverseMessage: function () {
			      		this.message = this.message.split('').reverse().join('')
			    	}
			  	}
			})
		</script>
		<div id="app-2">
		  	<p>{{ message }}</p>
  			<input v-model="message">
		</div>
		<script type="text/javascript">
			var app2 = new Vue({
			  	el: '#app-2',
				data: {
				    message: 'Hello Vue!'
				}
			})
		</script>
	</body>
</html>

4、组件化应用构建
组件模板化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<ol>
		    <!--现在我们为每个 todo-item 提供 todo 对象todo 对象是变量，		    	
		    	即其内容可以是动态的。我们也需要为每个组件提供一个“key”，晚些时候我们会做个解释。-->
			    <todo-item
			      v-for="item in groceryList"
			      v-bind:todo="item"
			      v-bind:key="item.id">
			    </todo-item>
		  	</ol>
		</div>
		<script type="text/javascript">
			Vue.component('todo-item', {
			  	props: ['todo'],
			  	template: '<li>{{ todo.text }}</li>'
			})
			var app7 = new Vue({
			  	el: '#app',
			  	data: {
				    groceryList: [
				      	{ id: 0, text: '蔬菜' },
				      	{ id: 1, text: '奶酪' },
				      	{ id: 2, text: '随便其他什么人吃的东西' }
				    ]
			  	}
			})
		</script>
	</body>
</html>