VUE使用总结

时间 2019-11-21

标签 vue 使用总结繁體版

原文原文链接

新创建的了一个交流群，欢迎在工做的开发者，尤为是VUE和小程序的同志们 771402271html

很久没更新博客，确实是本身已经懒癌晚期，最近毕业刚工做3个月，公司开发一直在用Vue，本身我的也比较喜欢这个框架，今天就对本身学习到和用到的知识点做一些总结，但愿能帮到你们。前端

Vuevue

　　知道Vue也必定据说过react 和 angular ，相对于这两个框架来讲，Vue很轻量，打包后体积只有20K+，同时学习起来也比较简单，Vue借鉴了两个框架的不少优势。固然框架没有说最好，只有最适合，建议多学习尝试。react

　　众所周知Vue是一个MVVM框架，这里的MVVM指的仅仅是前端，和后端无关。在MVVM框架中，视图和数据不能直接通讯，而是经过中间人ViewModel，ViewModel它能够监听到数据的变化，而后通知视图作更新。同时它也能够监听到视图在改变，使数据改变。咱们看下面的例子就大概懂了。小程序

举例：后端

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        // 这是咱们的View 视图

　　　　<div id="app"> 
　　　　　<p>{{ message }}</p> 
　　　　 <input type="text" v-model="message"/> //输入框，绑定了数据message
　 </div>

    </body>
    <script src="js/vue.js"></script>   // 引入vue 自行下载
    <script>
        //  这是咱们的Model 
        var obj = { message: 'Hello World!' } // 声明一个 Vue 实例 ，即 "ViewModel"，实例中传入一个对象，用来链接 View 与 Model new Vue( el: '#app', // 将id为app的dom节点放进来，即创建了与视图view的链接。 data: obj　　　　// 将obj放入到实例的data属性中, 此时创建与数据model的链接。

 　　　　})
    // 这样就能够同时监听view和model了， 当更改message的时候，view会自动改变，同时当咱们更改文本框的值的时候，会发现P标签里的值也在同时改变，这个时候就是view被监听使model改变。 这就实现了数据的双向绑定。

 </script> 

</html>

经常使用语法缓存

# 文本插值app

// 绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
<span>Message: {{ msg }}</span> 
<span v-text="msg"></span>  // 也能够用指令的方式

#经常使用指令

指令 (Directives) 是带有 v- 前缀的特殊属性。其实就是一种命令，或者是规则。
框架

v-if v-else-if v-else: 知足某个条件的时候显示。dom

   <body>
        <div id="app">
            <h1 v-if="age > 50">Yes!</h1>  //当年龄大于50的时候才渲染这个标签
         　　<h1 v-else-if="age > 20 && age < 50">{{age}}</h1> // 当年龄大于20且小于50的时候渲染当前标签 　　　　　　 <h1 v-else>Yes!</h1> // 其余的状况渲染此标签 </div> </body> <script> var vm = new Vue({ el: '#app', data: { age: 80 } }) </script>

// v-if 可单独使用，也可和v-else-if v-else 一块儿使用，来控制不一样状况下的视图。

v-show：简单的切换 display:block 和 none, 和 v-if不一样。带有v-show的元素始终会被渲染

<h1 v-show="yes">Yes!</h1> // 若是yes为真就显示，为假就不显示

 var vm = new Vue({
            el: '#app',
            data: {
                yes: true
            }
        })

总结： v-show适用于两种状态的切换，v-if适用于条件判断。

v-for指令：用于循环

<div id="app">
<todo-item v-for="item in groceryList" >{{item.text }}</todo-item>
</div>

var app7 = new Vue({
    el: '#app',
    data: {
        groceryList: [
            { id: 0, text: '蔬菜' },
            { id: 1, text: '奶酪' },
            { id: 2, text: '随便其余什么人吃的东西' }
        ]
    }
   })

v-bind指令

v-bind指令能够在后面带一个参数，中间用冒号隔开，这个参数通常是HTML的属性，好比v-bind:class ,可缩写为:class，这个class和原来的class 并不冲突。

.show{
　　display: block;
}
<h1 class="center"  v-bind:class="yes ? show : off">Yes!</h1> // 若是yes为真就添加名为show的class，反之添加off

 var vm = new Vue({
            el: '#app',
            data: {
                yes: true
            }
        })

v-on指令

专门用于绑定事件的指令，用法和v-blind差很少，好比添加点击事件< a v-on:click="方法名 / 执行语句"> ，可直接缩写为@click，可直接绑定一个方法，也能够直接使用内联语句

#修饰符

修饰符修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀，指明一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件的时候阻止默认事件：

<form v-on:submit.prevent="onSubmit"></form>

#计算属性computed：在正常状况下，代码中能够直接进行简单的运算，可是若是太多就显得难以维护。而计算属性就是将这个逻辑提取出来，专门来维护。以下例子：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

<div id="example">
  <p>{{ message }}"</p>
 <p>{{ reversedMessage}}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

#方法methods：可实现和计算属性同样的功能

