Vue快速笔记

---

xxx.vue文件结构

主要由<template>、<script>、<style>三大标签构成：<template>中包含<div>，<div>中定义组件；<script>定义javascript，推荐vue.js；<style>定义样式，推荐每个vue文件中定义自己的样式：<style scoped>。

• <template>
  定义组件：

Radio单选框 el-radio
Checkbox复选框 el-checkbox
Input输入框 el-input
InputNumber计数器 el-input-number
Select选择器 el-select
Cascader级联选择器 el-cascader
Switch开关 el-switch
Slider滑块 el-slider
TimePicker时间选择器 el-time-select
DatePicker日期选择器 el-date-picker
DateTimePicker日期时间选择器 el-date-picker
Upload上传 el-upload
rate评分 el-rate
ColorPicker颜色选择器 el-color-picker
Transfer穿梭框 el-transfer
Form表单 el-form
……….
具体地址：https://element.eleme.cn/#/zh-CN/component

• <script>
  定义Vue.js：

属性data、计算属性computed、方法method、过滤器filters、属性监听watch、components、组件混入mixins等
生命周期：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
……….
具体地址：https://cn.vuejs.org/v2/api/

• <style>
  定义样式
  </style>

Vue.js基础知识

• 插值
  {{}}：输出数据（可属性可方法）
  v-html：输出html文本（<div v-html="message"></div>）message: '<h1>菜鸟教程</h1>'
  v-bind：设置html属性（<div v-bind:class="{'class1': use}”>）如果use为true则使用class1样式
  v-if：条件判断（<p v-if="seen">现在你看到我了</p>）如果seen为true则生成代码
  v-show：条件判断（<p v-if="seen">现在你看到我了</p>）如果seen为true则显示（代码已生成）
  v-model：数据双向绑定（<input v-model="message”>）控件值与属性值互相影响
  v-on：事件监听（<a v-on:click="doSomething”>）doSomething为具体响应方法
  文本格式化：需要用到过滤器filters

<!-- 在两个大括号中 -->
{{ message | capitalize }}
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

v-bind缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写：

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

• 条件语句

<div v-if="type === 'A'">
    A
</div>
<div v-else-if="type === 'B'">
    B
</div>
<div v-else-if="type === 'C'">
    C
 </div>
 <div v-else>
    Not A/B/C
 </div>

• for循环

<li v-for="site in sites">
    {{ site.name }}
</li>
<li v-for="(value, key) in object">
    {{ key }} : {{ value }}
</li>
<li v-for="(value, key, index) in object">
    {{ index }}. {{ key }} : {{ value }}
</li>

• 计算属性

<div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
computed: {
    // 计算属性的 getter
    reversedMessage() {
    // `this` 指向 vm 实例
    return this.message.split('').reverse().join('')
}

computed有缓存，methods每次都需要重新调用

• 监听属性
  监听某个属性值，发生变化时做出响应

watch : {
    kilometers(val) {
        this.kilometers = val;
        this.meters = this.kilometers * 1000
    },
}

属性kilometers值发生变化时调用，val为kilometers的值

• class属性绑定

单个样式：
<div v-bind:class="{ 'active': isActive }"></div>
多个样式（相同属性则后者会覆盖前者）：
<div class="static"
     v-bind:class="{ 'active' : isActive, 'text-danger' : hasError }">
</div>

• 组件
  引用组件后可当做标签来使用

<UdTabHead>xxxx</UdTabHead>
import {UdTabHead} from ‘udesk-vue’
export default{
    components: {UdTabHead}
};

• 组件传值
  核心：自定义属性prop、自定义事件

父组件传值子组件：
类似于对象属性，直接属性赋值

父：
<div id="app">
    <child :message="hello!"></child>
</div>

子：
<script>
  // 声明 props
  props: ['message'],
  // 同样也可以在 vm 实例中像 "this.message" 这样使用
  template: '<span>{{ message }}</span>'
</script>

子组件传值父组件：
类似于回调，由父亲实现孩子方法

父：
<div id="app">
    <child @getMessage="sendMessage"></child>
</div>

子：
<script>
methods: {
    incrementHandler () {
      this.$emit("getMessage","hello!")
    }
  },
</script>

• 动画

<button v-on:click = "show = !show">点我</button>
<transition name = "fade">
    <p v-show = "show" v-bind:style = "styleobj">动画实例</p>
</transition>
<style>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.fade-enter-active, .fade-leave-active {
    transition: opacity 2s
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
    opacity: 0
}
</style>

• 混入
  混入对象可以包含任意组件选项（方法、属性等）

var mixin = {
    created: function () {
        document.write('混入调用' + '<br>')
    }
}
export default{
    mixins: [mixin],
};

相同的函数名时，vue优先级高

• Ajax
  axios：

axios.post('/try/ajax/ajax_info.txt').then(res => {
    console.log(res);
  }).catch(error => {
    console.log(error);
  });

vue-resource：

this.$http.post('/try/ajax/ajax_info.txt').then(res => {
    document.write(res.body);    
},function(){
    console.log('请求失败处理');
});

• 定时器

setTimeout(() => {
    xxxxxx
}, 1.5 * 1000)

• export和export default

export：
A文件：

import  xxx from B
xxx.funcA() or xxx.funcB()

B文件：

export default const str = ‘haha’
或者
export default {
    funcA () {
        xxx
    }
    funcB () {
        xxx
    }
}

---

export default：
A文件：

import  {str, funcA,funcB } from B

B文件：

export const str = ‘haha’
export funcA () {
    xxx
}
export funcB () {
    xxx
}