vue基础

数据绑定

双括号数据绑定

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

<template><div><!--{{}}数据绑定--><p>{{msg}}</p><!--{{}} 绑定表达式--><p>{{4>3?true:false}}</p><!-- 直接在{{}}输入值纯数字注意:输入字符串不显示并报错--><p>{{111}}</p></div>
</template><script>export default{name:'DataBind',data(){return{msg:'中华人名共和国'}}}
</script><style>
</style>

v-bind 绑定属性

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind指令：

 <div><!-- v-bind绑定属性--><a v-bind:href="url">跳转到百度</a><!-- v-bind 缩写形式绑定--><p :title="msg">v-bind 缩写形式绑定s</p><!-- 绑定动态属性--><p :[attributeName]="title">绑定动态属性</p></div>

但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

 <!-- 绑定布尔型的值--><button :disabled="isdisabled">绑定布尔型的值</button>

注意:
如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 元素中。

Class 与 Style 绑定

绑定Class

绑定单个class
通过属性绑定的方式,可以动态的更换掉指定元素的样式.

  <template><div><!-- 绑定单个class--><div :class="classA">样式A</div></div>
</template><script>export default{name:'DataBind',data(){return{classA:'current',}},}
</script><style>
</style>

绑定数组

 <!-- 绑定数组--><div :class="[classA,classB]"></div>data(){return{classA:'current',classB:'focus'}

绑定对象
下面语法中的样式 是否存在,取决于其样式值为true[存在]/false[不存在]

<template><div><!-- 绑定对象--><div :class="object">绑定对象样式一</div><div :class="{current:false,focus:true}">绑定对象样式二</div><div :class="{current:isCurrent,focus:isFocus}"></div></div>
</template><script>export default{name:'DataBind',data(){return{object:{current:true,focus:false},isCurrent:true,isFocus:false}},}
</script><style>
</style>

此外，v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板：

<divclass="static"v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>

和如下 data：

data: {isActive: true,hasError: false
}

结果渲染为：

<div class="static active"></div>

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 “static active text-danger”。

绑定style

可以直接绑定,对象实现绑定,数组实现绑定.

<div><!-- 绑顶style(内联样式)--><!-- 直接绑定--><div :style="{color:'red',fontSize:'20px'}">绑定style</div><!-- data中变量替换绑定--><div :style="{color:color,fontSize:fs}">绑定style</div><!--对象绑定--><div :style="obj">对象绑定</div><!-- 数组绑定--><div :style="[baseStyle,overStyle]">数组绑定</div></div>

data中的数据

         color:'green',fs:'30px',obj:{color:'pink',fontSize:'50px',background:'green'},baseStyle:{color:'pink'},overStyle:{fontSize:'40px'}

注意:
上面样式绑定中,具体样式名font-size需要写成fontSize

条件渲染

v-if

v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

<template><div><p v-if="true">v-if的值为true时显示</p><p v-if="isShow">变量isShow为true是显示</p></div>
</template><script>export default{name:'DataBind',data(){return{isShow:true}},}
</script><style>
</style>

也可以用 v-else 添加一个“else 块”：
即当v-if为true是,v-else为false

 <p v-if="false">v-if的值为true时显示</p><p v-else>此时v-if为false</p>

在<template>元素上使用 v-if条件渲染分组

因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个<template>元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template>元素。

<template v-if="ok"><h1>Title</h1><p>Paragraph 1</p><p>Paragraph 2</p>
</template>

v-else

你可以使用 v-else 指令来表示 v-if 的“else 块”：

<div v-if="Math.random() > 0.5">Now you see me
</div>
<div v-else>Now you don't
</div>

注意:
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

v-else-if

2.1.0 新增
v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div v-if="type === 'A'">A
</div>
<div v-else-if="type === 'B'">B
</div>
<div v-else-if="type === 'C'">C
</div>
<div v-else>Not A/B/C
</div>

注意:
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

用 key 管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换：

 <div><div v-if="loginType=='username'"><label>username</label><input type="text" name="username" placeholder="请输入用户名..." /></div><div v-else><label>email</label><input type="email"  name="email" placeholder="请输入邮箱..."/></div><button @click="changeLoginType">切换到{{login}}登录方式</button></div>

data数据块

     data(){return{isShow:true,loginType:'username',login:'email'}},methods:{changeLoginType(){this.loginType=this.loginType==='username'?'email':'username'this.login=this.login==='email'?'username':'email'}}

这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的key属性即可：

<template v-if="loginType === 'username'"><label>Username</label><input placeholder="Enter your username" key="username-input">
</template>
<template v-else><label>Email</label><input placeholder="Enter your email address" key="email-input">
</template>

现在，每次切换时，输入框都将被重新渲染。
注意， 元素仍然会被高效地复用，因为它们没有添加 key 属性。

v-show

另一个用于根据条件展示元素的选项是 v-show指令。用法大致一样：

<h1 v-show="ok">Hello!</h1>

注意:
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

v-if vs v-show

v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if有更高的切换开销，而 v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show较好；如果在运行时条件很少改变，则使用 v-if较好。

v-if 与 v-for 一起使用

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

vue时间格式化

methods{//   时间格式化dateFormat:function(time) {var date=new Date(time);var year=date.getFullYear();/* 在日期格式中，月份是从0开始的，因此要加0* 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05* */var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();// 拼接return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;},
}

vue.js---zcc相关推荐

1. Vue.js 源码目录设计（二）

   Vue.js 的源码都在 src 目录下,其目录结构如下. src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── se ...

2. 【转】Vue.js 2.0 快速上手精华梳理

   Vue.js 2.0 快速上手精华梳理 Sandy 发掘代码技巧:公众号:daimajiqiao 自从Vue2.0发布后,Vue就成了前端领域的热门话题,github也突破了三万的star,那么对于新 ...

3. vue.js安装过程(npm安装)

   一.开发环境 vue推荐开发环境: Node.js: JavaScript运行环境(runtime),不同系统直接运行各种编程语言 npm: Nodejs下的包管理器. webpack: 它主要的用途 ...

4. laravel ajax vue6,详解用vue.js和laravel实现微信支付

   注:此项是微信公众号开发,请在往下看之前,先实现网页微信授权登陆功能,具体参看我简书的另一篇文章:https://www.jb51.net/article/117004.htm 1.打开app/con ...

5. js去掉前后空格的函数_2020年最火爆的Vue.js面试题

   2020年Vue面试题 Interview ●●●● 作者:@烦恼会解决烦恼 vue核心知识--理论篇 1.对于Vue是一套渐进式框架的理解 渐进式代表的含义是:主张最少. Vue可能有些方面是不如R ...

6. 【说人话】真正意义上讲清楚了如何用$emit()在Vue.js的自定义组件中实现v-model=“”双向绑定

   子组件sg-component.vue代码 <template><div class="sg-component"><button @click=&q ...

7. Vue.js双向绑定的实现原理

   Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化得不能再简化的代码实现一个简单的 hello world 示例. 一 ...

8. Vue.js学习系列（四十二）-- Vue.js组件

   2019独角兽企业重金招聘Python工程师标准>>> 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.组件系统让我们可以用独立 ...

9. 为什么vue.js一眼看上去很美?

   对其他框架我是佩服,对vue.js我则是爱.我就是一眼看上了vue.js,于是用它做各种东西,反反复复多次,然后觉得有些融会贯通,然后,我稍微细的思量了下,到底vue.js靓丽在哪? 还是上案例对比说 ...

10. Vue.js slots: 为什么你需要它们？

    也许你已经看过了Vue.js slots的文档.我对这个功能从"为什么你可能需要它"到"没有它我怎么可能工作"的态度转变非常快. 虽然文档已经解释了它的概念,但 ...

最新文章

1. HTML元素的基本特性
2. 图论-欧拉路(UVA10054)(HDU1116)
3. 深度学习在机器人视觉中的局限与优势（综述）
4. php-fpm 进程通讯,PHP-FPM进程模型解析
5. python可视化水平箭头_Python交互图表可视化Bokeh：2. 辅助参数
6. 优化自动化测试流程，使用 flask 开发一个 toy jenkins工具
7. 可爱又好用！阿里云盘「小白羊版」
8. SharePoint 2013/2010 中的日历重合 (Calendars Overlay)
9. 基于FPGA的bubble游戏开发
10. MySQL / schema的概念
11. 【tensorflow】Sequential 模型方法 compile， model.compile
12. android开发国内镜像
13. Java保留小数点一位的方法
14. 支撑双十一的网络引擎：飞天洛神
15. ElasticSearch5.0——IK词库加载
16. word里双横线怎么打_word 双下横线怎么打出来
17. Qt实现串口调试工具
18. c语言中，关于延迟函数的理解
19. java开发的颠覆者epub,创业颠覆者-陈景畑 翟顺[6寸pdf mobi epub kindle版].pdf
20. Vue高仿网易云网页端源码

热门文章

1. Unity中简单的matcap+fresnel shader的实现
2. asic面试题目　英伟达_NVIDIA校招面试经历
3. 公司企业怎么做一个网站？
4. flume报错：Space for commit to queue couldn‘t be acquired. Sinks are likely not keeping up with sources
5. mysql删除第一条记录
6. Android FlowLayout 流式布局
7. 【100%通过率】华为OD机试真题 C 实现【探索地块建立】【2022.11 Q4 新题】
8. 英语口语练习系列-C27-艺术品-辨别物体-黄昏的歌
9. 基于在STM32下完成FreeRTOS的多任务程序开发，多任务串口以及AHT20封装库，原理图，PCB图以及AHT20（实际用到的是LMT70）及采集一次温度数据的模块实战
10. XLSX + VUE获取表格内容，实现下载模板、导入表格、导出表格功能