文本框封装

实现子父组件值双向绑定
子组件通过$emit把input框监听到的值发送给父组件

//子组件
 <div>
    <input
      @input="handleInput"
      class="myInput"
      type="text"
      placeholder="请输入用户名/手机号"
      :value="value"
    />
  </div>

<script>
export default {
porps:{"value"}
  methods: {
    handleInput(e) {
    //把输入框的值发送给父组件
      this.$emit("input", e.target.value);
    },
  },
};
</script>


------------------------

//父组件
  <div class="loginBody">
  //把userName传到子组件,并用getUserName监听子组件发出的input事件
    <my-input @input="getUserName" :value="userName"></my-input>
  </div>

<script>
  data() {
    return {
      userName: "Tom",
    };
  },
  methods:{
	getUserName(v):{
	//赋值给userName
		this.userName = v
		}
	}
  
</script>
  • 用V-model封装(v-model双向绑定的实现原理)
//子组件
//少了动态取值props的value
 <div>
    <input
      @input="handleInput"
      class="myInput"
      type="text"
      placeholder="请输入用户名/手机号"
    />
  </div>

<script>
export default {
  methods: {
    handleInput(e) {
    //把输入框的值发送给父组件
    //此时e.target.value就是父组件传值的userName
      this.$emit("input", e.target.value);
    },
  },
};
</script>


------------------------

//父组件
  <div class="loginBody">
  //v-model代替了 @input="getUserName" :value="userName"
  //v-model默认把值传给value,并且监听了input事件
    <my-input v-model="userName"></my-input>
  </div>

<script>
  data() {
    return {
      userName: "Tom",
    };
  },
//不需要再设定input监听事件来进行赋值修改
  
</script>

总结:
1.v-model实现了给Input框value赋值,并监听了input框发出的事件
2.在子组件使用的时候赋值,默认会添加到子组件的根元素上

路由封装




//在router文件夹中新建文件index.js,引用的时候直接输入路径,会自动匹配文件夹中的index文件
//模块化工程,必须通过Vue.use()安装,所以首先引入Vue,并安装路由
import Vue from 'vue'

import VueRouter from "vue-router"

Vue.user(VueRouter)

''添加路由配置
const router = new VueRouter({
//routes是数组,在里面配置路由
	routes:[{
		name:"index",
		//设定路由参数,如果设定之后不传的话页面不会显示
		path:"/index/:id",
		//映射组件
		component:()=>import('@/compoents/index.vue'),
		//嵌套子路由
		children:[
			name:"index",
			//子路由的路径不建议加'/',因为'/'开头的嵌套路径会被当做跟路由
			path:"index",
			//映射组件
			component:()=>import('@/compoents/children.vue')
		]
	}]
})

------------------------------------------------
//在mian.js中
//引入路由
import router from "@/router"

new Vue({
//注入路由
  router,
  render: h => h(App),
}).$mount('#app'


//使用路由的组件中
//要使用router-view来设定展示路由的区域
  <div id="app">
	<p>展示路由的区域</p>
    <router-view></router-view>
  </div>

路由跳转

- 声明式导航

通过<v-link to="/index"></v-link>来进行跳转
或者为超链接添加参数

<router-link to='/index/1'>跳转到参数1的页面</router-link>



- 编程式导航

使用方法$router.push()来进行跳转

//字符串
$router.push('index')

//对象
$router.push({name:'index'})//或者{path:'index'}

//命名的路由
$router.push({name:'index',params:{id:'1'})

//带查询参数的路由,地址会拼接成/index?id=1
$router.push({ path: 'index', query: { id: '1' }})

query需要path来引入,会拼接地址;params需要name来引入

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123




- 获取参数

this.$route.params 来获取params参数
this.$route.query 来获取query参数

- 监听路由的变化

如果不同的路由指向的是同一个Vue组件,则即使路由跳转,vue的钩子函数也只会触发一次,因为原来的组件实例会被复用,则如果需要监听路由参数变化,需要用

watch:{
	$router(to,from){
	//to是目的路由参数
	//from是上一个路由的参数
	}
}



额外的查漏补缺:

  1. outline:none — CSS清除input框外边框阴影
  2. change:可以监听输入框的变化内容,但是要失去焦点并且值有变化的时候才会触发
  3. blur:失焦就会触发
  4. input:内容变化就会触发