- 博客(11)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 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
98
原创 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
122
原创 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
83
原创 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
76
原创 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
56
原创 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
55
原创 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
99
原创 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
55
原创 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
57
原创 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
111
原创 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
971
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人