VUE基本使用

2021-02-03 本文已影响0人安掌门dear

vue简介

vue.js的数据驱动视图是基于MVVM模型实现的
model 代表数据
view 代表视图模板
viewmodel 代表业务逻辑处理

数据驱动视图

基于MVVM模型实现的数据驱动视图解放了DOM操作
view与model处理分离，降低代码耦合度
双向绑定时的bug调试难度增大
大型项目的view与model过多，维护成本高

组件化开发

组件化开发，允许我们将网页功能封装为自定义HTML标签，复用书写自定义标签名即可
组件不仅可以封装结构，还可以封装样式与逻辑代码，大大提高了开发效率与可维护性

vue实例

vue实例是通过vue函数创建的对象，是使用vue功能的基础

el选项

用于选取一个DOM元素作为vue实例的挂载目标
只有挂载元素内部才会被vue进行处理，外部为普通HTML元素
代表MVVM中的view层

插值表达式

挂载元素可以使用vue.js的模板语法，模块中通过插值表达式为元素进行动态内容设置，写法为{{}}
插值表达式只能书写在标签内容区域，可以与其他内容混合
内部只能书写js表达式，不能书写语句

data选项

data中的数据可以通过vm.$data.数据或vm.数据访问
data中的数据为响应式数据，在发生改变时，视图会自动更新
data中存在数组时，索引操作与length操作无法自动更新视图，这时可以借助vue.set()方法替代操作

methods选项

用于存储需要在vue实例中使用的函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./lib/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <!-- 插值表达式 -->
      <li>内容展示: {{10 + 2 + 3}}</li>
      <li>{{title}}</li>
      <li>{{fn(list)}}</li>
    </ul>
  </div>
  <script>
    var vm = new Vue({
      //el绑定元素
      el: '#app',
      data: {
        title: '标题文本',
        list: 'a-b-c-d'
      },
      methods: {
        fn(value){
          return value.split('-').join('')
        }
      }
    });

    console.log(vm.$el); 
    console.log(vm.title)
    // var vm = new Vue({});
    // vm.$mount('#app')
  </script>
</body>
</html>

指令

指令本质就是html自定义属性

v-once

使元素内部的插值表达式只生效一次
```
<li v-once>{{title}}</li>
```

v-text

元素内容整体替换为指定纯文本数据
```
<li v-text="title"></li>
```

v-html

元素内容整体替换为指定的html文本

<li v-html="content"></li>
data: {
  content: '<h1>aaa</h1>'
},

v-bind 简写用：

v-bind用于动态绑定HTML属性
需要一次绑定多个属性，还可以绑定对象

class绑定

class是html属性，可以通过v-bind进行绑定，并且可以与class属性共存

<li :class="{b : isB,c : isC,'class-d' : true}"></li>
<li :class="['a',{b : isB},'c']"></li>
data: {
  isB : true,
  isC : true,
},

style绑定

style是html属性，可以通过v-bind进行绑定，并且可以和style属性共存
绑定样式的优先级大于固定样式

可以通过数组给标签设置多个样式

<p :style="styleObj">这是样式</p> 
data: {
  styleObj: {
    width: '100px',
    height: '100px',
    backgroundColor: 'red',
  }
}

v-for

用于遍历数据渲染结构，常用的数组与对象均可遍历

通过<template>标签设置模板占位符，可以将部分元素或内容作为整体进行操作

 <div id="app">
  <ul>
    <li v-for="(item, index) in itemList" :key="item.id">
      输入框{{ item.value }}: <input type="text">
    </li>
  </ul>
  <template v-for="item in obj">
    <span>{{ item }}</span>
    <br>
  </template>
</div>
<script src="lib/vue.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      arr: [1, 2, 3],
      itemList: [
        {
          id: 1,
          value: 2
        },
        {
          id: 2,
          value:3
        },
        {
          id:3,
          value:3
        }
      ],
      obj: {
        content1: '内容1',
        content2: '内容2',
        content3: '内容3'
      }
    }
  })
</script>

v-show

用于控制元素显示与隐藏，适用于显示隐藏频繁切换时使用
<template>无法使用v-show指令

v-if

用于根据条件控制元素的创建和移除

<div id="app">
  <p v-if="false">这个元素不会创建</p>
  <p v-else-if="true">这个元素会创建</p>
  <p v-else>这个元素不会创建</p>
</div>

事件处理

v-on 简写用@

用于进行元素的事件绑定
事件程序代码较多，可以在methods中设置函数，并设置为事件处理程序

在视图中可以通过$event访问事件对象

<div id="app">
  <p>{{content}}</p>
  <button v-on:click="content='这是点击内容'">点击</button>
  <button @click="fn">按钮</button>
  <button @click="fn($event)">按钮2</button>
</div>
<script>
  var vm = new Vue({
    //el绑定元素
    el: '#app',
    data: {
      content : '这是绑定的内容'
    },
    methods: {
      fn(event){
        this.content = "这是按钮3设置的内容"
        console.log(event)
      }
    }
  });
</script>

v-model

用于给<input>、<textarea>及<select>元素设置双向数据绑定

<div id="app">
  <p>元素双向绑定：{{value}}</p>
 <input type="text" v-model="value">
</div>
<script>
  var vm = new Vue({
    //el绑定元素
    el: '#app',
    data: {
     value: '',
    }
  });
</script>

单选按钮绑定

