Vue学习日志:初识VUE(1)

本文介绍了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>



































评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值