Vue基础渲染及修饰符
Vue基础2
2.1 模板语法
mustache 语法中是支持写js的
用法:
内容: 必须加 {{ js语法 }}
属性: 属性中属性值可以直接写js语法,并且属性值中的数据相当于全局变量
给一个标签加一个自定义属性/已有属性
img中的src就是已有属性 <img src = "" /> //data-index就是自定义属性 , web网页中建议我们使用data-形式来定义自定义属性 <img data-index = "0" />
思考: Vue现在想要在html中使用自己的属性,并且要和他的语法和数据结合?
咋整?
分析: 如何我能够标识出哪一个属性是具有vue标志的那就好了,也就是属性前加 v
- Vue给这种带v标识的属性,起了一个名字: 指令【 借鉴angular 】
<div v-html = "msg"></div>
研究它js的支持性
- 数据类型
- 市场上js的数据类型分类有两种?
- 第一种
- 初始数据类型: number string null undefine boolean
- 引用数据类型: Object [ function array … ]
- 第二种
- 基础数据类型: number string boolean
- 特殊数据类型: null undefine
- 复杂数据类型; Object [ function array …]
- 第一种
- 市场上js的数据类型分类有两种?
- 输出语法
- console
- alert
- 表达式 / 运算符
- 三元表达式
- 数据类型
总结;
- null 和 undefined 是不会显示的,其他数据类型都是支持的,可以显示的
- 挂载在window身上的全局属性,我们都不能用的: 比如; console alert
- {{ }} 不写流程控制
- for
- if
- while
- do…while
- {{}} 支持三元表达式,同样也支持运算符
- 短路原则也是支持的
2.2 指令
指令的目的是做什么: 操作DOM
解释 : MVVM vm -> v 数据驱动
所以: 今天开始,我们不想二阶段一样操作dom,改成操作数据,数据要想操控DOM,那么我们需要依赖指令,因为指令是直接绑定在dom身上的
v-html 转义输出,也就是可以解析 xml 数据
v-text: 非转义输出,也就是无法解析 xml 类型数据
v-bind
将数据和属性进行单向数据绑定: 将vue中数据赋值给属性值
<img v-bind:src = "src" /> <div v-bind:class = ""></div> <div v-bind:style = ""></div>
简写形式
<img v-bind:src="src" alt=""> <img :src="src" alt="">
类名绑定
用法
对象形式用法
<p :class = "{ bg: true,size: true }"></p><p :class = "{ bg: true,size: false }"></p><p :class = "{ [classA]: true,[classB]: true }"></p>
数组形式用法
<p :class = "[ 'size','bg' ]"></p><p :class = "[ classA,classB ]"></p><p :class = "[ classA,classB,5>3?'a':'b']"> </p>
样式绑定
- 用法
对象形式用法
<p :style = "{width: '100px',height: '100px',background: 'yellow'}"></p> <p :style = "styleObj"></p>
数组形式用法
<p :style = "[{width:'100px',height: '100px'},{ background: 'green'}]"></p> <p :style = "[size,bg]"></p>
- 用法
2.3 条件渲染
v-if
v-else-if
v-else
v-show 条件展示
<h3> 条件渲染 - 单路分支 </h3> <p v-if = "flag"> A </p><h3> 条件渲染 - 双路分支 </h3> <p v-if = "flag"> A </p> <p v-else > B </p><h3> 条件渲染 - 多路分支 </h3> <p v-if = "type === '美食'"> 美食 </p> <p v-else-if = " type === '游戏' "> 游戏 </p> <p v-else> 睡觉 </p><h3> 条件展示 </h3><p v-show = " showFlag "> 条件展示 </p>
思考总结
思考: v-if vs v-show 1. 效果看起来一样2. why Vue要出两个相似的指令?v-if控制的是元素的存在与否v-show控制的是元素的display:none属性思考? 如果出事条件为假时? v-if v-show 谁的性能损耗较高? v-show总结: 项目中如何选择哪一个? 频繁切换用 v-show 如果不是很频繁的切换,那我们用 v-if
2.4 列表渲染
v-for 指令
<h3> 数组 </h3> <ul><li v-for = "(item,index) in arr" :key = " index ">{{ item }} -- index{{ index }}</li> </ul> <h3> 对象 </h3> <ul><li v-for = "(item,key,index) of obj" :key = "index">{{ item }} -- {{ key }} -- {{ index }}</li> </ul> <h3> json </h3> <ul><li v-for = "item in json" :key = "item.id"><span> 商品名称: {{ item.shop_name }} </span><span> 商品价格: {{ item.price }} </span></li> </ul><h3> 循环嵌套 </h3><ul><li v-for = "item in lists" :key = "item.id"><h3> 商品类型: {{ item.shop_name }} </h3><ul><li v-for = "item in item.type" :key = "item.id"><p> 制造商: {{ item.maker }} </p></li><!-- <li v-for = "ele in item.type" :key = "ele.id"> <p> 制造商: {{ ele.maker }} </p> </li> --></ul></li> </ul><h3> 循环number / string </h3><p v-for = "item in 10"> {{ item }} </p> <p v-for = "item in 'abc'"> {{ item }} </p>
总结:
- 列表渲染参数可以写三个,分别为 item key index
- 列表渲染,要在渲染的元素身上加一个key,作为这个元素唯一的标识 ,
- 思考: 这是为什么?
- 这个key最好是id,因为id唯一?思考: 为什么不能是index
- 列表渲染,要在渲染的元素身上加一个key,作为这个元素唯一的标识 ,
- 循环嵌套式,参数名称是可以一致的
- in / of 都可以使用
2.5 事件处理器
- v-on
2.6 表单控件绑定
- v-model
- 双向数据绑定
- VM 改变 V随之改变
- V改变, VM也随之改变
- v-model只用于表单
- 理由: v-model默认绑定value属性
- 技巧: 看到表单直接 v-model
- 双向数据绑定
Vue基础渲染及修饰符相关推荐
- [vue] 说说你对vue的表单修饰符.lazy的理解
[vue] 说说你对vue的表单修饰符.lazy的理解 input标签v-model用lazy修饰之后,vue并不会立即监听input Value的改变,会在input失去焦点之后,才会触发input ...
- java基础之访问修饰符
java基础之访问修饰符: java中一共有四种访问修饰符号,用于控制方法和属性的访问权限(范围): 1.公开级别:public 对外公开 2.受保护级别:protected 对子类和同一个包中的类公 ...
- Vue事件处理(事件修饰符,键盘事件)
Vue中的事件修饰符:1.prevent:阻止默认事件(常用)2.stop: 阻止事件冒泡(常用)3.once: 事件只触发一次(常用)4.capture: 使用事件的捕获模式5.self:只有eve ...
- Vue学习:事件修饰符
当使用连接点击,触发默认事件时,会出现跳转,跳转是默认行为,可以取消 <!-- 准备容器 --><div id='root'> <h2>欢迎页面,你好 {{name ...
- Vue中的事件修饰符
事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是: ...
- Vue 事件绑定 事件修饰符 条件判断 循环遍历
事件绑定 v-on:事件 简写:@事件 <div id="app"><h2>{{counter}} </h2><button v-on:c ...
- OC基础之访问修饰符
做C#.Java的人都知道private.protect.public这些访问权限,在OC中看项目基本都没用到这些,昨天就好奇的仔细了解了下,其实OC中也是有这些访问权限的修饰.说实话有好多做过编程的 ...
- vue 指令 v-on 事件修饰符-鼠标事件-什么是事件冒泡
什么是事件冒泡 <body><div id="app"><div>{{num}}</div><div v-on:click=' ...
- Vue.js:按键修饰符keyup,keyup.enter,keyup.alt.enter的使用
学习Vue.js第三天 键盘事件keyup <label>你所在城市:</label><input type="text" v-on:keyup=&q ...
- Vue常见的事件修饰符
前言 vue一共给我们准备了6个事件修饰符,前三个比较常用,后三个少见,这里着重讲下前三个 1.prevent:阻止默认事件(常用) 2. stop:阻止事件冒泡(常用) 3. once:事件只触发一 ...
最新文章
- 【迁移学习(Transfer L)全面指南】CVPR(2020)元学习、小样本、领域自适应、领域泛化和迁移学习概述
- JavaScript实现京东购物车页基础面效果
- 堆/栈/动态存储方式/静态存储方式
- MFC开发IM-第十三篇、MFC改变字体重影的问题
- SqlTransaction事务和Response.Redirect
- Bootstrap框架常用总结
- kafka 消费者组 消费者订阅不同主题_深入了解kafka系列-消费者
- 转】 神奇图片解析之旋转的舞女
- 整人输入指定内容退出html,整人代码
- 吃鸡手游服务器响应超时闪退,吃鸡界面怎么老是连接超时 | 手游网游页游攻略大全...
- Science:无氧世界的古菌氨氧化
- 你知道Base64编码的图片吗
- 苹果电脑上好用的五款文档文字编辑处理工具
- XCTF-ms0_01
- 拆机解决Thinkpad笔记本键盘显示屏接触不良问题
- 安搭Share的幸福感
- 百练_3756:多边形内角和
- 详解:IP地址132.119.100.200的子网掩码是255.255.255.240,那么它所在子网的广播地址是(132.119.100.207)
- html怎么把设置按钮居中显示图片,html如何设置图片居中
- 【转】绿色便携版Lazarus的制作教程
热门文章
- 资源吧网站模板下载织梦cms精仿资源吧网站模板
- PHPStorm+Xdebug配置(phpStudy)
- 华为鸿蒙智慧屏和手机,【荣耀智慧屏评测】鸿蒙初体验:荣耀智慧屏跨系统交互构建新生态(全文)_荣耀 智慧屏_手机评测-中关村在线...
- Linux文件编程常用函数详解——read()和write()函数
- 根据IP地址求网络号、子网号和主机号
- Android项目实践(二)——日记本APP
- Pyecharts绘制图表大全——柱形图
- 【数据可视化】Echarts世界地图需要的数据 - JSON格式世界国家中英文对照表
- 软件测试行业到底有没有前景和出路?(最全面)
- android追美剧app,追美剧必备神器!安卓追剧助手App体验