<div id="example">
  <p>{{ message }}"</p>
 <p>{{ reversedMessage}}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  methods: {
   reversedMessage: function () {
     return this.message.split('').reverse().join('')
   }
 }
})

方法和计算属性区别：

计算属性存在缓存，只有依赖的变量发现改变的时候才会从新求值，如上，只有message发生改变才会从新求值，而methods每次渲染都会从新执行。因此要根据业务来选择。

#观察watch

只有一个一个监听数据，只要这个数据发生变化，就会在返回两个参数，第一个是当前的值，第二个是变化前的值，每当变化的时候，则会触发函数体的里的逻辑行为，来进逻辑后续操做

watch: {   监听message的变化，若改变执行如下语句
    message(new,old) {
        //要执行的语句
    }
}

#过滤器

过滤器在开发中会常常用到，好比咱们要显示一个日期，可是后端给咱们的数据是像这样的3463782000时间戳，咱们就必须作如下转换。例如：

{{ message | date}}  // date在这里就是个过滤器。实际上就是一个函数，函数的第一个参数就是 | 前面的message，也就是说message会被当作参数传入到date函数中进行处理，返回的结果就是最终显示的结果，注意过滤器函数都必须有返回值。

new Vue({
  filters: {
   　　 date: function (date, fmt) {
      　　if (!date) {
        　　return 'timestamp can not be null or undefined';
      　　}
    　　date = new Date(date);
    　　if (isNaN(date.getFullYear())) {
        　　return 'dateError';
    　　}
    　　if (/(y+)/.test(fmt)) {
        　　fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    　　}
    　　const o = {
        　　'M+': date.getMonth() + 1,
        　　'd+': date.getDate(),
        　　'h+': date.getHours(),
        　　'm+': date.getMinutes(),
        　　's+': date.getSeconds()
   　　 };
    　　for (const k in o) {
        　　if (new RegExp(`(${k})`).test(fmt)) {
            　　const str = o[k] + '';
            　　fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
        　　}
    　　}
    　　return fmt;
    }
  }
})

// 过滤器也能够串联.如 {{message | filterA | filterB}} message会当作参数传给filterA，处理完返回的结果又会当作参数传入filterB，处理完返回的就是最终结果了

 过滤器分全局和局部。全局就是整个项目均可以用到，具体自行百度。

#混合mixins：

咱们知道vue实例中会传入一个对象，里面有方法，计算属性等，假若有两个vue实例，他们有不少公用的东西，那么就能够用到混合了，混合能够当作一个Vue实例，同时它又能够和任何一个

对象进行组合。以下： am 和 vm 都须要使用方法foo,这个时候就能够声明一个混合来复用。

var mixin = {  // 声明一个混合
  methods: {
    foo: function () {
      console.log('foo')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],   // 引用混合
  methods: {
    bar: function () {
      console.log('bar')
    }
  }
})

var am = new Vue({
  mixins: [mixin],
  methods: {
    conflicting: function () {
      console.log('from self')
    }
  }
})

#给一个对象注册一个不存在的属性

假如咱们须要监听对象下某个不存在的属性，那么咱们能够经过set去建立。

全局注册： vue.set(item, 'checked', true) item.checked = true

局部注册： this.$set(item, 'checked', true)

#组件之间的通讯

组件的基础就暂且不说了，看官方也能懂，直接说下通讯，组件之间，有时候须要传递数据或者数据的状态，好比我这边点了按钮，须要父组件获得而且作出必定的改变。因此组件之间须要通讯。

这个时候就分三种状况：父组件传递消息给子组件，子组件传递消息给父组件，兄弟组件之间通讯

1 父组件传递数据给子组件：props

父组件
<child message="hello!"></child>  // 子组件在父组件内被调用，message是来自于父组件的数据，直接以属性的形式传递

子组件 须要声明props属性来接收数据，数据能够和data里的数据同样使用
Vue.component('child', {
  // 声明 props
  props: ['message'], })

2 子组件传递信息给父组件：例：当点击按钮时，通知父组件

父组件

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>   // 子组件调用被监听派发出的时间increment,监听到后调用incrementTotal方法
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {  //若传递过来有数据，能够直接接收incrementTotal(value)
      this.total += 1
    }
  }
})

子组件：
Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { incrementCounter: function () { this.counter += 1 this.$emit('increment') // 派发事件increment，第二个参数能够是想传递的数据 好比 this.$emit('increment', 1) } }, })

注意： 在子组件中不要直接更改props的值，不推荐也不支持，想要用能够直接赋值给一个变量，或者用计算属性，若是须要改变父组件这个值怎么办呢，就能够利用watch监听传来的props数据，而后把这个数据赋给一个变量，
这样咱们就能够操做这个变量，再$emit派发事件把想要改变的数据传给父组件，父组件再监听。

3 兄弟组件通讯

var bus = new Vue()  声明Vue实例

bus.$emit('id-selected', 1)   // 派发事件和数据

bus.$on('id-selected', function (id) {  // 监听事件，并在回调函数中，接受传来的数据。
  // ...
})

先说到这里。。。。。