vue项目基础用法教程（一）

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 指令式渲染：

1. v-html，v-text 采用{{}}语法==>插值运算
2. v-html：它可以加标签，它会解析成html
3. 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}}

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>

路由跳转

1. 声明式

: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()
    }
  }
}