Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)
Vue的常用指令(文本插值,绑定属性,条件渲染,列表渲染,事件绑定,表单绑定)
Vue 的介绍
Vue 是一套构建用户界面的渐进式前端框架。
只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
特点
易用：在有 HTML CSS JavaScript 的基础上，快速上手。
灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。
核心思想
面向数据编程
详细解释在代码注释中
Vue的简单入门(使用首先导入Vue的js文件)
Vue 核心对象：
每一个 Vue 程序都是从一个 Vue 核心对象开始的。
let vm = new Vue({
选项列表;
});
选项列表
el 选项：用于接收获取到页面中的元素。(根据常用选择器获取)。
data 选项：用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。
methods 选项：用于定义方法。方法可以直接通过对象名调用，this 代表当前 Vue 对象。
数据绑定
在视图部分获取脚本部分的数据。
{{变量名}}
入门案列一:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门</title>
</head>
<body><!-- 编写视图结构 --><div id="div">{{msg}}==={{hello}}===={{vue}}<!-- HelloWorld===你好====VUE --></div><div id="div2">解析vue脚本的数据======={{a}}==={{b}}==={{c}}<h1>{{b}}</h1><p>{{c}}</p><!-- 解析vue脚本的数据=======我是a===我是b===我喜欢abc我是b我喜欢abc --></div>
</body>
<!-- 倒入vue的js包 -->
<script src="js/vue.js"></script>
<script>// 脚本//创建Vue对象new Vue({//绑定那个元素的模板el:"#div",//传递数据给上面的el选择器的标签中的{{}}data:{msg: "HelloWorld",hello: "你好",vue: "VUE"}});//创建vue对象,new Vue({//绑定选择的这个标签el:"#div2",//选择的这个标签体内可以解析的数据{{}}data:{a: "我是a",b: "我是b",c: "我喜欢abc"}});
</script>
</html>
浏览器控制台解析的代码
入门案列二:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>快速入门升级</title>
</head>
<body><!-- 视图 --><div id="div"><div>姓名：{{name}}</div><div>班级：{{classRoom}}</div><!-- 这里使用原生的方式绑定事件,后面有vue的事件绑定 --><button onclick="hi()">查看{{name}}在干嘛</button><button onclick="update()">修改班级</button></div>
</body>
<!-- 倒入vue的js包 -->
<script src="js/vue.js"></script>
<script>//脚本let vm = new Vue({//绑定模板元素的位子,选择器el:"#div",//在这个模板下可以使用的数据data: {name: "小付",classRoom: "一班"},//定义方法,并且在方法中能够使用this操作数据methods: {//这是简写形式的方法定义study(){console.log(this.name+"正在"+this.classRoom+"好好学习!")// 点击查看按钮在控制台输出的是:小付正在一班好好学习!}/*这个是上面的完整版k v的方式定义函数study: function(){console.log(this.name+"正在"+this.classRoom+"好好学习!")// 点击查看按钮在控制台输出的是:小付正在一班好好学习!}*/}});//定义查看方法function hi(){vm.study();}//定义修改班级function update(){//面向数据编程,jQuer更多的是操作DOM,而Vum是操作数据//改变vue对象的属性值,dom元素的值就自动更改了vm.classRoom = "二班";}
</script>
</html>
控制台代码解析
Vue的常用指令(使用记得导入Vue的js文件)
一 {{}} v-html 文件插值
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-html {{}} 文本插值</title>
</head>
<body><!-- 视图 --><div id="div"><!-- {{}} 作用:是绑定变量,并将数据直接显示在符号处,不会解析标签相当于jQuery的text();//不会解析标签,在浏览器中显示纯文本内容<div><b>Hello Vue</b></div>--><div>{{msg}}</div><!-- v-html 就和jQurey的html()方法一样,是插入文本,解析标签作用:将内容放在div里面,并且解析标签--><div v-html="msg"></div><!-- 浏览器中解析结果为<div><b>Hello Vue</b></div></div>--></div>
</body>
<script src="js/vue.js"></script>
<script>// 脚本new Vue({el:"#div",data:{msg:"<b>Hello Vue</b>"}});
</script>
</html>
控制台解析
二 v-bind: 绑定属性
v-bind：为 HTML 标签绑定属性值。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-bind : 绑定属性</title><style>/* vue可以改变cls的值,从而指定样式是否生效 */.my{border: 1px solid red;}</style>
</head>
<body><div id="div"><!--jQuery是attr,prop是操作属性的在vue中v-bind 给标签绑定属性实际上也是操作的数据,vue数据的改变,href的链接就会改变--><a v-bind:href="url">百度一下</a><br><!-- 常用写法:v-bind是可以省略的: 属性名字--><a :href="url">百度一下</a><br><!-- :class绑定样式数据,数据改变,样式就改变--><div :class="cls">绑定class属性</div><!-- :id 绑定id属性,若vue对象的data.myid数据变化对应这个div标签的id值就会变化,就很灵活的假如有两个id值绑定了不同的事件,这样就可以通过myid数据的变化而改变这个div标签的事件--><div :id="myid">绑定id属性</div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{url: "https://www.baidu.com",cls: "my",myid: "isid"}});
</script>
</html>
控制台解析
三 v-if v-else-if v-show 条件渲染
条件渲染
v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。v-if这个也可以代替v-else和c-else-if,但是不推荐,代码可读性差.
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：根据条件展示某元素，区别在于切换的是 display 属性的值。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-if else show条件渲染</title>
</head>
<body><div id="div"><!-- 判断num的值，对3取余 余数为0显示div1 余数为1显示div2 余数为2显示div3 --><div v-if = "num % 3 == 0">div1</div><!-- 余数为1显示div2 因为当前vue对象中的data.num = 1,所以显示div2--><div v-else-if = "num % 3 == 1">div2</div><!-- 余数为2显示div3 --><div v-else = "num % 3 == 2">div3</div><!-- flag是true就会显示 因为vue对象中的data.flag是false,所以不会显示div4 v-show浏览器解析为<div style="display: none;">div4</div>--><div v-show="flag">div4</div><!-- v-if v-else实现登录,注册显示--><div><div v-if="viflogin">个人中心</div><!-- 由于判断结果为false,所以就会显示下面这个div --><div v-else = "!viflogin"><div>注册</div><div>登录</div></div></div><hr><!-- v-show实现登录,注册显示--><div><!-- 由于判断结果为true,所以就会显示这下面这个div --><div v-show="vshowlogin">个人中心</div><div v-show = "!vshowlogin"><div>注册</div><div>登录</div></div></div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{num:1,flag:false,// 假设没有登录了viflogin: false,// 假设登录了vshowlogin: true}});
</script>
</html>
控制台解析
四 v-for列表渲染(遍历)
v-for：列表渲染，遍历容器的元素或者对象的属性。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-for 列表渲染</title>
</head>
<body><div id="div"><ul><!-- v-for 列表渲染 循环遍历格式:<标签 v-for="遍历得到的每个元素 in 遍历的数据">{{遍历得到的每个元素}}</标签>每次遍历就会得到对应的标签这里是li标签,就会循环渲染出多对li标签这里的names就是vue对象中的data.names--><li v-for="name in names"><!-- 将遍历得到的每个元素来渲染显示出来 -->{{name}}</li><hr><!-- 遍历对象,v-for = "遍历对象的每个属性 in 遍历的对象"--><li v-for="value in student"><!-- 将遍历得到的每个属性渲染显示出来 -->{{value}}</li></ul></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{//定义一个数组类型的数据names:["小付","小花","小翠"],//定义一个对象类型的数据student:{name:"小付",age:23}}});
</script>
</html>
控制台解析
五 事件绑定v-on:事件名 或者 @事件名
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-on: @ 事件绑定</title>
</head>
<body><div id="div"><!-- 显示渲染vue的数据,这里就提现了vue的数据改变,影响到页面的动态渲染,而不会去对DOM进行操作,只是div中间的值发生了改变而已--><div>{{name}}</div><!-- v-on事件绑定:v-on:事件名="methods中的方法"--><button v-on:click="change()">点击改变div的内容</button><button v-on:dblclick="dbchange()">双击改变div的内容</button><!-- 简写形式:@事件名="methods中的方法"--><button @click="change()">点击改变div的内容</button></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{name:"我爱敲代码"},//所有的vue方法就写在这里面methods:{// 定义一个单击事件改变文本的方法change(){// 改变当前vue对象的name属性的值,从而改变上面div中渲染的数据this.name = "我还是喜欢睡觉"},// 定义一个双击事件改变文本的方法dbchange(){// 改变当前vue对象的name属性的值,从而改变上面div中渲染的数据this.name = "我更喜欢快乐的无忧无虑的玩耍"}}});
</script>
</html>
控制台解析
六 表单绑定 v-model 双向动态绑定
注意:该指令需要绑定在表单属性中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-model 表单绑定</title>
</head>
<body><div id="div"><form autocomplete="off"><!--v-model:在表单元素上创建双向数据绑定的操作双向数据绑定:1.更新data数据,表单中的数据也会更新2.更新表单数据,data数据也会更新,2.1注意:的是这里更新data数据在代码文本中是观察不到的,是在内存中改变,但是可以通过代码{{}}显示出来MVVM模型:是MVC的模型的改进版本-->姓名：<input type="text" name="username" v-model="username"><br>年龄：<input type="number" name="age" v-model="age"></form><hr><!-- 通过渲染显示数据就可以动态查看到双向绑定的效果--><div>动态显示双向绑定:名字:{{username}}</div><div>动态显示双向绑定:年龄:{{age}}</div></div>
</body>
<script src="js/vue.js"></script>
<script>new Vue({el:"#div",data:{//v-model="属性名" 更新data数据,表单中的数据也会更新,//表单的更新,也会对属性的值进行更新username:"张三",age:23}});
</script>
</html>控制台解析
小结
常用指令小结
指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。
文本插值
v-html：把文本解析为 HTML 代码。
绑定属性
v-bind：为 HTML 标签绑定属性值。
条件渲染
v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
v-else：条件性的渲染。
v-else-if：条件性的渲染。
v-show：根据条件展示某元素，区别在于切换的是 display 属性的值。
列表渲染
v-for：列表渲染，遍历容器的元素或者对象的属性。
事件绑定
v-on：为 HTML 标签绑定事件。
表单绑定
v-model：在表单元素上创建双向数据绑定。
Vue的常用指令(v-html {{}}文本插值,v-bind绑定属性,v-if条件渲染,v-for列表渲染,v-on @ 事件绑定,v-model表单绑定)相关推荐
- Vue之for列表渲染、methods事件和model表单绑定
2.4 for列表渲染 文档:https://cn.vuejs.org/v2/guide/list.html v-for指令可以绑定数组的数据来渲染一个项目列表 v-for指令需要使用item in ...
- Vue的常用指令有哪些，分别是什么作用？
Vue的常用指令有哪些,分别是什么作用? v-for指令用来遍历数组 v-model指令用来实现表单元素的双向绑定 v-if指令用来进行条件判断,可以根据表达式值的真假来插入或删除元素 v-else指 ...
- 关于Vue中常用指令总结
前言 关于我们在使用vue相关的技术开发时,经常需要使用到的一些指令和函数,可能由于长时间而被遗忘,对此做一个总结,避免每次都需要利用搜索引擎,既耗时还得确认准确性. 指令 ①v-if,v-else ...
- vue基础之vue的常用指令
1.vue指令的使用前提 el挂载点 作用:el是用来设置Vue实例挂载(管理)的元素 几个疑问: Vue实例的作用范围是什么呢? Vue会管理el选项命中的元素及其内部的后代元素 是否可以使用其他的 ...
- vue.jsv-html,Vue.js常用指令汇总（v-if、v-for等）
JS: var vm = new Vue({ el: '#example03',data: { people: [{ name: 'Jack',age: 30,sex: 'Male' },{ name ...
- vue的常用指令及用法总结
一.vue插值语法(本篇文章) 二.vue指令13种(本篇文章) 三.vue两大核心功能:点击链接 四.this判断-8种指向(本篇文章) 一. vue插值语法 什么是: 在界面中标记哪里可能发生变化 ...
- Vue.js 2.x笔记：表单绑定（3）
1. 基础用法 v-model 指令:在表单 input 和 textarea 元素上创建双向数据绑定. 1.1 单行文本(Text) <div id="app">&l ...
- 【vue】vue的常用指令及用法总结（续）_03
目录 一. vue插值语法 二. vue指令 1. v-bind 2. v-show 3. v-if 和 v-else 4. v-else-if 5. v-for 6. v-on 7. v-html ...
- Vue 常用指令 自定义指令
v-bind, v-model v-bind 为单向绑定: 数据只能从data流向页面 v-model 双向绑定: 数据不仅从data流向页面,还可以重页面流向data, 一般应用在表单类元素上,(如 ...
最新文章
- 教你如何 构建基本的用户控件
- linux为系统分配内存,Linux操作系统知识讲解：走进Linux 内存分配算法
- Struts2开发基本步骤
- 三次握手，四次挥手的过程？？为什么三握？？
- linux mysql 释放x锁_MySQL 加锁处理分析-转载
- MFC的程序，不想显示窗口，任务栏里也不显示
- 检测技术再进化：人物交互检测，基于多层次条件网络的方法（ICMR2020）
- 开发不能上外网怎么查资料_中考生不能复读，近一半上不了高中，怎么办？
- 允许Fedora 12以root身份登录图形界面
- jquery_EasyUI使用细节注意
- Excel解析的几种实现方式
- GD32F303串口ISP方式下载程序
- 了解一下Windows Cracker
- 牛客练习赛87 -C-牛老板
- 计算机无法启动安装程序,win7电脑无法安装程序或安装的程序不能运行怎么办...
- SAP顾问的转型之路
- 基于Python的人机博弈象棋游戏的设计与实现
- 本地下载配置dubbo.xsd文件
- Dart中类的静态方法,继承,重写父类方法
- ZOJ3716 Ribbon Gymnastics（贪心）