vue学习笔记1

最新推荐文章于 2024-10-13 14:27:27 发布

hL？

最新推荐文章于 2024-10-13 14:27:27 发布

阅读量207

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/hl_dont/article/details/89669653

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>vue基础</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<div id="app">
  {{ message }}
</div>
<script>
//hello world
var app = new Vue({
  el: '#app',
  data: {
    message: 'zaima?'
  }
});
</script>
<hr/>

<div id="v-b">
	<span v-bind:title="msg">
		title在vue里面
	</span>
	<br/>
	<span>{{msg}}</span>
</div>
<script>
//2. 使用vue对title进行操作
//v-bind 指令（带有前缀v-）
//v-bind 绑定xxxx和xxx在一起
var app2 = new Vue({
	el:"#v-b",
	data:{
		msg:"hi..."
		//'日期' + String(new Date())
	}
});
</script>

<hr/>

<!--v-model的使用-->
<!--主要使用在表单、等-->
<div id="shuang">
	<p>vue双向绑定</p>
	<input name="text" v-model:value="da" />
	<span>{{da}}</span>
	<pre>data{{ $data | json}}</pre>
</div>
<script>
	//双向绑定
	//绑定xxxx和xxx在一起,使它们的内容保持一致，动态的
	var p= new Vue({
		el:"#shuang",
		data:{
			da:""
		}
	});
</script>



<hr/>
<script>
//3. 以前对title属性的操作
function be() {
	var p= document.getElementById('b1');
	p.title = "点就送";
}
</script>
<button onclick="be()">点就送</button>
<div>
	<span  id ="b1" title="be()">
	<!--title不能调用js中的函数，因为识别为文本，不能识别为函数-->
		title在以前1
	</span>
</div>

<hr/>

<!--关于vue中的el属性-->

<div id="zong">
	{{mm}}
	<div class="v1">{{mm}}</div>
	<div class="v2">{{mm}}</div>
	<div class="v3">{{mm1}}</div>
	<div class="v4">{{mm1}}</div>
	<div class="v5">{{mm2}}</div>
</div>

<script>
	var p= new Vue({
		//不完全等同于选择器
		//el:'#zong',					//全部都显示
		//el:'#zong .v1',				//仅v1显示
		//el:'#zong .v1,#zong .v2',		//仅v1显示
		//el:'#zong .v1',				//仅v1显示
		//el:'.v1',						//仅v1显示
		el:'#zong .v1',
		el:'#zong .v2',					//仅v2显示- =
		data:{
			mm:"1",//注意涉及多个参数时，一定要定义，不能只声明，否则报错
			mm1:"2",
			mm2:3
		}
	});
</script>



</body>
</html>