小白学Vue

最新推荐文章于 2024-08-22 12:01:52 发布

然陈

最新推荐文章于 2024-08-22 12:01:52 发布

阅读量5.1k

点赞数 28

本文链接：https://blog.csdn.net/cj521zhihui/article/details/108243856

版权

vue知识点第一天

1.前端框架

1.dom操作
jquery
2.mvvm
1.angular
指令服务依赖注入
2.react
虚拟dom 组件
3.vue
虚拟dom 组件 +指令

3.mvc
1.m
Model 模型
2.v
View 视图
3.vm
c Ctrl 控制器

4.vue
1.一款构建前端界面的渐进式 mvvm框架
2.特点
1.指令（渲染出视图）
2.模板（渲染出视图）
3.控制器：
数据处理：
1.当数据发生变化时候触发模板重新渲染视图
2.视图发生变化时会更新数据
3.视图View 和数据模型Model 通过 viewModal双向自动更新

5.vue 指令
一：文本渲染：
1.{{}} 文本渲染
2.v-text

二：条件渲染：
1.v-if：
v-if
v-else-if
v-else
特点：当表达式为真当下节点显示
表达式为假当前节点隐藏

2.v-show

3.v-if与v-show区别
1.v-if 条件不满足直接移除节点
2.v-show 条件不满足通过css方式隐藏节点
3.如果频繁切换显示与隐藏建议用v-show
4.如果显示与隐藏切换次数少建议用v-if

三：属性渲染指令
1.v-bind:属性值=“”
2.简写:属性值=“”

6.vue 参数
el：指定模板
data：定义数据
methods：定义方法

写一个案例就理解啦
案例一
从元素里显示对象：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个vue案例</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">		
			<p>{{msg}}</p>
			<p>{{say}}</p>
			<p>{{1+3}}</p>
			<p>{{'你说:'+msg}}</p>
			<p>{{msg.split('').reverse().join('')}}</p>
			<p>msg的长度是：{{msg.length}}</p>
		</div>
		<script>
			new Vue({
				el:"#app", //el 模板指定
				data:{	   //data 定义的数据
					msg:"Hello World",
					say:"吃了吗？"
				}
			})
		</script>
		<!-- 模板语法  文本模板指令 {{}} -->
	</body>
</html>

案例二
从元素里显示对象的第二种方法，也是常用的：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第一个vue案例</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">				
			 <p>{{say}}</p>
			<p v-text="'老师:'+say"></p>
			<p v-html="say"></p>
		</div>
		<script>
			new Vue({
				el:"#app", //el 模板指定
				data:{	   //data 定义的数据
					msg:"Hello World",
					say:"吃了吗？,没有<strong>早饭</strong>"
				}
			})
		</script>
		<!-- 模板语法  文本模板指令 {{}} -->
	</body>
</html>

案例三
vue案例-属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue案例-属性</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">				
			<h1 v-bind:title="mytitle">属性绑定</h1>
			<input type="text" v-bind:value="mytitle">
			<h1 :title="mytitle">我爱我的未来女朋友</h1>
		</div>
		<script>
			new Vue({
				el:"#app",  
				data:{	    
					mytitle:'我爱我的祖国' 
				}
			})
		</script>
	</body>
</html>

案例四
vue案例-条件渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue案例-条件渲染</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">				
			<p v-if="isLog">欢迎回来我的主人 <a href="">退出</a></p>
			<p v-else>您还没有登录，请求 <a href="">登录</a> <a href="">注册</a></p>
		</div>
		<script>
			new Vue({
				el:"#app",  
				data:{	    
					isLog:false
				}
			})
		</script>
	</body>
</html>

案例五
vue案例-条件渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue案例-条件渲染</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">				
			 <p v-show="score>90">你的考试大于90分给你奖励一个女朋友</p>
			 <p v-show="score<60">你的考试小于60分，拖到外面，突突10分钟</p>
		</div>
		<script>
			new Vue({
				el:"#app",  
				data:{	    
					score:48
				}
			})
		</script>
	</body>
</html>

vue知识点第二天

接昨天vue 指令
四遍历：
v-for=“(item,index) in list”
:key=“唯一值”

五：事件
1.事件默认参数 $event
2.事件修饰符
.stop 阻止事件冒泡
.once 只响应一次
.prevent 阻止默认事件
3.按键修饰符
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
4.表单绑定
1.让表单的值与 vue实例属性绑定
2.checkbox
一个选项选中 true 非 false
多个选项用一个数组接收值