Vue基础
和尚硅谷学习的一些个人学习笔记。
一颗小梨子吖
这个作者很懒,什么都没留下…
展开
-
【Vue基础】列表渲染二:列表过滤和排序(模糊搜索)
有时,我们想要显示一个数组过滤后的版本,而不实际变更原始数据。在这种情况下,可以创建一个计算属性,来返回filter的数组。我们使用后计算属性来实现一个名字得模糊搜索(如下), <div id="root"> <h2>人员列表</h2> <input type="text" placeholder="输入要查找的姓名" v-model:value="keyWord"> <ul>原创 2021-11-09 15:45:00 · 917 阅读 · 2 评论 -
【Vue基础】列表渲染一:基本列表
v-for迭代数组我们可以用v-for指令基于一个数组来渲染一个列表。v-for指令需要使用 "item in items"形式的特殊语法,其中items是源数据数组,而item则是被迭代的数组元素的别名。 <div id="root"> <h2>人员列表</h2> <ul> <li v-for = "p in persons"> {{...原创 2021-11-09 10:52:11 · 688 阅读 · 0 评论 -
【Vue基础】条件渲染
v-show使用v-show的元素始终会被渲染并保留在 DOM 中。v-show只是简单地根据条件切换元素显示与否。用法大致如下:<div id="root"> <h1 v-show="aa">Hello!!!</h1> </div> <script> new Vue({ el:'#root', data:{ ..原创 2021-11-08 16:32:50 · 168 阅读 · 0 评论 -
【Vue基础】样式绑定class和style
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute,所以我们可以用v-bind处理它们:只需要通过表达式计算出字符串结果即可。不过,字符串拼接麻烦且易错。因此,在将v-bind用于class和style时,Vue.js 做了专门的增强。表达式结果的类型除了字符串之外,还可以是对象或数组。class属性绑定字符串写法:最常见的绑定写法,通常适用于:样式类名不确定,需要动态指定。<div class="static" v-bi...转载 2021-11-04 11:33:42 · 164 阅读 · 0 评论 -
【Vue基础】computed,watch,methods的用法区别
在编程的中我们常常可以发现对于某些功能我们可以采用方法实现,也可以用watch或者计算属性去实现,那么这三种实现有什么区别呢???通一个简单的案例来研究一下methodsmethods是一个对象属性的函数,methods不存在缓存,,在重新渲染的时候,函数总会重新调用执行。methods实现:<!--准备容器--> <div id="root"> 姓:<input type="text" v-model="firstName"><原创 2021-10-29 16:57:54 · 314 阅读 · 0 评论 -
【Vue基础】监听属性watch
Vue监听属性是watch,我们可以通过 watch 来响应数据的变化。代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w...原创 2021-10-28 16:49:58 · 340 阅读 · 0 评论 -
【Vue基础】事件处理
事件监听在Vue中可以用v-on指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码或一些调用方法。代码示例:<body> <!--准备容器--> <div id="root"> <h2>欢迎光临,{{name}},{{address}}</h2> <a v-bind:href="url">茶颜悦色</a><p>{{Date.no..原创 2021-10-27 10:38:07 · 124 阅读 · 0 评论 -
[Vue基础]数据绑定v-bind和v-model
Vue中的数据绑定分为单向和双向两种形式。单项数据绑定(v-bind):数据只能从data流向页面。双向数据绑定(v-model):数据既能从data流向页面,也可以从页面流向data。代码示例:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge原创 2021-10-26 10:56:25 · 273 阅读 · 1 评论