网站 开发 外包,网站主办者是什么意思,网站域名过户,广告策划书籍接上一篇#xff1a;#xff08;vue基础试炼_03#xff09;使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233 指令说明v-bind传入绑定值文章目录一、前端页面组件化二、全局组件学习三、局部组件学习一、前端页面组件化 页面组件化#xff1a… 接上一篇vue基础试炼_03使用vue.js实现TodoListhttps://gblfy.blog.csdn.net/article/details/103842233 指令说明v-bind传入绑定值文章目录一、前端页面组件化二、全局组件学习三、局部组件学习一、前端页面组件化 页面组件化 简单理解就是一个页面可以划分成几个区域一个区域就可以看作是一个组件那整个页面就相当于有很多组件拼接而成的就像拼积木一样这样每个组件是细致的也是容易维护的。 在TodoList例子中列表就可以看作是一个组件。
以前列表项是通过li标签来显示的
li v-foritem in list{{item}}/li二、全局组件学习
下面把li标签中的内容整体变成一个组件 在script标签里面我们调用一个Vue.component全局组件在组件中定义模板和我们需要接收的参数的值通过插值表达式渲染到页面进行展示
!DOCTYPE html
html langen
headmeta charsetUTF-8title使用组件改造TodoList/title!--引入vue.js库--script srcvue.js/script
/headbody
!--vue接管的div--
div idappdivinput typetext v-modelinputValuebutton v-on:clickhandleBtnClick提交/button/divultodo-item v-bind:contentitemv-foritem in list/todo-item/ul
/divscriptVue.component(TodoItem, {props: [content],template: li{{content}}/li});/*创建了一个vue实例*/var app new Vue({el: #app,data: {list: [],inputValue: },methods: {handleBtnClick: function () {this.list.push(this.inputValue)this.inputValue }}});
/script
/body
/html 我们把list循环出的每一个值都赋值给item然后再把item通过v-bind指令传给todo-item标签怎么传呢通过content这个变量来传递。 子组件(todo-item)传递值给父组件那父组件如何接收呢 在父组件中添加 props: [content],来接收子组件传递过来的参数内容。 这样的话子组件中就可以接收外部传递过来content参数值而content的值就是item而item就是list通过循环出来的每一项所以子组件就接收到了list数组中的每一项的值item。 子组件接收到的content值需要在模板(template)li标签中通过插值表达式渲染出来展示到页面中。
梳理逻辑 首先我定义了一个组件叫TodoItem然后呢这是一个全局的组件直接可以在我们的模板中使用这个组件todo-item怎样使用这个组件呢 我们通过list来决定到底循环多少个todo-item这个组件同时把每一个list的每一项的内容通过v-bind的语法借助content这个变量擦混递给了todo-item这个组件而如果你想使用父组件传递过来的数据需要在props中对content进行接收接收完成后我们的模板中用到了content然后组件就会将这个content渲染出来。
三、局部组件学习
使用局部组件实现上面案例
序号说明①创建一个局部组件②将局部组件以对象的形式在Vue实例的components里面进行注册即可!DOCTYPE html
html langen
headmeta charsetUTF-8title使用组件改造TodoList/title!--引入vue.js库--script srcvue.js/script
/headbody
!--vue接管的div--
div idappdivinput typetext v-modelinputValuebutton v-on:clickhandleBtnClick提交/button/divultodo-item v-bind:contentitemv-foritem in list/todo-item/ul
/divscript/*创建一个局部组件 TodoItem*/var TodoItem {props: [content],template: li{{content}}/li}/*创建了一个vue实例*/var app new Vue({el: #app,/*通过对象来注册局部组件TodoItem*/components: {TodoItem: TodoItem},data: {list: [],inputValue: },methods: {handleBtnClick: function () {this.list.push(this.inputValue)this.inputValue }}});
/script
/body
/html 下一篇vue基础试炼_05简单组件之间的传值https://blog.csdn.net/weixin_40816738/article/details/103845363
