.net Vue第一章知识内容

最新推荐文章于 2024-09-13 13:38:18 发布

Reti_

最新推荐文章于 2024-09-13 13:38:18 发布

阅读量211

点赞数

分类专栏： vue 文章标签： html html5 python

本文链接：https://blog.csdn.net/Reti_/article/details/115536812

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

显示内容

第一次写，期望值不要太大

第一次写，期望值不要太大

插值：

插值{{变量名}}
插值 v-text=”变量名”
在这里插入图片描述
写在body里，在body设置一个div,在弄个id

app就是div的id，以下像是xx:xxx,都是写在data里
显示效果

在这里插入图片描述

插入标签

插入标签 v-html=“标签代码”
在这里插入图片描述

双向绑定

双向绑定：v-model=“变量名”，注意：用于input， select， textarea
在这里插入图片描述

当更改文本框里的内容，下面的也会随之改变，但是代码是不变的，当刷新之后还是出现大耳朵图图

动态属性

动态属性：v-bind:属性=“变量名”
在这里插入图片描述

在这里插入图片描述

img里要写地址：./img或图片网址

在这里插入图片描述

事件绑定

v-on:事件=“方法名(参数)”
简写：@事件=“方法名(参数)”
在这里插入图片描述

点击事件写到方法里，显示内容的话写在data里

是否创建标签

v-if=“条件”
在这里插入图片描述

是否显示标签

v-show=“条件”
在这里插入图片描述

在这里插入图片描述
因为是false，所以页面里是不显示的，改为true就可以了

显示列表

v-for=“item in 数组”
在这里插入图片描述

接下来重点：作业

在这里插入图片描述
写一个这个样的计算器，当数字大于10的时候提示不能再加了，当数字小于0的时候不能再减了

计算A+B等于几
附加题：
轮播图

第一章案例：

<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<style>
	.bb{
		color: red;
	}
</style>
<body>
	<!--挂载点-->
	<div id="app">
		<!--插值表达式-->
		<p v-text="msg"></p>
		<br />
        {{count+2}}
        <br />
        {{msgg.toUpperCase()}}
        <br />
        <span v-text="msgg.toUpperCase()"></span>
        <br />
        <span v-html="httml"></span>
        <br /> <!--双向绑定-->
                   名字：<input type="text" v-model="name" />
        <p v-text="name"></p>
        <br /> <!--动态属性-->
        <h1 :class="cla">爱心光波</h1>
        <img v-bind:src="img" />
        <br />      <!--事件绑定-->          
        <button v-on:click="dianji()">点我试试</button>
        <button @click="dianji2()">我就点</button>
        <br /><!--创建标签-->
        <span v-if="aa==true">
        	如果是true显示这个
        </span>
        <span v-else="aa==false">
        	所以爱会消失对吗？
        </span>
        <br /><!--显示标签-->
        <span v-show="cc">
        	爱我吗？
        </span>
        <br />
        <ul v-for="item in list">
        	<li>{{item}}</li>
        </ul>
	</div>
</body>
<script type="text/javascript" src="js/Vue.js" ></script>
<script type="text/javascript" src="js/ajax.js" ></script>
<script type="text/javascript" src="js/axios.min.js" ></script>
<script>
	//声明Vue实例
	var app=new Vue({
		el:"#app",//设置挂载点
		data:{//设置初始化变量
			msg:"Hello VUE!",
			count:1,
			msgg:"hello vue!",
			name:"大耳朵图图",
			httml:'<h1 style="color: green;">你好</h1>',
			cla:"bb",
			aa:false,
			cc:false,
			list:["喜羊羊","美羊羊","懒羊羊","沸羊羊"],
			img:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1573208413,1319933123&fm=26&gp=0.jpg'				
		},
		methods:{
			dianji:function(){
				alert("再点试试！");
				
			},
			dianji2:function(){
				app.msg="shagua"
			}
		}
	});
</script>

作业答案：
在这里插入图片描述