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 · 651 阅读 · 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 · 799 阅读 · 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 · 836 阅读 · 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 · 784 阅读 · 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 · 288 阅读 · 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 · 184 阅读 · 0 评论 -
Vue中的MVVM
View层: 视图层; 在我们前端开发中,通长就是DOM层; 主要的作用是给用户展示各种信息; Model层: 数据层; 数据可能是我们固定的死数据,更多的是来自服务器,从网络上请求下来的数据; 在前面的计算器案例中,就是方法二中抽取出来的obj当然,里面的数据可能没有这么简单; VueModel层: 视图模型层; 视图模型是View和Model沟通的桥梁; 一方面实现了Data Binding(数据绑定);将Model的改变实时的反应到View中; 另一方面实现了DOM List...原创 2020-05-21 21:23:40 · 199 阅读 · 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 · 1044 阅读 · 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 · 1016 阅读 · 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 · 306 阅读 · 0 评论 -
创建第一个Vue应用
一、首先新建一个.html文件; 二、引入开发环境版本或生产环境版本; <!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本,优化了尺寸和速度 --> ...原创 2020-05-07 22:02:44 · 181 阅读 · 0 评论