Vue学习记录

最新推荐文章于 2024-11-03 08:41:19 发布

原创最新推荐文章于 2024-11-03 08:41:19 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue

Vue 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Vue.js的基本使用，包括如何通过.vue文件引入Vue，实现数据绑定、指令系统和组件的使用。同时，对比了v-if和v-show的区别，讲解了Vue的模板语法，如插值表达式和指令的使用，以及如何在Sublime中快速创建HTML文件。

8.12

vue.common.js 使Vue支持common

vue.esm.browser.js 使Vue支持ES6

runtime 运行时文件

插值表达式{{}}

指令系统v-xxx

v-if有更高的切换开销，v-show有更高的初试渲染开销

当DOM节点的属性发生改变时，会对template中的DOM都重新渲染

sublime新建HTML 文件名保存为英文名.html，然后英文输入法输入！，再按tab键

Q1：为啥我template引号里面换行了会报错？但是看视频课里老师换行是OK的

https://blog.youkuaiyun.com/qq_43513170/article/details/87872195

A1:人家用的不是单引号'，而是1前面那个符号`。好像是template的语法，后面跟字符串，然后根据ES6的语法，``里面换行了也算字符串。

Q2.index是什么？（v-for）

A2:规定第一个参数为属性，第二个参数为键名，第三个参数为索引（跟参数叫什么变量没关系）

8.15

//基础
//01-VueBasicUse.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="app">
		<h2>{{msg}}</h2>
		<h3>{{1+1}}</h3>
		<h4>{{isTrue}}</h4>
	</div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>

	<script type="text/javascript">
	 	new Vue({
	 		el:'#app',
	 		data:{
	 			//可以是对象，可以是函数
	 			msg:'黄瓜',
	 			isTrue:1 == 1,

	 		},
	 		//template:'<div>{{msg}}<div>'  //优先加载
	 	});
	</script>
	
</body>
</html>

//指令系统
//02-VueInstruction.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type = "text/css">
		.box{
			width: 300px;
			height: 300px;
			background-color: red 
		}
		.active{
			background-color: green
		}
	</style>
</head>
<body>
	<div id="app">
		
	</div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
	<script type="text/javascript">
		//v-text innerText
		//v-html innerHTML
		//v-if有更高的切换开销，v-show有更高的初试渲染开销
		//v-bind 绑定标签属性（内置或者自定义的都可）
		//v-on:原生事件名 = 函数名 绑定点击事件
		var vm = new Vue({
			el:'#app',
			data:function(){
				return{
					msg:'指令系统',
					msg2:'<h2>指令系统</h2>',
					isShow:true,
					isGreen:true,
					text:'哈哈哈',
					menuLists:[
						{id:1,name:'番茄炒蛋',price:30},
						{id:2,name:'一桶豆腐',price:50},
						{id:3,name:'茶香鸡',price:70},
					],
					person:{
						name:'Elle',
						age:20,
					}
				}
			},
			template:`
				<div class = 'app'>
					<h2>{{msg}}</h2>
					<p v-text = "'msg'"></p>
					<p v-text = "msg"></p>
					<div v-html = "msg2"></div>

					<div v-if = 'isShow'>开</div>
					<div v-if = "!isShow">关</div>
					<div v-if = "Math.random() > 0.5">
						显示
					</div>
					<div v-else>
						隐藏
					</div>

					<div class = 'box' v-on:click = 'clickHandler' v-bind:class = "{active:!isGreen}" :aaa='text'></div>

					<ul>
						<li v-for = '(item,index) in menuLists'>
							<h5 v-text = 'item.id'></h5>
							<h3>{{item.name}}</h3>
							<em>{{item.price}}</em>
							<em>{{index}}</em>
						</li>
					</ul>
					<ul>
						<li v-for = '(value,key) in person'>
							{{key}}:{{value}}
						</li>
					</ul>
				</div>
			`,
			methods:{
				clickHandler(e){
					console.log(this);
					this.isGreen = !this.isGreen;
				}
			}
		});
	</script>
	
</body>
</html>

//双向数据绑定
//03-VueDataBinding.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- v-model 双向数据绑定，只体现在UI控件中，只能应用在有value属性的；结合了v-bind，v-on -->
	<div id = "app">
		<!-- <input type="text" v-model = 'msg'> -->
		<input type="text" v-bind:value = 'msg' v-on:input = 'valueChange'>
		<h3>{{msg}}</h3>
	</div>
	<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
	<script type="text/javascript">
		new Vue({
			el:"#app",
			data(){
				return{
					msg:'hhh'
				}
			},
			methods:{
				valueChange(e){
					console.log(e.target.value);
					this.msg = e.target.value;
				}
			}
		});
	</script>
	
</body>
</html>