- 博客(11)
- 问答 (1)
- 收藏
- 关注
原创 Vue_14:列表过滤
<body> <div> <h2>人员列表</h2> <input type="text" placeholder="请输入名字" v-model="keyWord"> <url> <li v-for="(p,index) in person" :key="index"> {{p.name}}-{{p.age}}.
2021-10-23 17:51:04 104
原创 Vue_13:Vue中key有什么作用
1.虚拟dom中key的作用: key是虚拟dom中可以的标识,当状态中的数据发生变化时,Vue会根据【新数据】生成【新的虚拟dom】 随后Vue进行【新虚拟dom】和【旧虚拟dom】的差异比较,比较规则如下 2.对比规则: (1)旧虚拟dom中找到了与新虚拟dom相同的key: 若虚拟dom中的内容没变,直接使用之前的虚拟dom 若虚拟dom中内容变了,则生成新的真实dom,随后替换掉页面中之前的真实dom (2)旧的虚拟dom中未找到与新的虚拟dom相同的key 创建新的真实dom,随后
2021-10-23 17:20:26 125
原创 Vue_12:列表渲染
<body> <div id="root"> <h2>人员列表(遍历数组)</h2> <ul> <li v-for="(p,index) in person" :key="p.id"> {{p.name}}-{{p.age}} </li> </ul> </div> .
2021-10-23 16:47:19 89
原创 Vue_11:条件渲染
条件渲染: 1.v-if: 写法: (1)v-if="表达式" (2)v-else-if="表达式" (3)v-else="表达式" 适用于:切换频率较低的场景 特点:不展示的dom元素直接移除 注意:v-if可以和v-elae-if,v-else一起使用,但要求结构不能被打断 2.v-show 写法:v-show="表达式" 适用于:切换频率较高的场景 特点:不展示的dom元素未被移除,仅仅是使用样式隐藏掉 3.备注:使用v-if时,元素可能无法获取到,而使用v-show一定可以获
2021-10-23 16:25:39 80
原创 Vue_9:监视属性
<body> <!--天气案例--> <div id="root"> <h2>今天天气很{{Info}}</h2> <button @click="changeweather">改变天气</button> </div> </body> <script> const vm = new Vue({ el:'#root', .
2021-10-22 19:31:42 60
原创 Vue_8:计算属性
<body> <!--名字案例_插值语法实现--> <div id="root"> 姓:<input type="text" v-model="firstName"><br/> 名:<input type="text" v-model="lastName"><br/> 姓名:<span>{{firstName.slice(0,3)}} - {{la.
2021-10-22 16:25:32 61
原创 Vue_7:事件处理
事件 <body> <!-- 事件的基本使用: 1.使用v-on:xxx或@xxx绑定事件,其中xxx是事件名 2.事件的回调需要配置在methods对象中,最终会在vm上 3.methods中配置的函数,不要用箭头函数,否则this就不是vm了 4.methods中配置的函数,都是被Vue所管理的函数,this的指向是vm或组件对象实例 5.
2021-10-22 14:27:53 104
原创 Vue_6:数据代理
回顾Object.defineProperty方法 <body> <script type="text/javascript"> let number=18 let person = { name:'张三', sex:'男', age:18 } object.defineProperty(person,'age.
2021-10-22 11:49:21 62
原创 Vue_5:理解MVVM
MVVM模型 1.M 模型(model):对应 data 中的数据 2.V 视图(view):模板 3.VM:视图模型(ViewModel):Vue中的实例对象 data中的所有属性;最后都出现在了vm身上 vm上的所有属性及Vue原型上的所有属性,在Vue模板中都可以直接使用 ...
2021-10-22 10:53:51 62
原创 Vue_4:el和data的两种写法
<div id="root">你好{{data}}</div> <script type="text/javascript"> const v = new Vue({ //el='#root',第一种写法 //data的第一种写法:对象式 /*data:{ name:'123' } */ //data的第二种写法:函数式(学习组件时必须使用) /*data:funct.
2021-10-22 10:36:11 118
原创 Vue_3:数据绑定
<!-- Vue中有两种数据绑定的方式: 1.单向绑定(v-bind):数据只能从data流向页面。 2.双向数据绑定(v-model):数据不仅能从data流向页面。还可以从页面流向data。 备注: 1.双向绑定一般都是应用在表单类元素上(如:input,select等) 2.v-model:value可以简写为 v-model,因为v-model默认收集的就是value值 --> <!--准备好.
2021-10-22 10:19:21 977
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人