前言 目前把vue的基础差不多搞定了，做了个demo来巩固
把demo放在了文尾，下面来谈谈我对vue浅显的理解以及一些细节My idea 细节
vue里js的驼峰式在html中全部变成小写加’-‘，// 在 JavaScript 中是驼峰式 app.component('blog-post', { props: ['postTitle'], template: ` <h3>{{ postTitle }}</h3> ` }) <!-- 在 HTML 中则是横线字符分割 --> <blog-post post-title="hello!"></blog-post>
v-model 默认与value绑定，且只能用在<input>, <textarea> ,<select>中使用
插值在 textarea 中不起作用，用 v-model 来代替
在某些数组方法中（ filter()、concat() 和 slice()）他不会修改原数组的数据，而是返回一个变更数据之后的新数组。重点是Vue 不会丢弃现有 DOM 并重新渲染整个列表。Vue为了使得 DOM 元素得到最大范围的重用而实现了一些智能的启发式方法，所以用一个含有相同元素的数组去替换原来的数组，这样是非常高效的操作。
计算属性和方法的区别于联系，虽然都能实现同样的功能，但是计算属性会先在缓存里寻找，如果有那么不用处理，节省了资源，而方法是怎么都会执行渲染的，所以能用计算属性就用吧。
vue使用关键问题 父组件对子组件通信问题 vue中: data():{ ts : [{id:99}, {id:999}];//数据 }, app.component('t-s',{ props:['tx'],//相当于是把数据引用到了这里，相当于是一个函数传参，或者说是引用 template:` <p v-for:t in tx> {{ t.id }}</p>//子组件使用 ` }); html中: <t-s :tx='ts'> </t-s> //将'ts'引入到组件内，ts相当于形参，采用v-blind绑定了data中的'ts'（也就相当于是实参） 整个过程就是：首先是在父组件中用形参将'ts'也就是data里的数据传入prop形参引用中，然后组件就能使用父组件传递过来的数据了 然后才能在组件中使用，
ref实例获取dom对象 本来不是初级的内容，不过写这个demo需要就看了一些，说下表面的单纯从作用来说就是在html标签中使用ref=’xx’,可以通过this.$refs.xx来读取到dom对象。
组件中class与style的绑定问题，一个组件如何控制另一个组件中的样式 涉及到属性继承问题使用$attrs
css种: .reds{ color: darkred; } html中: <stu-s :stus='stus' :isReds='isReds' :class="{reds: isReds}"></stu-s> vue 中: data(){ isReds :false //控制样式是否生效 } <stu-s>组件中: <textarea :class="$attrs.class" v-for="(value,key) in stu" class="stuTable" v-model="value"> <opt-s>组件中://通过selec函数来改变isReds的真假值，来控制 <button type="button" @click="selec(this.$refs.op[1].selected)">🤺</button> 谈下流程，首先我们定义了一个reds样式，在<stu-s>组件中将isReds布尔变量值传到子组件中，用:class="{reds: isReds}"设定样式 子组件中<textarea>标签中采用:class="$attrs.class"来接收<stu-s>组件定义的reds样式，当然该样式是否生效取决于idReds的真假。
demo 用来练手的，熟悉vue语法，布局随便整的，然后watch没怎么理解所以也就没有使用到,计算属性是单纯的没有用到emmmm
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> #t{ width: 40rem; height: 37.5rem; } #tbs{ po } #tb{ list-style-type: none; color: royalblue; } #tb li{ display: inherit; float: left; width: 100px; height: 60px; padding: 5px; } #tbt{ float: left; position: relative; top: -30px; } .stuTable{ color: green; float : left; font-family: "arial narrow"; font-size: 18px; text-align: center; width: 80px; height: 15px; padding: 1rem; } #fo{ position: relative; float: left; top: 2rem; } #fo input{ width: 6.25rem; } #opt{ position: relative; float: left; } .reds{ color: darkred; } </style> <script type="text/javascript" src="../vue.js"></script> <body> <div id="t"> <stu-s :stus='stus' :isReds='isReds' :class="{reds: isReds}"></stu-s> <form id="fo" action="" method=""> 姓名<input type="text" name="" id="" ref="na" value="ajie"/> 性别<input type="text" name="" id="" ref="sex" value="man"/> 年龄<input type="text" name="" id="" ref="age" value="18"/> <button type="button" @click="addNewStu(this.$refs.na.value,this.$refs.sex.value,this.$refs.age.value)" >新增</button> </form> <opt-s id="opt" :stus='stus' :selec='selec' :say='say'></opt-s> </div> </body> <script type="text/javascript"> const app = Vue.createApp({ data() { return { stus : [{name : 'saozhu', sex : 'man', age : 22}, {name : 'laohu', sex : 'man', age : 23}, {name : 'laofu', sex : 'woman', age : 24}], id : 4, isReds :false, } }, methods:{ addNewStu(n,s,a){ let p = {name : '', sex : '', age : 1}; p.name = n; p.sex = s; p.age = a; this.stus.push(p); }, selec(s){ if (s == true){ this.say("s:" + s); this.isReds = true; this.say(this.isReds); } else{ this.isReds = false; this.say(this.isReds); } }, say(t){ console.log(t); } } }); app.component('stu-s', { props : ['stus','isReds'], template: ` <div id="tbs"> <ul id="tb"> <li>姓名</li> <li>性别</li> <li>年龄</li> </ul> <div id="tbt" v-for="stu in stus"> <textarea :class="$attrs.class" v-for="(value,key) in stu" class="stuTable" v-model="value"> </div> </textarea> </div> ` }); app.component('opt-s', { props : ['stus','say','selec'], template:` 选择一位 <select > <option ref="op" v-for="stu in stus" value="stu.name">{{ stu.name }}</option> </select> 今晚🤺 嘻嘻嘻 <button type="button" @click="selec(this.$refs.op[1].selected)">🤺</button> ` }); app.mount("#t"); </script> </html>
