小白学Vue

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
多个选项 用一个数组接收值

  • 28
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 29
    评论
该资源内项目源码是个人的课程设计、毕业设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校生、老师或者企业员工下载习,也适合小白习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计,代码都测试ok,都是运行成功后才上传资源,答辩评审平均分达到96分,放心下载使用! ## 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校生、老师或者企业员工下载习,也适合小白习进阶,当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.md文件(如有),仅供习参考, 切勿用于商业用途。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 29
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值