文章 59
评论 4
浏览 18413
Vue组件复用的一个小坑

Vue组件复用的一个小坑

Vue组件复用过程中,由于将变量设为临时变量,导致组件之间共用变量,某个组件销毁时将变量一起销毁导致其他组件失灵。

Vue中的数据绑定

Vue中的数据绑定

在 Vue 中数据绑定分为两种:“单向数据绑定”和“双向数据绑定”。 对于这二者的区别,我有以下的思考: 单向数据绑定:适用于父组件触发事件,改变自身 property 的值,进而将改变后的值通过 prop 的方式传给子组件,进而使子组件的 property 改变。 双向数据绑定:子组件触发事件,改变自身的 property 的值,需要用一种信号的方式,将触发事件与值发送出去,父组件监听这个事件并接收值,并用值改变自己的 property。 单向数据绑定 我学习 Vue 的过程中,第一个学到的特殊用法就是 Mustache 语法 ,但这种方法不能用于 HTML attribute 上,这时候就需要引入利用 v-bind 实现的 “单向数据绑定”,“单向数据绑定”很常用也很简单,主要用于绑定 HTML attribute,以及接受参数。 绑定属性 1<a v-bind:href="url">...</a> 1<a v-bind:[attributeName]="url"> ... </a> 接受参数 1<!DOCTYPE h....

Vue组件写法汇总

Vue组件写法汇总

刚开始接触前端,第一个接触的框架是Vue,众所周知“数据驱动”和“组件化”是vue.js两个最重要的特点。组件化是为了方便代码复用,提高开发效率。常见的vue组件写法有四种,各有特色,适用于不同的场景。 入门时已经接触到了“组件”的概念,但是当时看到的组件写法,和第一份项目代码中的写法完全不同,所以当时很困惑,所以收集了一下Vue中“组件”的不同写法在此。 script标签引入 全局组件 <body> <div id="app"> <componentName></componentName> </div> <script> Vue.component('componentName', { data() { return { message: "hello", } }, method: { }, // 组件中的方法 //...... // 组件其他的属性和方法 template: "<div></div>", // 组件的html结构, }) new Vue({ el: '#app' }) ....

闻道