Vue.js 新手入门教程与实操展示 (一)

最新推荐文章于 2024-07-20 16:46:53 发布

一个平凡de人

最新推荐文章于 2024-07-20 16:46:53 发布

阅读量598

点赞数 2

分类专栏： web开发文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/weixin_46703850/article/details/120708825

版权

推荐教程 :
Vue.js官网
 Vue.js视频教程
在这里插入图片描述

1.Vue.js 介绍

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

2.Vue.js 引入(安装)

1.直接用 script 引入(新手推荐)

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

2.npm

# 最新稳定版
$ npm install vue

3.Vue开发工具(强烈推荐)

HBuilderx

4. Hello Vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
		  {
  { message }} 
		</div>
		
		<script type="text/javascript">
		var app = new Vue({
     
			el: '#app',
			data: {
     
				message: 'Hello Vue!'
			}
		});
		</script>
		
	</body>
</html>

在这里插入图片描述

5. 数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello Vue</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{
  {a}}
		</div>
		
		<script type="text/javascript">
		var data = {
      a : 1 };
		var vm = new Vue({
     
			el   : "#app",
			data : data
		});
		
		// 监听事件-监听变量 'a' 值的变化
		vm.$watch('a', function(newVal, oldVal){
     
			console.log(newVal, oldVal);
		})
		
		vm.$data.a = "old data"
		
		</script>
		
	</body>
</html>

在这里插入图片描述

6. 实例生命周期钩子

在不同生命周期执行(插入)自定义的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello Vue</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{
  {msg}}
		</div>
		<script type=