Vue学习记录（1）

Vue

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。

Vue 只关注视图层， 采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件

目录结构

主要解释src比较常用的目录
1.assets：资源文件夹，图片等
2.components:组件文件夹，通过.vue文件写的组件
3.router：路由文件夹
4.store:vuex,vue状态管理文件夹
5.views：主页面文件夹，通过.vue文件写的页面，组件一般渲染在主页面的
6.App.vue:挂载的最顶层文件，所有的主页文件都是作为组件插在这个文件上面
7.main.ts:vue实例挂载文件，

模板语法

1.插值
数据绑定：最常见的形式就是使用 {{…}}（双大括号）的文本插值

<div class="icon-file-text"> <span class="comment">{{!detailitem.commentlen ? 66 : detailitem.commentlen}}</span> </div>
<p>{{detailitem.name}}</p>
//三元运算也可使用
//表达式

2.属性
HTML 属性中的值应使用 v-bind 指令。

<div v-bind:class="{'class1': use}">
<a :href="url"></a>//缩写  没有：后面的值不会被解析为变量  而为字符串

3.指令
指令是带有 v- 前缀的特殊属性。
指令用于在表达式的值改变时，将某些行为应用到 DOM 上

 <input v-model="message">//用户输入的数据绑定
<div v-if="model" class="editViews">
<li v-for="site in sites">
      {{ site.name }}
</li>

4.事件

<a v-on:click="doSomething"></a>
<img src="../../assets/bilibili.png" alt="" @click="$router.push('/')">//缩写

计算属性

对data中的数据进行处理，处理一些复杂的逻辑

<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

监听属性

vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});

表单

可以用 v-model 指令在表单控件元素上创建双向数据绑定。

<input v-model="message" placeholder="编辑我……">
data: {
    message: 'Runoob',
    message2: '菜鸟教程\r\nhttp://www.runoob.com'
  }

组件

组件可以扩展 HTML 元素，封装可重用的代码。
父子传值
prop 是子组件用来接受父组件传递过来的数据的一个自定义属性。
1.父传子
子组件通过 this.$emit(‘inputChange’,this.content)
父组件通过@inputChange=“res => model.username = res”> 可以定义函数参数接受值
2.子传父
子组件通过:label=“label” 和 props:[‘label’,‘type’,‘placeholder’,‘rule’],
父组件通过label=“账号”

子组件

<template>
  <div>
    <van-field
      :label="label"
      :type="type"
      :placeholder="placeholder"
      :rule="rule"
      v-model="content"
    />
  </div>
</template>


export default {
    data(){
      return {
        content:''
      }
    },
    props:['label','type','placeholder','rule'],
    methods:{
      handlerulg(){
        const rue = new RegExp(this.rule)
        if (rue.test(this.content)){
          this.$emit('inputChange',this.content)
        }
      }
    },
    watch:{
      content(){
        this.handlerulg()
      }
    }
  }

父组件

<login-text
      label="账号"
      style="margin: 4vw 0"
      placeholder="请输入账号"
      rule="^.{6,16}"
      @inputChange="res => model.username = res">
    </login-text>


  import LoginText from  '../components/common/LoginText'
 
 components:{
      LoginTop,
      LoginText,
      LoginBtn
    },

data必须是个函数，如果是对象的话，实例间会相互影响

自定义指令

Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
<input v-focus>

路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。
分为两种方式：hash和history
一般使用hash方式
普通实例

<router-link to="home">Home</router-link>

cli实例

Vue.use(VueRouter)

const routes = [
  {
    path:'/edit',
    component:Edit,
  },
  {
    path:'/',
    component:Home,
  },
]

const router = new VueRouter({
  routes
})

export default router


import router from './router'//在main.js中引入
//一些插件也需要在此文件中引入，否则不会起作用

过渡和动画

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

<transition name = "fade">
    <p v-show = "show" v-bind:style = "styleobj">动画实例</p>
</transition>
.fade-enter-active, .fade-leave-active {
    transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
    opacity: 0
}

过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

这部分我不常用

复用

混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

var vm = new Vue({
    el: '#databinding',
    data: {
    },
    methods : {
    },
});
// 定义一个混入对象
var myMixin = {
    created: function () {
        this.startmixin()
    },
    methods: {
        startmixin: function () {
            document.write("欢迎来到混入实例");
        }
    }
};
var Component = Vue.extend({
    mixins: [myMixin]
})
var component = new Component();

Axios

在main.js配置axios

// 导入axois
import axios from 'axios'
//配置请求根路径
axios.defaults.baseURL = 'http://112.74.99.5:3000/web/api'
axios.interceptors.request.use(config => {
  console.log(config)
  config.headers.Authorization = window.sessionStorage.getItem('token')
  //最后必须return
  return config
})
Vue.prototype.$http = axios


//使用
methods:{
      async registerSubmit(){
        let rulg = /^.{6,16}$/
        if(rulg.test(this.model.username)&&rulg.test(this.model.password)){
          const res =  await this.$http.post('/login',this.model)
          this.$msg.fail(res.data.msg)
          if(res.data.code == 301 || res.data.code == 302){
            return
          }
          window.sessionStorage.setItem('token',res.data.token)
          window.sessionStorage.setItem('id',res.data.id)
          setTimeout(() => {
            this.$router.push('/userinfo')
          },1000)
        }else{
          this.$msg.fail('格式不正确,请重新输入!')
        }
      }
    }
    //async await 处理异步
    //axios  返回的是promise对象  解决回调地狱
    //可以使用解构处理返回数据

以上使用的实例源码地址（简易b站vue项目）：
https://gitee.com/xing_ao/AndroidBlibli/blob/master/src/views/Login.vue