<div id="app">
    <p>radio的内容：{{value}}</p>
    <label for="one">选项一</label>
    <input type="radio" id="one" value="1" v-model="value">
    <label for="two">选项一</label>
    <input type="radio" id="two" value="2" v-model="value">
  </div>

修饰符

修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作

.prevent修饰符

用来阻止默认事件行为，相当于event.preventDefault()
```
<a @click.prevent href="https://kaiwu.lagou.com/">链接</a>
```

.stop修饰符

用于阻止事件传播，相当于event.stopPropagation()

<div @click="fn1">
  <!-- <button @click.stop="fn2">按钮</button> -->
  //只执行fn2，不会执行fn1
  <a @click.prevent.stop="fn2" href="https://kaiwu.lagou.com/">链接</a>
</div>

.once修饰符

用于设置事件只会触发一次

<button @click.once="fn">按钮2</button>

按键修饰符

按键码指的是将按键的按键码作为修饰符使用以标识按键的操作方式

单独点击系统操作符无效

<div id="app">
  <!-- <input type="text" @keyup="fn"> -->
  <!-- <input type="text" @keyup.49="fn"> -->  
  <!-- <input type="text" @keyup.esc="fn"> -->
  <input type="text" @keyup.a.b.c="fn">
</div>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {

    },
    methods: {
      fn (event) {
        console.log(event);
        console.log('输入了对应内容');
      }
    }
  });

v-model修饰符

.trim修饰符用于自动过滤用户输入内容首尾两端的空格
.lazy修饰符用于将v-model的触发方式由input事件触发更改为change事件触发
.number修饰符用于自动将用户输入的指转换为数值类型，如果无法被parseFloat()转换，则返回原始内容

自定义全局指令

指的是可以被任意vue实例或组件使用的指令

<input type="text" v-focus.a.b="100+1">
<script>
  // 自定义全局指令
  Vue.directive('focus', {
    inserted (el, binding) {
      // console.log(el);
      console.log(binding);
      el.focus();
    }
  });
</script>

自定义局部指令

只能在当前vue实例或组件内使用

<input type="text" v-focus>
// 自定义局部指令
new Vue({
  el: '#app',
  data: {},
  directives: {
    focus: {
      inserted (el) {
        el.focus();
      }
    }
  }
});

全局过滤器

全局过滤器可以在任意vue实例中使用

过滤器能在插值表达式和v-bind中使用，通过管道符|连接数据

<div id="app">
  <p :title="value | filterA">这是标签</p>
</div>
<script>
  //设置全局过滤器
  Vue.filter('filterA',function (value) {
    return value.split('-').join('')
  })
  var vm = new Vue({
    //el绑定元素
    el: '#app',
    data: {
     value: 'a-b-c',
     value2: []
    }
  });

局部过滤器

局部过滤器只能在当前vue实例中使用

<div id="app">
  <p :title="value | filterA">这是标签1</p>
</div>
<script>
  var vm = new Vue({
    //el绑定元素
    el: '#app',
    //局部过滤器
    filters:{
      filterA: function (value) {
        return value.split('-').join('')
      }
    },
    data: {
     value: 'a-b-c',
    }
  });
</script>

计算属性

vue.js的视图不建议书写复杂逻辑，这样不利于维护
计算属性使用时为属性形式，访问时会自动执行对应函数

methods与computed区别

computed具有缓存性，methods没有
computed通过属性名访问，methods需要调用
computed仅使用于计算操作

计算属性的setter

计算属性默认只有getter,vue.js也允许给计算属性设置setter

<div id="app">
  <p>{{fullname}}</p>
</div>
<script>
  var vm = new Vue({
    //el绑定元素
    el: '#app',
    data: {
      firstName: '张',
      lastName: '三'
    },
    computed: {
      // fullname(){
      //   return this.firstName + this.lastName
      // }
      fullname: {
        get(){
          return this.firstName + this.lastName
        },
        set(newValue){
          // console.log(newValue)
          var nameArr = newValue.split(' ');
          this.firstName = nameArr[0];
          this.lastName = nameArr[1];
        }
      }
    }
  });

侦听器

侦听器用于监听数据变化并执行指定操作
为了监听对象内部值的变化，需要将watch书写为对象，并设置选项deep:true,这时通过handler设置处理函数
当更改数组和对象时，回调函数中的新值与旧值相同，因为它们的引用都指向同一个数组、对象

数组操作不要使用索引与length,无法触发侦听器函数

<div id="app">
  <input type="text" v-model="value">
  <p>{{value}}</p>
</div>
<script>
  var vm = new Vue({
    //el绑定元素
    el: '#app',
    data: {
      value:'',
    },
    watch: {
      value(){
        console.log('执行了侦听器')
      }
    }
  });
</script>

vue DevTools

Vue.js官方提供的用来调试Vue应用的工具
网页必须应用了Vue.js功能才能看到Vue DevTools
网页必须使用Vue.js而不是Vue.min.js
网页需要在http协议下打开，而不是使用file协议本地打开

生命周期

通过设置生命周期函数，可以在生命周期的特定阶段执行功能
初始化阶段
- beforeCreate: 实例初始化之前调用
- created：实例创建后调用
- beforeMount: 实例挂载之前调用
- mounted：实例挂载完毕
运行阶段
- beforeUpdate: 数据更新后，视图更新前调用
- updated: 视图更新后调用
销毁阶段
- beforeDestroy: 实例销毁之前调用
- destroyed: 实例销毁后调用