vue 的基础知识点

学习vue

在学习vue的过程中，动手做了个简单的个人博客网页，用到的技术：docker + springboot + vue

http://www.dhzi.com.cn/

认识：

一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

基础使用

前提：安装了node 环境、npm

安装创建项目

全局安装 vue-cli
    $ npm install --global vue-cli
    # 创建一个基于 webpack 模板的新项目
    $ vue init webpack demo
    # 安装依赖 
    $ npm install
    # 启动
    $ npm run dev 

常用指令

1、v-text

解释：更新元素的 textContent，将数据解析为纯文本

2、v-html

解释：更新元素的 innerHTML，将数据解析成html标签

3、v-bing

绑定属性，语法：v-bind:src=“image” ; 简写 :src=“”

4、v-on

绑定事件，@click=“function”

5、v-model

在表单元素上创建双向数据绑定

6、v-for

 <div v-for="(item, index) in essayList" :key="index" />
 {{item.id}}

7、v-if|v-show

v-if：根据表达式的值的真假条件，销毁或重建元素 v-if适合条件不大可能改变的场景
v-show：根据表达式之真假值，切换元素的 display CSS 属性，dom元素一直在 v-show适合频繁切换

2.x 版本中在一个元素上同时使用 v-if 和 v-for 时，v-for 会优先作用。

3.x 版本中 v-if 总是优先于 v-for 生效

watch监听

监听属性变化

**路由变化，刷新界面

//路由变化，调用方法
 watch:{
    $route:{
        handler(newVal,oldVal){
            this.id= newVal.params.id,
            this.getEssay()
        }
    }
  },

vue生命周期函数（两个常用的）：created() 和 mounted()的区别

1、 created()

可以调用methods中的方法执行，不能进行DOM操作。

**路由变化回到界面顶部

  created() {
     this.$router.afterEach((to,from,next)=>{
　　　　window,scrollTo(0,0)
　　})
  },

2、mounted()

组件已经被挂载到页面中，此时，可以进行DOM操作

组件 component

1、全局组件：main.js中

全局组件在所有的vue实例中都可以使用,注意：先注册组件，再初始化根实例。

import less from 'less'

//定义全局变量

Vue.use(less)
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
})

2、局部组件

是在某一个具体的vue实例中定义的，只能在这个vue实例中使用；在Vue实例中使用components对象创建组件，可以创建多个组件

*用法：在vue项目 src目录下 components 中创建.vue文件。在views文件中import

<template>
	<Card>
</template>

import Card from '@/components/card'
  export default {
    components: {
      Card
    },

组件传值

1、父组件传递子组件数据

方式：通过props属性来传递数据
注意：属性的值必须在组件中通过props属性显示指定，否则，不会生效

父：
<template>
  <card :essayList="essayList"/>
</template>
   data() {
      return {
        essayList:[], 
      };
    },
子：
  props:{
      essayList:{
        type:Array,
        default:()=>{
            return []
        }
      }
      
  },

2、 子组件传递父组件数据

方式：父组件给子组件传递一个函数，由子组件调用这个函数
说明：借助vue中的自定义事件
$emit()：触发事件

路由

1、路由懒加载

 {
          path: '/home',
          name: 'home',
          component:(resolve) =>require(['@/views/home'],resolve)
        },

2、路由跳转传参

 //.vue中
 methods: {
  getEssayDetail(bid){
        this.$router.push(`/essaydetail/${bid}`)
      },
 }
 //router中
   {
          path: '/essaydetail/:bid',
          name: 'essaydetail',
          component:(resolve) =>require(['@/views/essaydetail'],resolve)
        },

路由变更界面不刷新解决方案

  <router-view :key="$route.fullPath"></router-view>

我的个人博客： http://www.dhzi.com.cn/ "