Vue基础篇

生命周期

补充代待定….

选项数据

mounted(){}

<!-- ref 主要是获取dom  -->
<div ref="head" id="head"></div>

export default {
    data() {
      return {}
    },
    // DOM已生成
    mounted() {
      // DOM 操作，this.$refs.head.样式属性 = ‘样式值’
      this.$refs.head.innerHTML = '虚拟Dom操作';
    }
  }

data (){}

全局变量的定义—变量组件

<!--  模板  -->
<div>{{msg}}</div>

export default {
    // 全局变量的定义---变量组件
    date() {
        return {
            // 数据绑定
            msg: 'helloword Vue',
        }
    }
}

computed:{}

全局函数的定义—函数组件

<!--  模板  -->
<div>computed:{{aDouble}}</div>

// 全局函数的定义---函数组件
computed: {
    aDouble() {
         return this.num * 2;
     }
 }

methods:{}

全局事件的定义—事件组件

<!--  模板  -->
<div @click="say("我是事件")">点击我弹出</div>

// 全局事件的定义---事件组件
methods: {
    say(h) {
        alert(h);
    }
}

filters:{}

全局事件的定义—过滤器组件

<!--  过滤器  -->
<div>{{ message || capitalized }}</div>

filters: {
    capitalized(){
        return 123;
    }
}

模板语法

• data
• 模板中直接嵌入JS代码
• 指令 v-html v-on v-bind
• 计算属性
• 过滤器

<!--  v-html 指令,生成子元素  -->
<div v-html="rawhtml"></div>

<!--  v-bind  动态的绑定指令 -->
<div v-bind:class="obj">修改颜色</div>

<!--  模板-绑定事件  -->
<div @click="change">修改颜色</div>

export default {
    // 全局变量的定义---变量组件
    date() {
        return {
            // 模板与数据绑定
            msg: "模板与数据绑定",
            rawhtml: "<span>v-html 指令</span>",
            // 定义变量原始值
            obj: 'pink active',
        }
    },
    // 全局函数的定义---函数组件
    computed: {
        
    },
    // 全局事件的定义---事件组件
    methods: {
        // 点击当前变量，动态改变 为blue
        change() {
            this.obj = 'blue';
        }
    }
}

计算属性

在模板中放入太多的逻辑会让模板过重且难以维护

计算属性下所有函数可以放到computed 中

<div> 计算属性</div>
<div>{{msg}}</div>

export default {
    data(){
        return{
            msg:"helloworld", // 反向输出
        }
    },
    computed:{
        // 颠倒字符串函数
        reverseMessage(){
            return this.msg.split('').reverse().join('');
        }
    }
}

class与style动态绑定

v-bind指令

动态的绑定一个或多个特性

缩写 “ : ”

原始写法 v-bind：class 缩写写法：class

class绑定方法

第一种绑定方式：{ “active”：isActive, “ text-danger” : hansError }

第二种绑定方式：classObject

第三种绑定方式：[ activeClass , errorClass ]

<div>style和class 绑定方式</div>
<!-- 第一种方式-->
<div v-bind:class="{'active' : isActive, 'text-danger': hansError}">class绑定</div>
<!-- 第二种方式-->
<div v-bind:class="classObject">class绑定</div>
<!-- 第三种方式-->
<div v-bind:class="['active','text-danger']">class绑定</div>

export default {
      data() {
          return {
              // 第一种方式
              isActive: true,   // 添加class
              hansError: false, // 去掉class

              // 第二种方式
              classObject: {
                  "active": true,
                  "text-danger": false,
              },

              // 第三种方式
              activeClass: 'active',
              errorClass: 'text-danger'

          }
      }
  }

style绑定方法

绑定1：{ “color”：activeColor , “fontSize” : “16px” }

绑定2：styleObject

绑定3：[ basestyle , overridingstyles ]

<!-- 第一种方式-->
<div v-bind:style="{'color': activeColor,'fontSize': fontSize + 'px'}"> style第一种方式</div>
<!-- 第二种方式-->
<div v-bind:style="styleObject">style第二种方式</div>
<!-- 第三种方式-->
<div v-bind:style="[baseStyle,overridingStyle]">style第三种方式</div>

export default {
      data() {
          return {
              // style 第一种方式
              activeColor: 'black',
              fontSize: 30,
              
              // style 第二种方式
              styleObject: {
                  'color': 'activeColor',
                  "fontSize": "43px"
              },
              
              // style 第三种方式
              baseStyle:{
                  color:'red',
                  fontSize:'53px',
              }
          }
      }
  }

条件渲染

• v-if 指令
• v-if v-else
• v-if v-else-if v-else

<!-- 单个元素判断  -->
<div v-if="ok">yes</div>

<!-- if else判断 -->
<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>

<!-- 显示隐藏  -->
<div v-show="isShow">显示隐藏</div>

export default {
    data() {
        return {
            //  true 显示 绑定的模板标签
            ok: {true},
            type: "A",  // 输出 A
            isShow : false, // 隐藏，true 显示

        }
    },
}

列表渲染

• v-for指令
• 用法1：v-for = “ item in items” 数组
• 用法2：v-for = “ ( item, index ) in items “ 数组
• 用法3：v-for = “ ( value , key) in object “ 对象

<ul id="example-1">
    <!--
        in = for循环
        items = 变量，要遍历的数据
     -->
    <li v-for="item in items">
        {{ item.message }}
    </li>
</ul>

