什么网站做h5不收费,网站建设放哪个科目好,网站推广公司大家好,门户网站建设系统准备#xff1a;
安包 npm less less-loader。拆分#xff1a;一共分成两个组件部分#xff1a;
1#xff1a;My-Tag 标签一个组件。2#xff1a;My-Table 整体一个组件#xff08;表头不固定#xff0c;内容不固定#xff08;插槽#xff09;#xff09;
一…
准备
安包 npm less less-loader。拆分一共分成两个组件部分
1My-Tag 标签一个组件。2My-Table 整体一个组件表头不固定内容不固定插槽
一My-Tag 分类标签的功能
tip拆分时style要加style langless scoped /style
在APP.vue中导入、注册、使用组件
功能
1 : input修改数据 和 文字互斥
用 布尔数据 isShow:false、input加v-if 、div加v-else
templatediv classmy-taginputclassinputtypetextplaceholder输入标签v-ifisShow/div classtext v-else茶具/div/div
/template
script
// My-Tag 分类标签的功能
// 1 : input修改数据 和 文字互斥 用 布尔数据 v-if v-else
// 2 : 双击文字 div显示input标签→自动获得焦点
// 3 : input要数据回显
// 4 : 用户输入后回车→把新的内容渲染到页面→数据应该同步
export default {
data(){return{isShow:false}
},
}
/script
2 :双击显示input自动获焦和失焦
双击文字 div显示input标签输入框input输入框自动获得焦点
光标在输入框中失去焦点时输入框变成div里的文字
dbldouble
1 div茶具添加dblclick双击 修改isShow:为true
2 main写全局自定义命令获焦指令在input身上直接用v-focus
3 input添加 blur失焦 isShow修改为true输入框变成div里的文字
import Vue from vue
import App from ./App.vueVue.config.productionTip false//自定义命令---获得焦点-----全局-----在main.js
Vue.directive(focus, {inserted(el) {el.focus()}})// ---------------------------------
new Vue({render: h h(App),
}).$mount(#app)
templatediv classmy-taginputclassinputtypetextplaceholder输入标签v-ifisShowv-focusblurisShowfalse/!--dbldouble 双击-------div classtext v-else dblclickdblfn 茶具/div/div
/template
script
// My-Tag 分类标签的功能
// 1 : input修改数据 和 文字互斥 用 布尔数据 v-if v-else
// 2 : 双击文字 div显示input标签→自动获得焦点
// 3 : input要数据回显
// 4 : 用户输入后回车→把新的内容渲染到页面→数据应该同步
export default {
data(){return{isShow:false}},
methods:{dblfn(){this.isShowtrue}
}
}
/script
3 : input要数据回显
父传子- 子组件用父组件的数据。父子通信比较繁琐
所以用v-model双向绑定 化简V-modelvalue属性和input事件的缩写
1 父APP.vue假设一个txt哈哈哈 字符串数据
2 My-Tag挖坑props:{ value:String },
3父APP.vue 使用v-model MyTag v-modeltxt/MyTag
4input添加:valuevalue
5 : div里文字用差值表达式代替{{value}} 4 : 用户输入后回车,新内容渲染到页面
用户输入后回车→把新的内容渲染到页面→数据应该同步
1在input里添加回车事件 keyup.enterenterfn
2 写函数enterfn通知父组件保存用户输入的数据$emit事件名用户输入的数据-语法糖 用户输入的值——借助事件对象获取value的值e.target.value
3 显示div 隐藏输入框 this.isShowfalse 二、My-Table 整体一个组件
1拆组件
把APP.vue的my-table的结构和css样式剪切到My-Table拆成组件好处就是能调用多次
tip拆分时My-Table的style要加style langless scoped /style
然后把My-Table在根组件APP.vue导入、注册、使用
tip把My-Tag的导入注册和使用全部注释不然会报错My-Tag被发现但未使用 2父传子拿数据(for循环渲染数据)
1 My-Table挖坑 使用父组件的数据
2父组件传数据
3子组件v-for循环替换数据 3插槽
拆成组件能调用多次但因为调用多次不可能每次调用的表格都一模一样结构不固定
所以用插槽表头和内容分别用插槽允许根据需要定制
1: My-Table表头和内容slot插槽
2 : name命名——表头namehead内容namecon 在APP.vue表头和内容接收一下数据
3内容的插槽——用作用域插槽
把My-Table作用域的v-for的值:itemitem :indexindex扔到APP.vue使用 4 : 放开MyTag注释更换MyTag使用时绑定的值
1把分类标签的My-Tag的引入、注册、使用、的注释放开
2: 把使用MyTag 组件绑定的v-model的值更换成item.tag MyTag v-modelitem.tag/MyTag
