1. 什么是Vue.js?
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2.安装n
安装vue-cli3 & node环境
全局安装
npm install -g @vue/cli
查看vue版本
vue -V
创建项目
vue create my-project
配置参考
进入项目
cd my-project
运行
npm run serve
3. Vue基本
基础vue文件
<template>
<div class="container">
{{ title }}
</div>
</template>
<script>
import '';
import xx from '';
export default {
name: 'test',
// 父组件传值
props: { // 入参
title: {
type: String,
required: true,
},
dataArr: {
type: Array,
required: false,
default() {
return [];
},
}
},
data(){
return {
// 数据
}
}
components:{
// 组件注册
},
beforeCreate(){
// 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
},
create(){
// 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
},
beforeMount(){
// 在挂载开始之前被调用：相关的 render 函数首次被调用。
},
mounted(){
// el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
},
beforeUpdate(){
// 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
},
updated(){
// 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
// 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环
},
beforeDestroy(){
// 实例销毁之前调用。在这一步，实例仍然完全可用。
},
destroyed(){
// Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
},
computed:{
// 计算属性
},
watch:{
// 数据监听
},
methods:{
// 方法定义
}
}
</script>
<style scoped>
@import "";
</style>
3.1 Vue的渲染方法
3.1.1 指令式渲染：
- v-html，v-text 采用{{}}语法==>插值运算
- v-html：它可以加标签，它会解析成html
- v-text：不能加标签，如果加了，它会当作字符串展示出来
3.1.2 插值表达式：
{{ data中的数据 }}
3.1.2 插值表达式：
{{ data中的数据 }}
3.1.3 v-html 与 v-text的区别：
v-html会解析html格式
v-text与插值表达式会把内容当做文本来解析
v-html 和 v-text都会覆盖元素中原有的内容
3.1.4 v-cloak 解决插值表达式闪烁的问题
并在css中设置：
[v-cloak]{ display: none; }
让所有设置 v-cloak 的元素隐藏，当加载完毕之后，元素身上的 v-cloak 就会消失。
3.1.5 条件指令 v-if 和 v-show
共同点：都是动态显示DOM元素
不同点：
v-if 是动态的向DOM树内添加或删除DOM元素，适用于运营条件不大可能改变。
v-show 是通过设置DOM元素的display实现控制显隐的，适合频繁切换。
3.1.6 循环指令 v-for
注意事项：key属性只能使用 number 或string，且是惟一的；key在使用的时候，必须使用 v-bind 属性绑定的形式，指定key的值
遍历数组 (item,index) in 数组名
遍历对象 (value,key) in 对象名，value是属性值，key是属性
3.1.7 动态属性 v-bind:class="a"
可以简写:class="a" ，v-bind可以省略
3.1.8 监听事件 v-on
v-on:click="事件名" 缩写@click="事件名
3.1.9 v-model 数据绑定
可以在表单中使用v-model实现数据双向绑定
{{value}} <input v-model="value" />
3.1.10 事件修饰符
v-on 事件修饰符
.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件监听器时使用事件捕获模式
.self 只当事件在该元素本身（比如不是子元素）触发是触发回调
.once 事件值触发一次
常用的生命周期函数
//在创建对象之前,监控数据变化和初始化事件之前调用
beforeCreate() {
console.log('beforeCreate 钩子执行...')
console.log(this.number) //数据监测还没有开始
},
//实例创建完成之后调用,挂载阶段还没有开始
// 数据初始化调取接口
created() {
console.log('cteated 钩子执行...')
console.log(this.number)
},
//开始挂载的时候执行,这时html还没有渲染到页面上
beforeMount() {
console.log('beforeMount 钩子执行...')
console.log(this.number)
},
//挂载完成,也就是模板中的heml渲染到了页面中,此时可以做一些ajax的操作,这个钩子函数只会执行一次
// 初始化操作dom
mounted() {
console.log('mounted 钩子执行...')
console.log(this.number)
},
//数据更新之前调用
beforeUpdate() {
console.log('beforeUpdate 钩子执行...')
console.log(this.number)
},
//数据更新之后调用
updated() {
console.log('updated 钩子执行...')
console.log(this.number)
},
//数据销毁之前
beforeDestroy() {
console.log('beforeDestroy 钩子执行...')
console.log(this.number)
},
//数据销毁之后
destroyed() {
console.log('destroyed 钩子执行...')
console.log(this.number)
} ,
// 被 keep-alive 缓存的组件会多两个生命周期activated、deactivated,
//每次进入都会执行，用于页面缓存，但需要刷新数据。
activated(){},
// 当离开组件时，停止使用时调用，可用于清除定时器。
deactivated(){}
filters过滤器
常用示例
template
<span>{{ status | statusFilter}}</span>
script
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger',
}
return statusMap[status]
},
},
watch监听
常用示例
template
<input type="text" v-model="value"/>
script
watch: {
cityName(newName, oldName) {
// ...
}
}
computed 监听/计算属性
常用示例
template
<span>{{ value }}</span>
script
data(){
return{
num1: 10,
num2: 20
}
},
computed: {
value() {
return this.num1 + this.num2;
}
}
Vue Router
基础用法
const routes = [
{ path: '/', component: () => import('@/views/xxx') },
{ path: '/home', component:() => import('@/views/xxxx') },
]
const router = new VueRouter({
base: '',
mode: 'hash',//路由模式，可选值为 history 或 hash
scrollBehavior: () => ({
y: 0,
}),
routes: routes,
})
export default router
路由出口
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
路由跳转
- 声明式
:to="" 可以实现绑定动态的 路由 和 参数
根据路由路径（/home）跳转 <router-link :to="{path: '/home', query:{id: 'abc'}}">点击查看子页面</router-link>
根据路由名称（detail）跳转 <router-link :to="{name: 'detail', params:{id: 'abc'}}">点击查看子页面</router-link>
2、编程式
this.$router.push({path: '/home',query:{id: 'abc'}})
this.$router.push({path: '/home',params:{id: 'abc'}})
params 和 query 传参的区别
1、params传参时，参数不会出现在url的路径上面，但是刷新页面时param里面的数据会消失
2、query传参时，参数出现在url的路径上面，刷新页面时query里面的数据不变
组件通信
1. 父组件向子组件传值
<!-父组件--->
<template>
<div>
<child :msg="msg"></child>
</div>
</template>
<script>
import child from './child'
export default {
components:{
child
}
data () {
return {
msg: '父组件的值'
}
}
}
<!-子组件--->
<template>
<div></div>
</template>
<script>
export default {
props:{
msg:{
type:String,
default:''
}
}
mounted(){
console.log(this.msg)
}
}
2. 父组件调用子组件方法
<!-父组件--->
<template>
<div>
<child ref="child" ></child>
</div>
</template>
<script>
import child from './child'
export default {
components:{
child
}
mounted(){
this.$refs.child.getData() // 调用
}
}
<!-子组件--->
<template>
<div></div>
</template>
<script>
export default {
methods:{
getData(){
console.log('父组件调用了我的方法')
}
}
}
3. 子传父值
<!-父组件--->
<template>
<div>
<child @func="getData"></child>
</div>
</template>
<script>
import child from './child'
export default {
components:{
child
}
mounted(){
getData(val){
console.log(val) //我是子组件的数据
}
}
}
<!-子组件--->
<template>
<div></div>
</template>
<script>
export default {
data(){
msg: "我是子组件的数据",
}
mounted(){
//func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
this.$emit('func', this.msg)
}
}
4. 父组件直接获取子组件里的data数据
<!-父组件--->
this.$ref.child.msg
5. 子组件调用父组件方法
<!-子组件--->
子组件直接通过this.$parent.event调用 //event为需要调用的父组件的事件
6. 子组件调用父组件方法2
子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了（与子组件向父组件传值（方法一）一致）
<!-父组件--->
<template>
<div>
<child @func="getData"></child>
</div>
</template>
<script>
import child from './child'
export default {
components:{
child
}
methods:(){
getData(){
///
}
}
}
</script>
<!-子组件--->
this.$emit('func')
7.子组件调用父组件
父组件把方法传入子组件中，在子组件里直接调用这个方法
<!-父组件--->
<template>
<div>
<child :getData="getData"></child>
</div>
</template>
<script>
import child from './child'
export default {
components:{
child
}
methods:{
getData(){
console.log('这是父组件的方法'）
}
}
}
<!-子组件--->
<template>
<div></div>
</template>
<script>
export default {
props:{
getData:{
type:Function,
default:null
}
}
mounted(){
if(this.getData){
this.getData()
}
}
}
