1.聊天页面直接点击好友的头像。
2.在通讯录里点击好友的头像。
3.在朋友圈里点击好友的头像。
1、进入到好友的名片页后,点击菜单栏,点击备注信息。
2、 修改备注名,可输入好友的真实姓名
3、为好友添加文字描述,比如说一个陌生好友,你可以写上你的对ta的聊天印象和看法(描述在120字内)
4、 为好友添加图片描述,可以将好友的真实图片添加在上面哦。图片描述可即时拍摄照片,也可以在本地相册里选取。
5、 备注和文字描述可直接在输入框内进行修改,图片描述也可进行删除和更换图片(先对其进行删除,再重新上传)。
6、 完成备注、文字描述、图片描述后点击右上角的完成。
7、 修改过后在好友的名片页只能直接看到备注和文字描述,如果想查看图片描述必须进入到备注信息才能看到哦。
1.在components 目录下新建一个validate.js:export default{
install(Vue){
Vue.prototype.$myName = "zhagngsan"
}
}
这就是我们的插件,定义了一个属性
2.入口文件jssrc/index.js 加入:
// 引入
import validate from "./../components/validate"
// 使用
Vue.use(validate)
3.我们到user-username.vue 组件下验证一下:
mounted(){
alert(this.$myName)
},
浏览器访问登录页面,成功d出:
这里写图片描述
4.刚刚我们已经学会插件里定义属性,马上来学一下如何定义方法:
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan"
Vue.prototype.checkUserName = (value) =>{
if(/\w{6,20}/.test(value)){
return true
}else{
return false
}
}
}
}
同样可以使用该方法:
if(this.checkUserName("hello")){
alert("ok")
}else{
alert("error")
}
5.
这里写图片描述
我们修改user-name.vue 组件,来实现文本框验证:
<template>
<div class="form-group">
<label class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
<label class="label label-danger" v-if="showErrorLabel">用户不合法</label>
</div>
</div>
</template>
<script>
export default{
props:["placeholder"],
data:function () {
return {
username:"",
showErrorLabel:false,
}
},
methods:{
userNameChange(){
// 用户名改变的方法里判断 用户名是否复合要求
if(this.checkUserName(this.username)){
this.showErrorLabel = false// 如果验证没有通过就显示错误提示
}else{
this.showErrorLabel = true
}
// 调用父组件的方法
this.$emit("childChange","username",this.username)
}
}
}
</script>
这里写图片描述
自定义指令
文档:
1、validate.js:
export default{
install(Vue){
// Vue.prototype.$myName = "zhagngsan"
Vue.prototype.checkUserName = (value) =>{
if(value == ""){
return true// 如果没有填写,默认为true
}
if(/\w{6,20}/.test(value)){
return true
}else{
return false
}
}
Vue.directive("uname",{
bind(){
console.log("bind")// 只会调用一次
},
update(el,binding,vnode){
console.log(el)
console.log(binding)
console.log(vnode)
},
})
}
}
2、我们自定了一个uname 指令,下面来看一下如何使用的?
<input type="text" v-uname="username" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username">
我们在组件的模板里使用了 v-uname ,并且给绑定了”username”数据。
我们打开浏览器的控制台:
这里写图片描述
说明我们定义的指令里,这个方法执行了:
bind(){
console.log("bind")// 只会调用一次
},
3、下面我们来看一下update 里的东东
update(el,binding,vnode){
console.log(el)
console.log(binding)
console.log(vnode)
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)