多用户旅游网站开发,如何建设淘宝客网站,网络舆情应对措施,网站建设的七个步骤一、ref
1.ref引用
每个vue组件实例上#xff0c;都包含一个$refs对象#xff0c;里面存储着对应dom元素或组件的引用。默认情况下#xff0c;组件的$refs指向一个空对象。
2.使用ref获取dom元素的引用
templateh3 refmyh3ref组件/h3都包含一个$refs对象里面存储着对应dom元素或组件的引用。默认情况下组件的$refs指向一个空对象。
2.使用ref获取dom元素的引用
templateh3 refmyh3ref组件/h3button clickgetRefgetRef/button
/template
script
export default{methods:{getRef(){console.log(this,this.$refs);this.$refs.myh3.style.colorred}}
}
/script
3.使用ref引用组件实例
templateMyIndex refmyIndexRef/MyIndexbutton clickgetRefgetRef/button
/template
script
import MyIndex from ./index copy.vue;
export default{components:{MyIndex},methods:{getRef(){console.log(this,this.$refs);this.$refs.myIndexRef.reset()}}
}
/scripttemplatediv{{count}}button clickthis.count1按钮/button/div
/template
script
export default{data(){return{count:1}},methods:{reset(){this.count0}}
}
/script
4.控制文本框和按钮的按需切换
templateinput typetext v-ifinputVisible refiptbutton v-else clickshowInputgetRef/button
/template
script
export default{data(){return{inputVisible:false}},methods:{showInput(){this.inputVisibletrue;//获取文本框的引用对象访问的ipt是undefind,dom更新是异步的拿不到最新domthis.$nextTick((){this.$refs.ipt.focus();})}}
}
/script
5.组件是异步执行dom更新的
6.this.$nextTick(cb)
组件的$nextTick(cb)方法会把cb回调推迟到下一个dom更新周期之后执行。简单理解等组件的dom异步地重新渲染完成后再执行cb回调函数。从而能保证cb回调函数可以操作到最新的dom元素。
二、动态组件
1.什么是动态组件
动态组件时动态切换组建的显示与隐藏。vue提供了一个component组件专门用来实现组件的动态渲染。
a.component是组件的占位符
b.通过is属性动态指定要渲染的组件名称
c.component is要渲染的组件名称/component
2.如何实现动态组件渲染
templatebutton clickcomNameHome首页/buttonbutton clickcomNameMovie电影/buttonhrcomponent :iscomName/component
/template
script
import Home from ./home.vue
import Movie from ./movie.vue
export default{components:{Home,Movie},data(){return{comName:Home}}
}
/script
3.使用keep-alive保持组件的状态
默认情况下动态切换组件时无法保持组件的状态。可以使用vue内置的keep-alive组件保持动态组件的状态。
templatebutton clickcomNameHome首页/buttonbutton clickcomNameMovie电影/buttonhrkeep-alivecomponent :iscomName/component/keep-alive
/template
script
import Home from ./home.vue
import Movie from ./movie.vue
export default{components:{Home,Movie},data(){return{comName:Home}}
}
/scripttemplatedivHome组件{{ count }}button clickcount11/button/div
/template
script
export default{data(){return{count:1}},created(){console.log(created);},unmounted(){console.log(unmounted);},
}
/script
三、插槽
1.什么是插槽
插槽是vue组件为组件的封装者提供的能力。允许开发者在封装组件时把不确定、希望由用户指定的部分定义为插槽。
可以把插槽认为是组件封装期间为用户预留的内容占位符。
没有预留插槽的内容会被丢弃
templateHomep-------------/p/Home
/template
script
import Home from ./home.vue
export default{components:{Home},
}
/scripttemplatedivHome组件pp1p1p1p1p1p1p1p1p1p1p1p1p1/pslot/slotpp2p2p2p2p2p2p2p2p2p2p2p2p2/p/div
/template
2.后备内容默认内容
封装组件时可以为预留的slot插槽提供后备内容默认内容。如果组件的使用者没有为插槽提供任何内容则后备内容会生效。
templateHome!-- p-------------/p --/Home
/template
script
import Home from ./home.vue
export default{components:{Home},
}
/scripttemplatedivHome组件pp1p1p1p1p1p1p1p1p1p1p1p1p1/pslot默认xxxxxxxx/slotpp2p2p2p2p2p2p2p2p2p2p2p2p2/p/div
/template
3.具名插槽
如果在封装组件时需要预留多个插槽节点则需要为每个slot插槽指定具体的name名称。这种带有具体名称的插槽叫做“具名插槽”。
v-slot:可以简写为字符#
templateHome!-- v-slot可简写为# --template v-slot:header头部/templatep-------------/ptemplate #footer底部/template/Home
/template
script
import Home from ./home.vue
export default{components:{Home},
}
/scripttemplatedivHome组件slot nameheader/slotslot默认xxxxxxxx/slotslot namefooter/slot/div
/template
4.作用域插槽
在封装组件的过程中可以为预留的slot插槽绑定props数据这种带有props数据的slot插槽叫做作用域插槽。
templateHometemplate v-slot:defaultscope{{ scope }}{{ scope.info.name }}/template/Home
/template
script
import Home from ./home.vue
export default{components:{Home},
}
/scripttemplatedivHome组件slot :infoinfomation :msgmsg/slot/div
/template
script
export default{data(){return{infomation:{name:zs,age:18},msg:123}}
}
/script
解构作用域插槽
templateHometemplate #default{info,msg}{{ info.name }}{{ info.age }}{{ msg }}/template/Home
/template
script
import Home from ./home.vue
export default{components:{Home},
}
/script
作用域插槽的使用场景
templateHometemplate #default{user}td{{user.name}}/tdtd{{ user.age }}/tdtdinput typecheckbox :checkeduser.state/td/template/Home
/template
script
import Home from ./home.vue
export default{components:{Home},
}
/scripttemplatedivHome组件tabletrtd名字/tdtd年龄/tdtd状态/td/trtr v-foritem in list :keyitemslot :useritem/slot/tr/table/div
/template
script
export default{data(){return{list:[{name:zs1,age:18,state:true},{name:zs2,age:17,state:false},{name:zs3,age:15,state:true}],}}
}
/script
四、自定义指令
vue 中自定义指令分为两类私有自定义指令全局自定义指令。
在每个vue组件中可以在directives节点下声明私有自定义指令。
1.私有自定义指令
templateinput typetext v-focus
/template
script
export default{directives:{focus:{//当被绑定的元素插入到dom中时会自定触发mounted函数mounted(el){el.focus()//让被绑定的元素自动获取焦点}}}
}
/script
2.全局自定义指令
在main.js文件中声明自定义指令
const app createApp(App)
app.directive(focus,{mounted(el){el.focus()}
})
3.updated函数
mounted函数只在元素第一次插入dom时被调用当dom更新时mounted函数不会被触发。updated函数会在每次dom更新后被调用。
templateinput typetext v-focus{{ count }}button clickcount11/button
/template
script
export default{data(){return{count:1}}
}
/script//main.jsmain.js
const app createApp(App)
app.directive(focus,{mounted(el){el.focus()},updated(el){el.focus()}
})
在vue2的项目中使用自定义指令时mounted-bind,updated-update
如果mountedupdated函数中的逻辑完全相同可以简写
const app createApp(App)
app.directive(focus,(el){el.focus()
})
4.指令的参数值
在绑定指令时可以通过等号的形式为指令绑定具体的参数值。binding.value
templateinput typetext v-model.numbercount v-focus v-colorredp v-colorgreen{{ count }}/pbutton clickcount11/button
/template
script
import Home from ./home.vue
export default{components:{Home},data(){return{count:1}}
}
/script//main.js
const app createApp(App)
app.directive(focus,(el){el.focus()
})
app.directive(color,(el,binding){el.style.colorbinding.value
})
五、Table案例 1.搭建项目基本结构
npm create vite
cd vite-project
npm install
2.请求商品列表数据
npm i axios
//main.js
import axios from axios
//配置请求的根路径
axios.defaults.baseURLhttp://localhost:3000
//将axios挂载为全局的$http自定义属性
app.config.globalProperties.$httpaxios3.封装MyTable组件
a.通过props属性为MyTable.vue组件指定数据源
b.在MyTable.vue组件中预留header的具名插槽
c.在MyTable.vue组件中预留body的作用域插槽
templatetabletheadslot nameheader/slot/theadtbodytr v-for(item,index) in data :keyitemslot namebody :rowitem :indexindex/slot/tr/tbody/table
/template
script
export default{props:{data:{type:Array,default:[],require:true}}
}
/script
4.实现删除功能
5.实现添加标签的功能
a.实现input和button的按需展示v-if,v-else
b.让input自动获取焦点(自定义指令)
c.文本框失去焦点自动隐藏
d.文本框的enter,esc按键事件
把用户在文本框中输入的值预先转存到常量val中清空文本的值v-iffalse隐藏文本框
判断val的值是否为空如果为空则不进行添加
判断val的值是否已经存在于数组中如果存在则不进行添加return
将用户输入的内容作为新标签push到当前tag数组中
templateMyTable :datagoodsListtemplate #headertd#/tdtd商品名称/tdtd价格/tdtd标签/tdtd操作/td/template template #body{row,index}td{{index1}}/tdtd{{ row.title }}/tdtd{{ row.price }}/tdtdinputv-ifrow.inputVisiblerefInputRefv-model.trimrow.inputValueclassml-1 w-20keyup.enterhandleInputConfirm(row)blurhandleInputConfirm(row)keyup.escrow.inputValuev-focus/el-button v-else classbutton-new-tag ml-1 sizesmall clickrow.inputVisible trueTag/el-buttonel-tag classml-2 typesuccess v-foritem in row.tag :keyitem{{ item }}/el-tag/tdtdel-button typedanger clickdeleteFn(row.id)删除/el-button/td/template/MyTable
/template
script
import MyTable from ./MyTable.vue
export default{components:{MyTable},data(){return{goodsList:[]}},methods:{async getGoodsList(){const {data:res}await this.$http.get(/goodsList)console.log(res,res);this.goodsList res.map(item{return{...item,inputVisible:false,inputValue:}})},deleteFn(id){this.goodsList this.goodsList.filter(itemitem.id!id)},handleInputConfirm(row){const val row.inputValue;row.inputValue ;row.inputVisible false;if(!val||row.tag.indexOf(val) !-1)returnrow.tag.push(val)},},created(){this.getGoodsList()},directives:{focus(el){el.focus()}}
}
/script
