vue-个人笔记一_vue-analgtics-CSDN博客

本文链接：https://blog.csdn.net/qq_37604054/article/details/102794260

介绍

Vue ：是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是， Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，
渐进式框架：个人理解为类似于懒加载，用到的时候再去取，不用的时候就不加载

开始使用

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
	<title>document</title>
	<link />
	<!--1、引入vue.js（开发版）-->
	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	<!--script src="https://cdn.jsdelivr.net/npm/vue"></script>(生产环境版本)-->
</head>
<body>
	<!--2、创建挂载元素点-->
	<div id="container">
		<!--
			使用{{}}来获取实例中数据对象，可以实现简单的逻辑运算；如：
			{{msg == 'hello'?msg+'world'?''}}
		-->
		{{msg}}
		{{addMsg}}//使用计算属性
	</div>
	<script>
		//3、创建实例
		const vm = new Vue({
			el:"#container",//用来指定当前dom中的挂载容器，可以是css选择器，也可以是一个 HTMLElement 实例
			data:{//当前实例的数据对象，可以试一个json对象，可以试一个工厂函数，当为工厂函数是需要返回一个json对象
				msg:'hello',
				date:2019
			},
			template：`<h1>替换或添加挂载容器的内容</h1>`,
			methods:{//定义当前实例的方法
				run(){
					alert(11)
				}
			},
			computed:{//计算属性，可以用来实现复杂的逻辑处理;使用方法同data元素的msg变量,注：必须返回一个结果值
				addMsg(){
					//this指向当前vm
					return this.msg == 'hello'?this.msg+'world'?''
				}
			},
			watch:{//属性监听器，用来监听当前数据对象中的变化，命名必须和变量名一致
				/**
				*	此方法可以监听到msg变量的变化,两个参数
				*	newVal:改变后的值
				*	oldVal:原始值
				*/
				msg(newVal,oldVal){

				},
				/**
				*	监听date的变化
				*/
				date(newVal){
					
				}
			}
		})
		//可以访问实例的元素
		//vm.run();
		//vm.msg
	</script>
</body>
</html>