1、可以用来复用的子组件，数据data需要做局部化处理，当组件被复用时，数据会相互独立
<style> .wrap { width: calc(200px * 4 + 80px); margin: 0 auto; user-select: none; } .box { width: 200px; height: 260px; /*border: 1px solid black;*/ background-color: rgba(10, 200, 30, 0.5); border-radius: 10px; float: left; margin: 10px; } .box img { width: 100%; /*height: 200px;*/ border-radius: 50%; } .box p { text-align: center; } </style></head><body> <div id="app"> <div class="wrap"> <tag></tag> <tag></tag> <tag></tag> <tag></tag> </div> </div></body><script src="js/vue.js"></script><script> let titleTag = { template: ` <p> <b> 这是一种纯二哈 </b> </p> `, }; let tag = { template: ` <div class="box"> <img src="img/001.jpg" alt=""> <title-tag /> <p @click="fn"> 锤它：<b>{{ num }}下</b> </p> </div> `, // 能被复用的组件(除了根组件)，数据都要做局部化处理，因为复用组件后，组件的数据是相互独立的 // data的值为绑定的方法的返回值，返回值是存放数据的字典 data () { return { num: 0 } }, methods: { fn() { this.num ++ } }, components: { titleTag, } }; new Vue({ el: '#app', components: { tag, } });</script>
2、将父组件的数据传递给子组件，在渲染子组件标签时，给自定义属性设置父级数据，在子级内部用自定义属性拿父级数据
<style> .wrap { width: calc(200px * 4 + 80px); margin: 0 auto; user-select: none; } .box { width: 200px; height: 260px; /*border: 1px solid black;*/ background-color: rgba(10, 200, 30, 0.5); border-radius: 10px; float: left; margin: 10px; } .box img { /*width: 100%;*/ height: 160px; border-radius: 50%; margin: 0 auto; display: block; } .box p { text-align: center; } </style></head><body> <div id="app"> <div class="wrap"> <!--<div v-for="dog in dogs" class="box">--> <!--<img :src="dog.img" alt="">--> <!--<p>--> <!--<b>--> <!--{{ dog.title }}--> <!--</b>--> <!--</p>--> <!--</div>--> <tag v-for="dog in dogs" v-bind:dog="dog" :a="1" :b="2" /> </div> </div></body><script src="js/vue.js"></script><script> let dogs = [ { title: '二哈1号', img: 'img/1.jpg', }, { title: '二哈2号', img: 'img/2.jpg', }, { title: '二哈3号', img: 'img/3.jpg', }, { title: '二哈4号', img: 'img/4.jpg', }, { title: '二哈1号', img: 'img/1.jpg', }, { title: '二哈2号', img: 'img/2.jpg', }, { title: '二哈3号', img: 'img/3.jpg', }, { title: '二哈4号', img: 'img/4.jpg', }, ]; let tag = { // 在组件内部就可以通过设置的自定义属性，拿到外部选择子组件提供给属性的值 props: ['dog', 'a', 'b', 'z'], template: ` <div class="box"> <img :src="dog.img" alt=""> <p> <b> {{ dog.title }} </b> </p> <p @click="fn"> 锤它：<b>{{ num }}下</b> </p> </div> `, data () { return { num: 0, } }, methods: { fn() { this.num ++ } }, }; new Vue({ el: '#app', data: { dogs, }, components: { tag, } }); /** 总结 * 1.数据在父组件中产生 * 2.在父组件中渲染子组件，子组件绑定自定义属性，附上父组件中的数据 * 3.子组件自定义属性在子组件的props成员中进行声明(采用字符串发射机制) * 4.在子组件内部，就可以用props声明的属性(直接作为变量)来使用父组件中的数据 */</script>
3、将子组件的数据传递给父组件，子组件需要主动触发$emit自定义事件携带出数据，父级实现自定义事件方法，就可以接收到子级数据
<style> ul { list-style: none; } .d-btn { font-size: 12px; width: 15px; display: inline-block; } .d-btn:hover { color: red; cursor: pointer; } </style></head><body> <div id="app"> <input type="text" v-model="msg"> <button @click="send_comment">留言</button> <ul> <tag v-for="(v, i) in comments" :msg="v" :index="i" @f1="deleteMsg"/> </ul> </div></body><script src="js/vue.js"></script><script> let tag = { props: ['msg', 'index'], template: ` <li> <i class="d-btn" @click="fn">x</i> <b>{{ msg }}</b> </li> `, methods: { fn () { // 点击子集，要告诉父级删除第几条数据，因为comments在父级中 // 需要通知父级 this.$emit('f1', this.index); } } }; new Vue({ el: '#app', data: { msg: '', comments: localStorage.comments ? JSON.parse(localStorage.comments) : [], }, components: { tag, }, methods: { send_comment() { if (this.msg) { this.comments.push(this.msg); this.msg = ''; localStorage.comments = JSON.stringify(this.comments); } }, deleteMsg(index) { this.comments.splice(index, 1); localStorage.comments = JSON.stringify(this.comments); } } })</script><script> // localStorage，sessionStorage不能直接存储数组和对象，需要序列化为json localStorage.arr = JSON.stringify([1, 2, 3]); let res = JSON.parse(localStorage.arr); console.log(res, res[2]);</script>
div id="app"> <h1> {{ title }} </h1> <!-- 组件标签不能添加系统事件，只能添加自定义事件，自定义事件在组件内部通过$emit主动触发 --> <tag @self_action="changeTitle"/></div></body><script src="js/vue.js"></script><script> let tag = { template: ` <div> <input v-model="sub_title" /> </div> `, data() { return { sub_title: '' } }, watch: { sub_title() { // 将sub_title与父级的title建立关联 // 激活(触发)self_action自定义事件 this.$emit('self_action', this.sub_title) } } }; new Vue({ el: '#app', components: { tag, }, data: { title: '父级初始标题' }, methods: { changeTitle(sub_title) { this.title = sub_title ? sub_title : '父级初始标题'; } } })</script>
4、搭建vue环境需要依赖node环境，以及用npm包管理器安装vue脚手架cli（npm可以换源为cnpm）
5、通过 vue create 项目 来创建前台项目，选择配置好项目所需的依赖
6、用pycharm来配置vue项目启动
7、属性vue项目目录结构，以及基本的各种原理：项目入口从main.js开始
来源：https://www.cnblogs.com/wwei4332/p/11852139.html