![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
zhimin魏魏魏
这个作者很懒,什么都没留下…
展开
-
vue学习记录(9、购物车小案例)
1 前端:table、thead、th、tr、tdtable:表格;thead:表头;tr:行;td:单元格;th:一行的首个单元格index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css".原创 2021-02-03 20:16:28 · 98 阅读 · 0 评论 -
vue学习记录(8、v-for 循环)
1、遍历数组<div id="app"> <ul> <li v-for="item in names">{{item}}</li> </ul> <!-- 在遍历的过程,获取索引值--> <ul> <li v-for="(item,index) in names"> {{index+1}}-{{item}}原创 2021-01-31 20:50:00 · 189 阅读 · 0 评论 -
vue学习记录(7、v-show 决定是否显示类似v-if)
v-if和v-show都可以决定一个元素是否渲染,那么开发中我们如何选择呢?v-if当条件为false时,压根不会有对应的元素在DOM中。v-show当条件为false时,仅仅是将元素的display属性设置为none而已。开发中如何选择呢?当需要在显示与隐藏之间切片很频繁时,使用v-show当只有一次切换时,通过使用v-if...原创 2021-01-31 12:52:23 · 150 阅读 · 0 评论 -
vue学习记录(6、v-if 、 v-else 、v-else-if)
v-if、v-else-if、v-else这三个指令与JavaScript的条件语句if、else、else if类似。Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件简单的案例演示:v-if的原理:v-if后面的条件为false时,对应的元素以及其子元素不会渲染。也就是根本没有不会有对应的标签出现在DOM中。登录案例<div id="app"> <span v-if="user"> <!-- <l原创 2021-01-30 23:44:34 · 191 阅读 · 0 评论 -
vue学习记录(6、v-on)
1、语法糖<div id="app"> <h2>{{counter}}</h2> <!-- 普通写法--> <button v-on:click="counter++">+</button> <button v-on:click="counter--">-</button> <!-- v-on语法糖写法--> <button @cli原创 2021-01-30 18:08:48 · 63 阅读 · 0 评论 -
vue学习记录(5、ES6一些常用写法)
1、对象定义const obj=new Object{}可以简写为const obj={}2、属性的增强写法//1.属性的增强写法const name = 'why ';const age = 18;const height = 1.88/ES5的写法(旧)const obj ={ name: name, age: age, height: height1}/ES6写法const obj ={ name, age, height,}console原创 2021-01-29 15:31:51 · 187 阅读 · 0 评论 -
vue学习记录(4、块级作用域let和var)
简单说 ,let是完美的var**·**var声明变量时,作用域和函数的定义有关简单来说,var全局变量let局部变量(块级作用域)const常量所以在Vue中尽量使用let原创 2021-01-28 09:39:36 · 218 阅读 · 0 评论 -
vue学习记录(3、计算属性)
在某些情况,我们可能需要对数据进行一些转化后再显示,或者需要将多个数据结合起来进行显示比如我们有firstName和lastName两个变量,我们需要显示完整的名称。但是如果多个地方都需要显示完整的名称,我们就需要写多个{{firstName}} {{lastName}}我们可以将上面的代码换成计算属性:写在实例的computed选项中computed有缓存,会保留结果,只计算一次method使用一次计算一次...原创 2021-01-27 20:26:07 · 69 阅读 · 0 评论 -
vue学习记录(2、动态绑定v-bind)
1、v-bind有一个对应的语法糖,也就是简写方式即v-bind: ------>:<div id="app"> <img :src="imgURL" alt=""> <a :href="aherf">百度一下</a></div>2、绑定方式:对象语法对象语法的含义是:class后面跟的是一个对象。用法一:直接通过{}绑定一个类<h2 :class="{'active': isActive}">He原创 2021-01-26 14:15:21 · 82 阅读 · 0 评论 -
vue学习记录(1、插值指令)
v-once 定义后不会随着数据的改变而改变v-html 将string的html解析出来并且进行渲染,输出超链接时使用1.v-once:该指令后面不需要跟任何表达式(比如之前的v-for后面是由跟表达式的)该指令表示元素和组件(组件后面才会学习)只渲染一次,不会随着数据的改变而改变。2.v-html某些情况下,我们从服务器请求到的数据本身就是一个HTML代码如果我们直接通过{{}}来输出,会将HTML代码也一起输出。但是我们可能希望的是按照HTML格式进行解析,并且显原创 2021-01-25 18:34:11 · 63 阅读 · 0 评论