[JavaScript知识库] vue第一弹

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue第一弹 -> 正文阅读

[JavaScript知识库]vue第一弹

vue基础

Vue 是一套用于构建用户界面的渐进式javascript框架，与其它大型框架不同的是：Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，另外一个方面,当Vue与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。 Vue.js是用于构建交互式的Web界面的库，它提供MVVM数据绑定和一个可组合的组件系统，具有简单、灵活的API。从技术上讲，Vue.js集中在MVVM模式上的视图模型层(viewModel)，并通过双向数据绑定连接视图（view）和模型（model）。实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其他的MVVM框架，Vue.js更容易上手，它让你通过简单而灵活的API创建由数据驱动的UI组件。 Vue.js是一个构建数据驱动的Web界面的库，Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。 Vue.js自身不是一个全能框架——它只聚焦于视图层非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js也能完美地驱动复杂的单页应用。
Vue.js的定位是一个渐进式框架前端三大mvvm框架 vue , react ,angular
Vue.js受到越来越多关注的一个重要原因：你只需要具备基本的HTML/JavaScript/CSS 基础，就可以快速上手，让你用上这些现代Web开发中的先进技术来提高你的生产力：
vue官网
在这里插入图片描述
尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，现任职于纽约Google Creative Lab。
2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 库，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统
2016年9月3日，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入 Weex 团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script> ?注意引用vue.js
	</head>
	<body>
		<div id="app">  ?注意是id
			<h1>Vue</h1>
			<p>{{msg}}</p><!-- {{}}指令渲染 -->
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",//指定模板标签 ?与上面id对应 用class  tag标签都可以 建议用#选择器
				data:{
					msg:"你好vue!",?   ","不可少
				}//指定数据
			})
		</script>
	</body>
</html>

模板语法-文本语法

文本渲染指令

{{}}  内部支持表达式只解析文本---||对象  {{msg.name}}    	数组   {{msg[0]}}


v-text	内部支持表达式只解析文本
v-html  渲染html文本  放标签也可以解析

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>Vue</h1>
			1.<p>{{msg}}</p><!-- {{}}指令渲染 -->
			2.<p v-text="msg"></p>
			<p>{{msg}}</p> <!-- 不解析标签 -->?
			1.2都可以输出文本
			<p v-text="msg2"></p> <!-- 不解析标签 -->?
			<p v-html="msg2"></p>  <!-- 解析标签 -->?
			
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					msg:"你好vue!",
					msg2:"<strong>河南</strong>是个好地方"
				}
			})
		</script>
	</body>
</html>

条件指令

属性绑定
v-bind:属性=“”指令值简写 :属性=“值”
v-show v-if 隐藏方式
如果不太懂下面有案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定条件渲染</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p v-if="isLog">欢迎回来，退出</p>
			<p v-else>登录注册</p>
			<!-- 绑定属性指令用 v-bind v-bind指令 :title参数-->?
			<p v-bind:title="title">{{msg}}</p>
			<p :title="title">{{msg}}</p>
			<!-- v-model 是绑定表单的value值 -->
			<input type="text" v-model="title"/><br>
			<!-- v-bind:disabled绑定表单是否可用 -->
			<button v-bind:disabled="flag">按钮</button>
			<h1>v-if 与 v-show的区别</h1>?
			<p v-if="flag2">我是v-if控制</p>
			<p v-show="flag2">我是v-show控制</p>
			<!-- v-if 隐藏时候直接移除节点，v-show是通过css方式隐藏 -->?
			<!-- 频繁切换显示与隐藏用v-show 一次性切换显示用x-if -->?
			<h1>v-else-if</h1>
			<p v-if="score>=90">优秀</p>
			<p v-else-if="score>=80">良好</p>
			<p v-else-if="score>=70">中等</p>
			<p v-else-if="score>=60">及格</p>
			<p v-else>不及格:打一顿</p>
			<input type="text" v-model="score" />
			
			
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",//指定模板
				data(){    //指定数据 data:function(){} 简写
					return {
						msg:"你好vue",
						title:"我爱你",
						flag:false,
						isLog:false ,//登录状态
						flag2:false,
						score:75
						
					}
				}
				
			})
			
		</script>
	</body>
</html>

案例：输入分数可以显示对应的状态

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>属性绑定条件渲染</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1>v-else-if</h1>
			<p v-if="score>=90">优秀</p>
			<p v-else-if="score>=80">良好</p>
			<p v-else-if="score>=70">中等</p>
			<p v-else-if="score>=60">及格</p>
			<p v-else>不及格:打一顿</p>
			<input type="text" v-model="score" />
			绑定input与score的值
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data(){    //指定数据 data:function(){} 简写
					return {
						score:75
						
					}
					
				}
				
			})
			
		</script>
	</body>
</html>

列表渲染

v-for=“item in list” （list 要遍历的数组 item当前遍历的项目）
v-for=“（item，item）in list” index 当前遍历的项的索引从0开始

下面有案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表渲染</title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p v-for="item in list">{{item}}</p>?对象循环输出
			
			<p v-for="(item,index) in list">{{index+1}}-{{item}}</p>?索引
			<!-- key优化vue的渲染 (要求是唯一) 推荐使用 :key优化 -->
			<p v-for="(item,index) in list" :key="index">{{index+1}}-{{item}}</p>
			
			<p v-for="item in 5">{{item}}</p>?<!-- 对象的遍历 -->
			
			<h3 v-for="(item,index) in users" :key="item.name">?<!-- 对象的遍历 -->
				姓名:{{item.name}},
				年龄:{{item.age}}
			</h3>
			<p v-for="(user,i) in users" :key="user.name">
				{{i+1}}-{{user.name}} :{{user.age}}
			</p>
			 
			 
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					list:["vue","react","angular"],
					users:[
						{name:"ww",age:18},
						{name:"ss",age:20},
						{name:"qq",age:22}
						]
				}
			})
			
			
		</script>
	</body>
</html>

事件修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件渲染</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<button v-on:click="num++">{{num}}</button>?
			<button @click="num+=5">{{num}}</button>?点击事件
			
			<button @click="say(2)">加2</button>
			
			<button @click="say(5)">小可爱</button>
			
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					num:1,	
				},
				methods:{
					say(n){
						alert("你好");
						// this当前new Vue出来的实例
						this.num+=n; 
					}
				}
			})
		</script>
	</body>
</html>

阻止事件冒泡和默认事件

.stop 修饰符阻止事件冒泡
prevent 阻止默认事件修饰符
案列如下自行参考

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例</title>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<!-- .stop 修饰符阻止事件冒泡 -->
			<p @click="pclick()">
				<button @click.stop="bclick()">按钮</button>
				<!-- prevent 阻止默认事件修饰符 -->
				<a href="http://www.baidu.com" @click.stop.prevent="aclick()">百度</a>
			</p>
			<!-- .once 只监听一次 -->
			<h3 @click.once="hclick()">爱就一个字，我就说一次</h3>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					num:1,	
				},
				methods:{
					pclick(){alert("p被点击了")},
					bclick(){alert("按钮被点击了")},
					aclick(){alert("a标签被点击了")},
					hclick(){alert("我爱你!")}	
				}
			})
			
		</script>
	</body>
</html>