vue学习笔记

Vue 学习笔记 本文档主要介绍 Vue 框架的基础知识点，包括 Vue 路由、CSS 样式、表单获取值、数据绑定、事件处理等。 一、Vue 路由 在 Vue 中， `<router-view/>` 是用来承载当前级别下的子级路由的一个视图标签。其作用是显示当前路由级别下一级的页面。例如，http://localhost:8080/#/first 这个网址中，`#`相当于 app.Vue 文件 first，以及 http://localhost:8080/#/ 都是 `#` 下一级的路由。因此，先会运行 app.Vue 中 `<template>` 中的内容。 二、CSS 样式 在 CSS 中，`-webkit-font-smoothing` 的值有三个：none、antialiased 和 subpixel-antialiased。其中，none 关闭字体平滑，antialiased 抗锯齿很好，subpixel-antialiased 是默认值，在大多数非视网膜显示器上提供最清晰的文字。同时，`-moz-osx-font-smoothing` 的值有四个：auto、grayscale、inherit 和 unset。 三、表单获取值 在 Vue 中，可以使用 `<form @submit.prevent="postData">` 获取前端输入的值。然后，在 `<script>` 中写 `methods:{ postData(){console.log(this.user)}}`，并在 `data(){return{user:{ userName:"",email:"",address:"",phoneNumber:"",password:"",confirm_psw:"",}}}` 中定义用户信息。这样就可以在点击后输出用户信息。 四、数据绑定 Vue 中有两种数据绑定方式：单项数据绑定和双向数据绑定。单项数据绑定使用 `<input type="text" v-bind:value="name">`，只能从数据流向页面。双向数据绑定使用 `<input type="text" v-model="name">`，不仅可以从数据流向页面，还可以从页面流向数据。通常在表单时使用。 五、El 与 data 的两种写法 在 Vue 中，El 和 data 有两种写法。第一种写法是使用对象式，例如 `Const vm = new Vue({el:'#root',data:{ //data 的第一种写法：对象式 name:'JoJo'}})vm.$mount('#root')`。第二种写法是使用函数式，例如 `new Vue({el:'#root',data(){ //第二种写法：函数式 return{name:'JoJo'}}})`。 六、事件处理 在 Vue 中，可以使用 `v-on:xxx` 或 `@xxx` 绑定事件，其中 `xxx` 是事件名。例如 `<button v-on:click="show">show</button>` 或 `<button @click="show2($event,66)">show</button>`。在 `<script>` 中定义事件处理函数，例如 `methods:{show(event){console.log(event)},show2(event,num){console.log(event,num)}}`。 七、事件修饰符 在 Vue 中，可以使用事件修饰符来修改事件的行为。例如，`<a href="http://www.atguigu.com" @click.prevent="showInfo">点我提示信息</a>` 阻止默认事件，`<button @click.stop="showInfo">点我提示信息</button>` 阻止事件冒泡，`<button @click.once="showInfo">点我提示信息</button>` 事件只触发一次，以及 `<div class="box1" @click.capture="showMsg(1)">div1<div class="box2" @click="showMsg(2)">div2</div>` 使用事件的捕获模式。