Vue学习历程一
一、vue入门简单回顾
1、指令修饰符
@keyup.enter → 键盘回车监听
v-model.trim → 去除首尾空格
v-model.number →转数字
@事件名.stop →阻止冒泡
@事件名.prevent →阻止默认行为
2、v-bind的增强
操作class：
<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值 }"></div> //对象形式
<div class="box" :class="[ 类名1, 类名2, 类名3 ]"></div> //数组形式操作style：
div class="box" :style="{ CSS属性名1: CSS属性值, CSS属性名2: CSS属性值 }"></div>3、v-model 应用于其他表单元素
<template><div>姓名：<input type="text" v-model="username"> 姓名是：{{username}}<br><br>文本域：<input type="textarea" v-model="textareaValue"> 文本域值是：{{textareaValue}}<br><br>复选框：<input type="checkbox" v-model="isSingle"> 是否单身：{{isSingle}}<br><br>单选框：<input type="radio" v-model="gender" name="sex" value="male"> 男 <input type="radio" v-model="gender" name="sex" value="female"> 女性别是：{{gender}}<br><br>下拉菜单<select v-model="selectId"><option value="13">小米13</option><option value="14">小米14</option><option value="15">小米15</option><option value="16">小米16</option></select>下拉框选中的是：{{selectId}} </div>
</template><script>
export default {data(){return {username:'',textareaValue:'',isSingle:false,gender:'',selectId:''}}
}
</script><style>
</style>实现：
4、计算属性computed
对比methods的优势：计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
依赖项变化了，会自动重新计算 → 并再次缓存
4.1 日常使用
computed:{totalAge(){console.log(this.userList)return this.userList.reduce((sum, item)=>sum + item.age,0)}}<p>总年龄：{{totalAge}}</p>4.2、计算属性完整写法
<template><div><span>{{firstName}} + {{lastName}} = {{fullName}}</span><br><button @click="changeFullName">改名卡</button></div>
</template><script>
export default {data(){return {firstName:'孙',lastName:'悟空'}},methods:{changeFullName(){this.fullName = "猪八戒"}},computed:{// 简写 → 获取，没有配置设置的逻辑// fullName () {// return this.firstName + this.lastName// }fullName:{get(){return this.firstName + this.lastName},set(newValue){this.firstName=newValue.slice(0,1)this.lastName=newValue.slice(1)}}}
}
</script><style>
</style>实现：
点击改名卡后
5、监听watch
<template><div>{{user.name}}<button @click="changeName">点击我改name为kawa1</button></div>
</template><script>
export default {data(){return {user:{id:1,name:'kawa',age:18}}} ,methods:{changeName(){this.user.name="kawa1"}},watch:{user:{deep:true,//深度监视immediate:true,// 立刻执行，一进入页面handler就立刻执行一次handler(newValue){//newValue是改变的新值console.log(newValue.name)//把kawa1打印在控制台上}}}
}
</script><style>
</style>6、Vue生命周期的四个阶段
二、组件开发
1、前期准备
使用步骤：需要先安装yarn、npm、nodejs
1. 全局安装 (一次) ：yarn global add @vue/cli 或 npm i @vue/cli -g
2. 查看 Vue 版本：vue --version
3. 创建项目架子：vue create project-name（项目名-不能用中文）
4. 启动项目： yarn serve 或 npm run serve（找package.json）
安装高亮插件：Vetur
2、组件相关
2.1组件注册
局部注册：App.vue
<script>
import MySon from './components/MySon.vue'//导入export default {name:'app',data(){return {msg:'kawa'}},components:{//在components注册MySon}
}
</script>全局注册：main.js
//全局组件注册
import MySon from './components/MySon.vue'
Vue.component('MySon',MySon)2.2、scoped
默认组件中的style样式会作用到全局，可以给组件加上 scoped 属性, 可以让样式只作用于当前组件
<style scoped>
</style>2.3、ref和$refs
特点：查找范围是当前组件内
2.3.1 获取dom组件
2.3.1 获取组件实例
2.4、$nextTick
等DOM更新后，才会触发此方法里面的函数体
3、组件通信
3.1、父传子
父组件通过 props 将数据传递给子组件
3.2、子传父
子组件利用 $emit 通知父组件修改更新
4、自定义指令
4.1、简单注册
局部注册
全局注册
4.2、自定义指令--指令的值
实现一个color指令，传入不同的颜色，给标签设置文字颜色
5、插槽slot
5.1、默认插槽
外部传了kawa2，内部的slot会被替换掉。界面显示kawa2。但如果App.vue不key kawa2，界面就显示kawa1，kawa1其实是个默认值
5.2、具名插槽
多个slot使用name属性区分名字
template配合v-slot:名字（或#名字）来区分对应标签
5.3、作用域插槽
作用域插槽使用步骤？
（1）给 slot 标签, 以 添加属性的方式传值
（2）所有属性都会被收集到一个对象中
（3）template中, 通过 ` #插槽名= "obj" ` 接收，或者具体的变量比如 ` #插槽名= "{row, msg}" `
三、路由router
1、使用路由步骤
VueRouter 的 使用 (5 + 2)
①下载：下载VueRouter模块到当前工程，版本3.×.×
yarn add vue-router@3.6.5②③④⑤
import VueRouter from 'vue-router'//2.引入
Vue.user(VueRouter)//3.安装注册
const router = new VueRouter()//4.创建路由对象new Vue({render: h => h(App),router //5.注入，将路由对象注入到new Vue实例中，建立关联
}).$mount('#app')⑥创建需要的组件（views目录下），在main.js中配置路由规则
import MyFriend from './views/MyFriend.vue'const router = new VueRouter({routes:[{path:'/myfriend',component:MyFriend}]
})⑦配置导航，配置路由出口（App.vue）
<template><div class="App"> <a href="#/myfriend">我的朋友们</a> <div><!-- 路由出口 → 匹配的组件所展示的位置 --><router-view></router-view></div> </div>
</template>界面呈现，点击我的朋友们后
注意：views和components文件夹的区别？
范围大的组件放在views，具体组件放在components