目录
声明式渲染
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的基础。
那么请实现一个复选框吧
,写问卷要经常用的,那这种是如何实现的
自定义标签模板
template是常规组件化
这里的案例涉及到解耦,一下子不理解案例可以往后看