[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(渐进式前端js框架)，适合做前后端分离的项目。
特点：入门简单，中文文档齐全，生态发达（插件多）
在写vue实例第一步首先要把vue.js引入

<script src="js/vue.js"></script>

一.声明式渲染

通过{{}}将数据渲染到dom结构

<div id="app">
			<h1>Vue 开始</h1>
			<p>{{msg}}</p>
			<input type="text" v-model="msg">
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{"msg":"你好世界，你好vue！"}
			})
		</script>

结果
在这里插入图片描述

二、指令

什么是指令：指令是连接Vue对象实例与模板的特殊属性（把vue和html连接在一起）

<div id="app">
			<h1>Vue的指令</h1>
			<h3>文本渲染指令 v-text</h3>
			<p v-text="msg"></p>
			<p v-text="8+5"></p>
			<p v-text="msg+'不能！'"></p>
			<p v-text="tip"></p>
			<h3>文本渲染指令 v-html<br/>（可以解析html标签）</h3>
			<p v-html="tip"></p>
			
			<h3>文本渲染指令 { { } }</h3>
			<p>{{msg}}</p>
			<p>可以编写简单的javascript： {{2+3}}</p>
			<p>msg的长度 {{msg.length}}</p>			
			<p>{{msg.split('').reverse().join('')}}</p>
			<p>{{5>3?'大于':'小于'}}</p>
			
		</div>
		<script>
		// 什么是指令：指令是连接Vue对象实例与模板的特殊属性（把vue和html连接在一起）
		// 什么是vue实例 ：vm就是Vue的实例
		// 什么是模板：#app
		var vm = new Vue({
			el:"#app",//vue指令在#app这个节点启用
			data:{
				msg:"你好我能做你的朋友吗？",
				tip:"<strong>河南</strong>是一个好地方",
			}
		})
		</script>

结果
在这里插入图片描述

三、条件指令

v-if与v-show的区别:
当去隐藏一个节点的时候，
v-show通过css方式隐藏
v-if是通过移除dom来实现
v-show适合频繁切换显示与隐藏
v-if 适合少量切换显示与隐藏

<div id="app">
			<h1>vue条件渲染指令</h1>
			<h3>v-if指令</h3>
			<p v-if="isLog">欢迎回来，我的主人！</p>
			<p v-else>登录，注册</p>
			
			<h3>v-else-if</h3>
			<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>
			
			<h3>v-show</h3>
			<p v-show="isLog">欢迎回来，我的主人！</p>
			<!-- <p>v-if与v-show的区别：<br>
			当去隐藏一个节点的时候，<br>
			v-show通过css方式隐藏<br>
			v-if是通过移除dom来实现</p>
			
			<p>v-show适合频繁切换显示与隐藏 <br>
			v-if 适合少量切换显示与隐藏
			</p> -->
		</div>
		<script>
		var vm = new Vue({
			el:"#app", 
			data(){
				return {
					isLog:ture,
					score:82
				}
			}
		})
		</script>

结果（如果把isLog:true 改成false

欢迎回来，我的主人！

不会显示，显示

）

四、列表渲染指令

<div id="app">
			<h3>复杂列表对象</h3>
			<p v-for="(item,index) in ls" :key="item.name">
				{{index+1}}-{{item.name}}-{{item.age}}
			</p>
			<h3>对象</h3>
			<p v-for="(value,k) in yang" :key="k">{{k}}-{{value}}</p>
			<h3>渲染数字</h3>
	
			<h3>列表渲染指令</h3>
			<p v-for="item in list" :key="item+'a'">{{item}}</p>
			
			<h3>列表渲染指令带索引</h3>
			<p v-for="(item,index) in list" :key="item">{{index+1}}-{{item}}</p>
			
			<h3>优化列表渲染</h3>
			<p v-for="(item,index) in list" v-bind:key="index">{{index+1}}-{{item}}</p>
			<p>key 帮助优化vue内部渲染，key值要求是唯一，还不建议用index，会取数据的id</p>
			
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				data(){
					return{
						ls:[
							{name:"cxx",age:22},
							{name:"wsj",age:18},
							{name:"小王",age:17},
						],
						list:['Vue','react','angular','jQuery'],
						yang:{"name":"阳阳",age:16,sex:"男"}
					}
				}
			})
		</script>

结果
在这里插入图片描述

五、事件处理

v-on：事件名=“事件处理函数”
例如
v-on:click=“showMsg”
v-on:click=“showMsg()”
事件处理函数

methods:{
        showMsg();                             
  }

如果响应函数带括号默认不带 $e v e n t 事件参数如果响应函数不带括号默认全带$ event 时间参数
如果带括号（$event）手动指定事件参数
事件绑定的简写 @click=“showMsg”

<div id="app">
		<h3>事件响应函数</h3>
		<button @click="calc(-1)" :disabled="num<=1">-</button>
		<!-- v-model.number 限定为数字 -->
		<input type="text" v-model.number="num">
		<button @click="calc(1)" :disabled="num>=999">+</button>

		<h3>事件处理</h3>
		<button v-on:click="num++">{{num}}</button>
		<h3>事件处理简写</h3>
		<button @click="num--">{{num}}</button>
	</div>
	<script>
		var vm = new Vue({
			el: "#app",
			methods: {
				calc(step) {
					// 在js中访问data中num值需要加this
					this.num += step;
					// 对num进行限定
					if (this.num < 1) { this.num = 1 }
					if (this.num > 999) { this.num = 999 }
				}
			},
			data() {
				return {
					num: 1
				}
			}
		})
	</script>

结果（点击“+”，”-”所有数字会跟随变化）
在这里插入图片描述

六、属性渲染

v-bind:属性名=“属性值”
v-bind:title=“msg”
v-model 表单属性
:title=“msg” //简写

<div id="app">
			<h3>属性渲染指令</h3>
			<p>{{msg}}</p>
			<input type="text" v-model="msg">
			<p v-bind:title="msg">我是一行可爱的文字</p>
			
			<h3>属性绑定简写</h3>
			<p :title="msg">我是一行可爱的文字</p>
			
			<h3>表单属性绑定</h3>
			<p>
			<!-- checkbox 选中的true，不选中是false -->
				隐私条款 <input type="checkbox" v-model="flag" />
			</p>
			<!-- disabled 取值为true时候，表单不可以用 -->
			<button  :disabled="!flag">注册</button>
		</div>
		<script>
		var vm = new Vue({
			el:"#app", 
			data (){
				return {
					msg:"中国伟大的祖国",
					flag:false,
				}
			},
			 
		})
		</script>

结果（鼠标放在 “

我是一行可爱的文字

”运行结果上会有title提示）
在这里插入图片描述

7、tab案例

<div id="app">
			 <button @click="num=1" :class="num==1?'active':''">html</button>
			 <button @click="num=2" :class="num==2?'active':''">css</button> 
			 <button @click="num=3" :class="num==3?'active':''">vue</button>
			 <div v-if="num==1">html内容</div>
			 <div v-if="num==2">css内容</div>
			 <div v-if="num==3">vue内容</div>
		</div>
		<script>
		var vm = new Vue({
			el:"#app",			 
			 
			data(){
				return {
					num:1
				}
			}
		})
		</script>

结果（点击按钮切换内容）
在这里插入图片描述

8、事件修饰符

<div id="app">
			<h3>事件修饰符</h3>
			<button @click.once="say()">按钮</button>
		</div>
		<script>
			var vm=new Vue({
				el:"#app",
				methods:{
					say(){
						alert("大声说出来")
					}
				},
				data(){
					return{
						num:1
					}
				}
			})
		</script>