vue.js
凌枫zero
这个作者很懒,什么都没留下…
展开
-
Vue中引用图片-背景图片
Vue中引用图片-背景图片第一种方案<img class="card" src="~@/assets/img/card_bg.png" ></img>第二种方案<div class="card"></div><style> .card { background: url('~@/assets/img/card_bg.png') center center no-repeat; }</style>原创 2020-06-30 15:18:05 · 1421 阅读 · 0 评论 -
十五、Vue表单输入绑定
Vue表单输入绑定基础用法你可以用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。v-model会忽略所有表...原创 2020-03-15 15:43:40 · 276 阅读 · 0 评论 -
十四.Vue事件处理
Vue事件处理监听事件可以用v-on指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。示例:<div id="app"> <div>{{counter}}</div> <!--可以给incremet方法传递参数,传个步长--> <input type="button" value=...原创 2020-03-15 14:20:25 · 243 阅读 · 0 评论 -
十三.Vue列表渲染
使用v-for遍历数组对象我们可以用v-for指令基于一个数组来渲染一个列表。v-for 指令需要使用book in books形式的特殊语法,其中books是源数据数组,而book则是被迭代的数组元素的别名。具体操作如下代码data:{ books:[ { name:"三国演义"...原创 2020-03-15 13:29:30 · 525 阅读 · 0 评论 -
十二.Vue条件渲染
v-ifv-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 isShow 值的时候被渲染。如何让下面三个html标签里的内容同时显示和隐藏,可以使用template模板,它并不是一个真正的html节点,当下面的内容被渲染以后,template会被自动的移除掉<template v-if="isShow"> <p>hello ...原创 2020-03-15 13:23:23 · 282 阅读 · 0 评论 -
十一.Vue Style绑定
Vue Style绑定Vue Style绑定对象语法v-bind:style的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名:<div v-bind:style="{color:fontColor,fontSize:fon...原创 2020-03-15 13:10:56 · 260 阅读 · 0 评论 -
十、Vue.js的Class绑定
Vue.js的Class绑定操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性,所以我们可以用v-bind处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将v-bind用于class和style时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。对象语法我们可以传给v-...原创 2020-03-14 17:15:33 · 295 阅读 · 0 评论 -
九.Vue.js的侦听器
Vue.js的侦听器虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。计算属性VS侦听属性Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。当你有一些数据需要随着其它数据变动而变动时,...原创 2020-03-14 14:40:48 · 373 阅读 · 0 评论 -
八.Vue计算属性
Vue计算属性模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如:<div id="example"> {{ message.split('').reverse().join('') }}</div>在这个地方,模板不再是简单的声明式逻辑。你必须看一段时间才能意识到,这里是想要显示变量mess...原创 2020-03-14 12:16:26 · 270 阅读 · 0 评论 -
七.Vue模板语法
Vue模板语法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue....原创 2020-03-14 12:11:30 · 274 阅读 · 0 评论 -
六.Vue实例
Vue实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的:虽然没有完全遵循MVVM 模型,但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用vm(ViewModel 的缩写) 这个变量名表示 Vue 实例。当创建一个 Vue 实例时,你可以传入一个选项对象。这篇教程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考,你也可以在API ...原创 2020-03-14 12:08:15 · 238 阅读 · 0 评论 -
五.Vue组件初体验
Vue组件组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树:在 Vue 里,一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单:创建一个component.html页面并引入vue.js代码,详情如下<!DOCTYP...原创 2020-03-14 12:05:05 · 327 阅读 · 0 评论 -
四.Vue处理用户输入
Vue的点击事件创建一个click.html页面并引入vue.js代码,详情如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https:/...原创 2020-03-14 11:59:00 · 454 阅读 · 0 评论 -
三.Vue循环指令
Vue循环指令用Vue的循环指令打印九九乘法表创建一个for.html页面并引入vue.js代码,详情如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <scrip...原创 2020-03-14 11:47:49 · 687 阅读 · 0 评论 -
二.Vue条件指令
Vue条件指令创建一个if.html页面并引入vue.js代码,详情如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://c...原创 2020-03-14 11:40:39 · 293 阅读 · 0 评论 -
一、Vue初体验
Vue简介>ue (读音 /vjuː/,类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与[现代化的工具链](单文件组件 — Vue.js)以及各种[支持类库](https://github.com/vuejs/aw...原创 2020-03-14 11:33:10 · 328 阅读 · 0 评论