vue2介绍（入门）

news2025/1/19 22:14:59

声明式渲染

v-bind

v-if条件与循环

name命名

学会log打印

一些js方法

双向绑定v-model和v-bind

那么请实现一个复选框吧

自定义标签模板

声明式渲染

我感觉这里文档的意思是双向绑定，

或许需要清理一下js缓存机制

，嗯...不懂,响应式；（后面有实现原理解释）

不是这个原因

v-bind

关于声明式渲染

原生实现相同功能比如颜色文字切换，常规是准备多个css属性，切换；或者多个div显示或隐藏

v-if条件与循环

vue解决了痛点所以确实挺不错的

v-if很实用，追求效果要加过渡知识（后面有）

请根据文档提供的过渡效果，添加按钮切换，渐入渐出效果

name命名

vue自动生成用于过渡的css命名

学会log打印

这里告诉了我们this的作用，用log打印去试，推断

一些js方法

双向绑定v-model和v-bind

v-model是双向绑定，应用场景是？，v-bind呢

v-model和v-bind都是Vue中非常重要的指令,但他们的作用不同:v-model是实现表单输入和应用状态之间双向绑定的指令。它会根据控件类型自动选取正确的方法来更新元素。应用场景主要是表单控件,如:- input - select - textarea - checkbox - radio等等。v-bind主要用于响应式地更新HTML属性。它的作用是绑定数据到DOM节点的属性上。应用场景比较广泛,几乎可以绑定任意属性,常见的有:- class - style - href - title - disabled - 等等示例代码:

html
<input v-model="message">
<p v-bind:title="message">Hover on me</p>
js
data: {
  message: 'Hello!'
}

- v-model 将input和message数据双向绑定。用户输入会更新message,message的变化也会更新到input上。 - v-bind 将message作为title属性绑定到p标签上。message的数据变化会响应到DOM,实时更新p的title属性。所以总结来说:- v-model用于表单输入和数据双向绑定。 - v-bind用于响应式地更新HTML属性和DOM节点绑定数据。v-model一般用于表单控件,而v-bind的应用范围更广。但他们的理念都是数据驱动视图,通过指令与数据的绑定来实现DOM和数据的同步。这两个指令是Vue.js响应式系统的基石,掌握它们是学习Vue的基础。