<ul id="example-2">
    <!--
        in  = for循环
        items   = 变量，要遍历的数据
        index   = 数组的下标
     -->
    <li v-for="(item,index) in item">
        {{ index }} - {{ item.message }}
        <!--
         输出页面
            0 - foo
            1 - Bar
            2 - AA
         -->
    </li>
</ul>


<ul id="example-3">
    <!--
        in  = for循环
        items   = 变量，要遍历的数据
        index   = 数组的下标
     -->
    <li v-for="(value,key) in obj">
        {{ key }} : {{ value }}
        <!--
            key  =  firstName   value  =  John
            key  =  lastName    value  =  Doe
          -->
    </li>
</ul>

export default {
    data() {
        return {
            // 第一种写法，第二种写法 列表渲染
            item: [
                {message: 'foo'},
                {message: 'Bar'},
                {message: 'AA'},
            ],
            // 第三种写法,对象渲染
            obj: {
                firstName: 'John',
                lastName: 'Doe',
                age: 30,
            }
        }
    },

}

事件处理器

• v-on指令
• 缩写
• 原是写法 v-on：click 缩写 @click
• 事件修饰符

<div>1. v-on:click="名称"————————简单———————</div>
<div id="example-1">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{counter}} </p>
</div>

<div>2. @click="方法名称"——————————推荐—————</div>
<div id="example-2">
  <!-- greet 是在下面定义的方法名  -->
  <button v-on:click="greet">Greet</button>
</div>

<div>3. @click="方法名称(参数)"——————————————</div>

<div id="example-3">
  <!-- greet 是在下面定义的方法名  -->
  <button v-on:click="say('嗨，你好!')">say</button>
</div>
<br>

<div>4. @click.stop="方法名称"——————————————</div>
<div id="example-4">
  <div @click="dothis2">
      <button @click.stop="dothis">阻止事件冒泡</button>
  </div>
</div>

export default {
   // 全局变量的定义---变量组件
  data() {
    return {
      counter: 1,
    }
  },
  // 全局事件的定义---事件组件
  methods: {
    // 操作方法
    greet() {
      this.counter = this.counter + 1;
   // this.counter = this.counter - 1;
   // this.counter = this.counter * 1;
   // this.counter = this.counter / 1;
    },
 	   // 弹出方法，调用say 名就好了
    say(h) {
      alert(h)
    },
    // 弹出方法
    dothis2() {
        alert('dothis2')
    },
    // 弹出方法
    dothis(){
      alert('dothis')
    }
  }
}

表单控件绑定

• v-model 指令在表单控件元素上创建双向数据绑定
• 复选框
• 多个勾选框
• 选择列表

<div><h1>表单控件绑定 v-model指令</h1></div>
   
<input v-model="messages" placeholder="edit me">
<p>Messages is: {{messages}}</p>
<hr>

 <p>表单绑定------->>数组,并把vue 追加到数组中，显示在模版中</p>
 Jack：<input type="checkbox" value="Jack" v-model="checkedNames">
 Boy： <input type="checkbox" value="Boy"  v-model="checkedNames">
 Ket： <input type="checkbox" value="Ket"  v-model="checkedNames">
<br>
<span>Check names: {{checkedNames}}</span>

<!-- 选择列表 -->
<div>
  <select v-model="selected" >
      <!--    disabled 默认选择状态   -->
      <!--    option 必须去掉value 不然报错   -->
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
      <option>F</option>
  </select>
  <span>Selected: {{selected}}</span>
</div>

export default {
    data(){
      return {
         messages: '表单控件绑定',
     	   // 复选框选择一个，则把元素传入到checkedNames 数组中，多个则，往后追加
        checkedNames:[],
        // 存储，模版中获取的 option的值
        selected:'',
      }
    }
}

自定义组件

• 组件写到components 文件夹下
• 自定义一个倒计时组件
• 组件基本要素：props $emmit 等
• 通过import 导入自定义组件

<!-- 创建自定义定时器组件 -->


<template>
  <!-- 传入值必须是对象-->
  <p :style="{color : col}">{{time}}</p>
</template>
<script>
  export default {
    data() {
      return {
        // 定义变量time 等于 10
        time: 10
      }
    },
    // 全局函数组件
    mounted() {
      // 创建变量 vm
      var vm = this;
      // t 定时器，每1秒执行一次
      var t = setInterval(function () {
        //  当前的time 每次执行调用 -1
        vm.time--;
        // 判断 time == 0
        if (vm.time == 0) {
          // 定时器结束前，会触发end事件
          vm.$emit('end');
          // 清除定时器
          clearInterval(t);
        }
      }, 1000)
    },
 
    // 接受传过来的属性值
    props: {
      col: {
        // 传入的值，必须是字符串
        type: String,
     	   // 定义默认颜色
        default: '#000',
      }
    }
  }
</script>

// 引入组件
import countdown from '@/components/countdown.vue'

// end 触发事件函数
methods: {
    ending() {
      alert('已经结束了！');
    }
}

// 注册组件
  components: {
    'count-down': countdown
}

// 使用组件，通过标签方式

// count-down, 自定义的标签名称，可以在注册组件，修改名称
// col="blue", 传入自定义值（颜色值）
// @end="ending", 自定义end事件，触发时，执行ending函数脚本
<count-down col="blue" @end="ending"></count-down>

自定义组件，重要的是自定义一些事件，以及传参。。。

DOM操作

• Vue 中操作 DOM
• this.$refs

<div ref="head" id="head"></div>

export default {
  data() {
    return {}
  },
  // DOM操作的模版
  mounted() {
    // DOM已生成
    this.$refs.head.innerHTML = '虚拟Dom操作';
  }
}

过渡效果