![](https://img-blog.csdnimg.cn/20200507134739233.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue
Vue框架学习
求财专用糖
这个作者很懒,什么都没留下…
展开
-
let/var
事实上,var的设计可以看成JavaScript语言设计上的错误,但是这种错误多半不能修复和移除,以后需要向后兼容;块级作用域:JS中使用var来声明一个变量时,变量的作用域主要是和函数的定义相关;在JS中,只有函数有作用域;//var:ES5的写法:if和for都不具备作用域的概念,传入值会被函数值随意的修改constbtns=document.getElementsByTagName('button');for(varindex...原创 2020-11-09 22:50:06 · 645 阅读 · 0 评论 -
v-bind动态绑定style
绑定方式一:对象语法:style="{key(属性名),value(属性值)}"style后面跟的是一个对象名称对象的key是CSS属性名称; 对象的value是具体赋值,可以来自于data中的属性例 :style="color:currentColor,fontSize:fontSize + 'px'}"效果展示:<!DOCTYPE html><html lang="en"><head> <meta charset=..原创 2020-08-02 14:51:21 · 784 阅读 · 0 评论 -
v-bind动态绑定class(数组语法)
数组语法的含义:class后面跟的是一个数组;数组语法的四种用法:用法一:直接通过 [ ]绑定一个类;<h2 :class="['active']">hello world</h2>用法二:也可以传入多个值;<h2 :class="['active','line']">hello world</h2>用法三:和普通的类同时存在,并不冲突;注:会有title/active/line三个类;<h2 class="title".原创 2020-08-02 12:41:47 · 815 阅读 · 0 评论 -
v-bind动态绑定class(对象语法)
v-bind指令:作用:动态绑定属性;缩写::(也叫语法糖写法)预期:any{withargument}|Object{withoutargument}参数:attrOrProp{optional}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="...原创 2020-07-30 21:55:07 · 749 阅读 · 0 评论 -
插值语法-Vue指令
V-once:该指令后面不需要跟任何的表达式(v-for后面是需要跟表达式的); 该指令表示元素和组件只渲染一次,不会随着数据的改变而改变;效果展示:代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.原创 2020-05-31 19:24:57 · 254 阅读 · 0 评论 -
Vue-Mustache语法
Mustache语法也称为双大括号语法;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mustache语法</title></head><b原创 2020-05-31 19:49:55 · 181 阅读 · 0 评论 -
Vue中的MVVM
View层:视图层; 在我们前端开发中,通长就是DOM层; 主要的作用是给用户展示各种信息;Model层:数据层; 数据可能是我们固定的死数据,更多的是来自服务器,从网络上请求下来的数据; 在前面的计算器案例中,就是方法二中抽取出来的obj当然,里面的数据可能没有这么简单;VueModel层:视图模型层; 视图模型是View和Model沟通的桥梁; 一方面实现了Data Binding(数据绑定);将Model的改变实时的反应到View中; 另一方面实现了DOM List...原创 2020-05-21 21:23:40 · 174 阅读 · 0 评论 -
Vue计算器案例
点击+/-按钮,可改变【当前计数】后的数子;方法一:使用v-on:click 监听click事件,然后执行 counter++;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti...原创 2020-05-21 11:59:54 · 1006 阅读 · 0 评论 -
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> ...原创 2020-05-20 14:46:15 · 986 阅读 · 0 评论 -
Vue介绍
以上为Vue官网介绍,网址链接:https://cn.vuejs.org/v2/guide/作为新手,官方介绍看起来确实是难以理解,在此,我找了几篇介绍得不错的博文,整理了一下。参考:Vue是什么?vue就是一个js库,并且不依赖别的js库,跟jquery差不多; vue的核心库只关注视图层,非常容易学习,也非常容易与其它库或已有项目整合; Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API; Vue 完全有能力驱动采用单文件组件和Vue 生态系...原创 2020-05-19 16:48:35 · 271 阅读 · 0 评论 -
创建第一个Vue应用
一、首先新建一个.html文件;二、引入开发环境版本或生产环境版本; <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本,优化了尺寸和速度 --> ...原创 2020-05-07 22:02:44 · 156 阅读 · 0 评论