js壹些标题和沉思学习笔记,满意多数急需的为主采取

By admin in 4858美高梅 on 2019年4月6日

前言

正文不是Vue.js的教程,只是单向看官网Vue的学科文书档案一边记录并总括学习进度中遇见的一部分题材和商量的笔记

js壹些标题和沉思学习笔记,满意多数急需的为主采取。前言

正文不是Vue.js的课程,只是单向看官网Vue的课程文书档案壹边记录并总括学习进度中相遇的片段题材和思想的笔记

前言

第贰创立多少个简易的vue应用

# 全局安装 vue-cli
$ npm i -g vue-cli
# 创建一个简单的vue仓库
$ vue init webpack-simple learnvue
# 安装依赖
$ cd learnvue
$ npm i
$ npm run dev

1、vue和avalon1样,都不帮忙VM初始时不存在的习性

而在Angular里是足以援助的,因为angular选拔脏检查的不2秘籍贯彻双向绑定,vue和avalon都是行使setter和getter实现双向绑定

例,如下代码在一秒后不会议及展览示出“xxcanghai”的字样

<div id="app">
   <h1>{{obj.text}}</h1>
</div>

<script>
   var v = new Vue({
       el: '#app',
       data: {
           obj:{}
       }
   });
   setTimeout(function(){
       v.obj.text="xxcanghai";//无效
   },1000);
</script>

若给定先河值,则可生效,如下:

<div id="app">
   <h1>{{obj.text}}</h1>
</div>

<script>
   var v = new Vue({
       el: '#app',
       data: {
           obj:{
               text:"default Text" //给定初始值
           }
       }
   });
   setTimeout(function(){
       v.obj.text="xxcanghai";//有效
   },1000);
</script>

可是Vue个中比avalon好的一点是,Vue在只是对先河化时不设有的特性赋值失效,但显得是不会报错的。而avalon则根本不大概呈现,对于上述第一段代码运转都会报错(不知晓最新的avalon是还是不是修改此难点)

幸好vue中提供了$set方法来解决那种赋值失利的标题,如下:

<div i<div id="app">
   <h1>{{obj.text}}</h1>
</div>

<script>
   var v = new Vue({
       el: '#app',
       data: {
           obj: {}
       }
   });
   setTimeout(function() {
       v.$set("obj.text", "xxcanghai");//有效
   }, 1000);
</script>

固然如此那种利用字符串来代表变量名的法子会导致不能够使用强类型的预编写翻译检查(TypeScript),但也至少算能一举成功难题吧。

壹、vue和avalon一样,都不帮衬VM初阶时不设有的习性

而在Angular里是能够支撑的,因为angular选择脏检查的方法达成双向绑定,vue和avalon都是行使setter和getter落成双向绑定

例,如下代码在1秒后不会来得出“xxcanghai”的字样

<div id="app">
   <h1>{{obj.text}}</h1>
</div>

<script>
   var v = new Vue({
       el: '#app',
       data: {
           obj:{}
       }
   });
   setTimeout(function(){
       v.obj.text="xxcanghai";//无效
   },1000);
</script>

若给定开始值,则可生效,如下:

<div id="app">
   <h1>{{obj.text}}</h1>
</div>

<script>
   var v = new Vue({
       el: '#app',
       data: {
           obj:{
               text:"default Text" //给定初始值
           }
       }
   });
   setTimeout(function(){
       v.obj.text="xxcanghai";//有效
   },1000);
</script>

可是Vue个中比avalon好的少数是,Vue在只是对开端化时不存在的天性赋值无效,但显示是不会报错的。而avalon则根本不可能显示,对于上述第三段代码运行都会报错(不知情最新的avalon是不是修改此题材)

幸好vue中提供了$set方法来化解这种赋值失利的题材,如下:

<div i<div id="app">
   <h1>{{obj.text}}</h1>
</div>

<script>
   var v = new Vue({
       el: '#app',
       data: {
           obj: {}
       }
   });
   setTimeout(function() {
       v.$set("obj.text", "xxcanghai");//有效
   }, 1000);
</script>

虽说那种使用字符串来表示变量名的点子会促成不能够运用强类型的预编写翻译检查(TypeScript),但也至少算能化解难点吗。

正文不是Vue.js的学科,只是1方面看官网Vue的学科文书档案壹边记录并总括学习进度中蒙受的有的题材和思虑的笔记。

class绑定——动态地切换class

  • 在:class上绑定三个指标
  • 在:class上绑定1个指标名
  • 在:class上绑定三个回去对象的乘除属性
  • 在:class上绑定多少个数组,数组语法中也能够动用对象语法
  • 新岁初中一年级表达式:遵照标准切换列表中的class

小心:普通class和绑定class可以共存

<template>
  <div id="app">
    {{msg}}
    <!--  1.在在:class上绑定一个对象  -->
    <div :class="{active:isActive}" class="header">
      我是header,我有一个普通class和一个可能存在的class对象
    </div>
    <div :class="{bigger:isBigger,'text-danger':hasError}" class="main">
      我是main,我有一个普通class和一个可能存在的class对象
    </div>

    <!--  在:class上绑定一个对象名  -->
    <div :class="classObj1">
      我是小字,我有背景色
    </div>

    <!-- 在:class上绑定一个返回对象的计算属性 -->
    <div :class="classObj2">
      我是大字,没有背景色
    </div>

    <!--在:class上绑定一个数组,可使用三元表达式,数组语法中也可以使用对象语法  -->
    <div :class="['text-danger',classObj1]">我始终是红色字,可能是大字也可能是小字,有或者没有绿色背景</div>
    <div :class="[classObj2,{'text-danger':hasError}]">我现在是大字且为红色,没有背景色</div>
    <div :class="[isActive? '' :'text-danger']">我是红字</div>

  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      isActive: 0,
      isBigger: '',
      hasError: true,
      classObj1: {
        active: !this.isActive,
        bigger: this.isBigger
      }
    }
  },
  computed: {
    classObj2() {
      return {
        active: this.isActive && this.hasError,
        bigger: !this.isBigger && this.hasError
      }
    }
  }
}
</script>

<style>
.active {
  background: green;
}

.header {
  font-size: 2em;
}

.bigger {
  font-size: 4em;
}

.text-danger {
  color: red;
}

.main {
  font-style: italic;
}
</style>

4858美高梅 1

2、input成分中属性与v-model同时存在在以属性为优先

正如代码:当文本框中的value属性与v-model争执时会以input的value属性为事先,并掩盖v-model的特性
末尾console.log输出的也是“inputText”

<div id="app">
   <input type="text" v-model="a" value="inputText">
</div>
<script>
   var v = new Vue({
       el: '#app',
       data: {
           a: "vueText"
       }
   });
   console.log(v.a);//inputText
</script>

对此复选框类型的input上述结论也同等适用,如下:

<div id="app">
   <input type="checkbox" v-model="isCheck" checked>
</div>
<script>
   var v = new Vue({
       el: '#app',
       data: {
           isCheck: false
       }
   });
   console.log(v.isCheck);//true
</script>

复选框的v-model设定为false不选中,同时设定checked属性选中,最终效果为4858美高梅 ,以checked属性优先,复选框被选中,同时v.isCheck属性被改写为true。

二、input成分中属性与v-model同时存在在以属性为事先

一般来说代码:当文本框中的value属性与v-model争辩时会以input的value属性为事先,并掩盖v-model的天性
末段console.log输出的也是“inputText”

<div id="app">
   <input type="text" v-model="a" value="inputText">
</div>
<script>
   var v = new Vue({
       el: '#app',
       data: {
           a: "vueText"
       }
   });
   console.log(v.a);//inputText
</script>

对此复选框类型的input上述结论也1律适用,如下:

<div id="app">
   <input type="checkbox" v-model="isCheck" checked>
</div>
<script>
   var v = new Vue({
       el: '#app',
       data: {
           isCheck: false
       }
   });
   console.log(v.isCheck);//true
</script>

复选框的v-model设定为false不选中,同时设定checked属性选中,最后效果为以checked属性优先,复选框被选中,同时v.isCheck属性被改写为true。

一、vue和avalon1样,都不协理VM初叶时不存在的品质

style绑定——绑定内联样式

  • 看着很像css内联样式,属性名可用驼峰式或用短横线分隔,短横线分隔要用单引号引起来
  • 直白绑定到二个体制对象
  • 构成计算属性使用
  • 数组语法

v-bind:style
使用需求加上浏览器引擎前缀的
CSS 属性时,如 transform,Vue.js 会自动侦测并累加相应的前缀。

<template>
  <div id="app">
    {{msg}}
    <div :style="{color:activeColor,fontSize:fontSize+'px'}">
      hello world
    </div>

    <div :style="styleObj1">
      hello dot
    </div>

    <div :style="styleObj2">
      hello dolby
    </div>

    <div :style="[styleObj1,styleObj2]">
      hello dolby
    </div>

  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      activeColor: 'red',
      fontSize: 12,
      styleObj1: {
        background: 'yellow',
        color: 'pink'
      }
    }
  },
  computed: {
    styleObj2() {
      return {
        fontStyle: 'italic',
        fontWeight: 'bolder'
      }
    }
  }
}
</script>

4858美高梅 2

叁、VM中的函数放到data属性和methods属性中的不同,以及函数调用时带括号与不带括号的界别

  1. Vue在实例化的时候有2个独特的属性即methods,小编看官方文书档案中把具备VM中的函数都停放methods属性里面,经测试把函数写在data和methods中都能够平常运维,那么双方有啥差别?
  2. 经过法定demo可见,在绑定函数的时候能够带括号也可以不带括号,对于有参数的函数那必须带括号调用,不过对于无参函数带括号调用与不带括号调用的区分是什么样?
    以下测试:

<div id="app">
    <button @click="dataFn">1.dataFn</button> 
    <!--输出:<button>,[MouseEvent]-->

    <button @click="dataFn()">2.dataFn()</button> 
    <!--输出:Vue,[]-->

    <button @click="methodsFn">3.methodsFn</button> 
    <!--输出:Vue,[MouseEvent]-->

    <button @click="methodsFn()">4.methodsFn()</button> 
    <!--输出:Vue,[]-->
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            dataFn: function() {
                console.log(this,arguments);
            }
        },
        methods: {
            methodsFn: function() {
                console.log(this,arguments);
            }
        }
    });
    //xxcanghai@博客园
</script>

通过上述代码相比能够获得以下结论:

  1. 若想要在事变响应函数中获得伊芙nt对象,那么事件绑定时不能加括号,参见上述1、3示例。
  2. 若想在函数中this指向Vue实例化对象,函数调用时应当加括号。同时,全数在methods属性中的函数,无论怎么着调用,this都指向当前Vue实例化对象。
  3. 遂最后敲定为:应该把全部VM中的函数都置身methods中,同时对于事件的绑定应当采取无括号办法。即上述示范3中为最优方案。

PS:当然你也足以选拔vue内置的$event来展现的传递event对象,以保证函数写在别的地点都能够健康使用this和event。

<div id="app">
    <button @click="dataFn($event)">5.dataFn($event)</button> 
    <!--输出:Vue,[MouseEvent]-->

    <button @click="methodsFn($event)">6.methodsFn($event)</button> 
    <!--输出:Vue,[MouseEvent]-->
</div>

叁、VM中的函数放到data属性和methods属性中的分裂,以及函数调用时带括号与不带括号的区分

  1. Vue在实例化的时候有三个非常的习性即methods,笔者看官方文书档案中把全数VM中的函数都停放methods属性里面,经测试把函数写在data和methods中都能够健康运维,那么双方有啥分裂?
  2. 透过合法demo可见,在绑定函数的时候能够带括号也可以不带括号,对于有参数的函数那必须带括号调用,可是对于无参函数带括号调用与不带括号调用的分裂是哪些?
    以下测试:

<div id="app">
    <button @click="dataFn">1.dataFn</button> 
    <!--输出:<button>,[MouseEvent]-->

    <button @click="dataFn()">2.dataFn()</button> 
    <!--输出:Vue,[]-->

    <button @click="methodsFn">3.methodsFn</button> 
    <!--输出:Vue,[MouseEvent]-->

    <button @click="methodsFn()">4.methodsFn()</button> 
    <!--输出:Vue,[]-->
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            dataFn: function() {
                console.log(this,arguments);
            }
        },
        methods: {
            methodsFn: function() {
                console.log(this,arguments);
            }
        }
    });
    //xxcanghai@博客园
</script>

经过上述代码比较能够获取以下结论:

  1. 若想要在事件响应函数中拿走伊芙nt对象,那么事件绑定时不能加括号,参见上述一、3示例。
  2. 若想在函数中this指向Vue实例化对象,函数调用时应该加括号。同时,全数在methods属性中的函数,无论怎么着调用,this都对准当前Vue实例化对象。
  3. 遂最后定论为:应当把持有VM中的函数都位居methods中,同时对于事件的绑定应当选用无括号格局。即上述示范三中为最优方案。

PS:当然你也得以运用vue内置的$event来显示的传递event对象,以担保函数写在任何职分都足以经常使用this和event。

<div id="app">
    <button @click="dataFn($event)">5.dataFn($event)</button> 
    <!--输出:Vue,[MouseEvent]-->

    <button @click="methodsFn($event)">6.methodsFn($event)</button> 
    <!--输出:Vue,[MouseEvent]-->
</div>

而在Angular里是足以支持的,因为angular选择脏检查的格局贯彻双向绑定,vue和avalon都以使用setter和getter达成双向绑定

vue不得不说的生命周期

当四个vue实例被创建时,它向 Vue 的响应式系统中加入了其 data
对象中能找到的有着的属性。当那些属性的值发生变动时,视图将会时有爆发“响应”,即匹配更新为新的值。

看下图:

4858美高梅 3

图源Vue.js教程

一个实例的生命周期分为creat、mount、update、destroy八个等级,它们的分工各有分化:

  • create:创建
  • mount:挂载DOM
  • update:数据更新
  • destroy:销毁(一般为手动清总管件和定时器)

与此同时在这几个进度中也会运作壹些号称生命周期钩子的函数,这给了用户在不相同等级添加自个儿的代码的机会。对应生命周期来看,又有以下九个钩:

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

看贰个事例:

<template>
  <div id="app">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  },
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
    setTimeout(() => {
      this.msg = 'change msg'
    }, 1000);
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUpdate() {
    console.log('beforeUpdate')
  },
  updated() {
    console.log('updated')
  },
  beforeDestroy() {
    console.log('beforeDestroy')
  },
  destroyed() {
    console.log('destroyed')
  },
  methods: {
    clickBtn() {
      alert('hello')
    }
  },
  watch: {
    msg() {
      console.log('hello')
    }
  }
}
</script>

打开localhost:8080,页面展现开首msg内容,控制台打字与印刷beforeCreate、created、beforeMount、mounted

4858美高梅 4

大约一s之后,页面内容爆发变化,紧接着watch生效,控制台2回打字与印刷出hello,beforeUpdate,updated,那里未有打字与印刷出beforeDestroy和destroyed是因为页面上从未有过事件。

4858美高梅 5

连带笔记

Vue学习笔记-一()

Vue学习笔记-贰()

连带笔记

Vue学习笔记-壹()

Vue学习笔记-二()

例,如下代码在1秒后不会显示出“xxcanghai”的字样

v-model

<div id="app">
 <h1>{{obj.text}}</h1>
</div>

<script>
 var v = new Vue({
 el: '#app',
 data: {
 obj:{}
 }
 });
 setTimeout(function(){
 v.obj.text="xxcanghai";//无效
 },1000);
</script>
单行文本

v-model 指令用于在表单 <input><textarea>
成分上创制双向数据绑定。它会依据控件类型自动选取正确的诀窍来更新成分,但
v-model
本质上只是是语法糖。它承担监听用户的输入事件以立异数据,并对有的最为气象实香港行政局地非同一般处理。

<template>
  <div id="app">
    <input type="text" placeholder="edit me" v-value="hello">
  </div>
</template>

如上代码的效劳是页面上会出现3个input输入框且有初步值value

4858美高梅 6

当我们在input中接纳v-model用于绑定数据时,value值不见效

<template>
  <div id="app">
    <input type="text" placeholder="edit me" v-model="message" value="hello">
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      message: '',
    }
  },
}
</script>

4858美高梅 7

v-model 会忽略全体表单成分的 value、checked、selected
性情的初步值而再三再四将 Vue
实例的多寡作为数据来源于。假诺有亟待,大家应在组件的 data
选项中宣示开首值。

<template>
  <div id="app">
    <input type="text" placeholder="edit me" v-model="value">
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      message: '',
      value: 'init',
    }
  },
}
</script>

4858美高梅 8

明天结合后面学到的看壹段代码:

<template>
  <div id="app">
    <input type="text" placeholder="edit me" v-model="message">
    <button @click="clickBtn">Click me</button>
    <p :style="styleObj">Message is: {{message}}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      message: '',
      isClick: ''
    }
  },
  computed: {
    styleObj() {
      return {
        color: this.isClick && this.message ? 'red' : '',
        background: this.isClick && this.message ? 'yellow' : ''
      }
    }
  },
  methods: {
    clickBtn() {
      if (this.message) {
        this.isClick = true
      }
    }
  },
}
</script>

咱俩为input定义了三个placeholder值为’edit me’并绑定了一个message属性

4858美高梅 9

先是看input里绑定的message和p中message之间的涉嫌,前边说v-model双向绑定不过是语法糖,实际上依然单向绑定。
当input中的内容发生变化,也等于input中绑定的message——来自于data中的message属性值发生了变动,p中的message也会随之更改,所以数据变动是单向的从data中的message属性到页面上的message属性别变化换的进度。所以p中的文本会随着input中的内容变更而更改。

4858美高梅 10

大家再来看看data中的另一个属性’isClick’,我们给它赋值为多个空的字符串,即布尔值false

继续看代码,在button按钮上定义了三个单击事件’clickBtn’,在p成分上绑定了多少个内联样式’styleObj’,大家把体制对象放在computed中,那样就会回到总括后的习性对象。当用户点击按钮时,假设input中有输入,大家将’isClick’值设为true,反应在页面上就是输入不为空的情景下点击按钮之后p成分有了灰色背景,字色变为原野绿。

4858美高梅 11

若给定初阶值,则可生效,如下:

多行文本
<template>
  <div id="app">
    Multiline message is:
    <p style="white-space: pre-line;">{{ message }}</p>
    <br>
    <textarea v-model="message" placeholder="add multiple lines"></textarea>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      message: '',
    }
  },
}
</script>

4858美高梅 12

4858美高梅 13

4858美高梅 14

在文书区域插值 (<textarea></textarea>) 并不会立见成效,应用 v-model
来代替。

<div id="app">
 <h1>{{obj.text}}</h1>
</div>

<script>
 var v = new Vue({
 el: '#app',
 data: {
 obj:{
 text:"default Text" //给定初始值
 }
 }
 });
 setTimeout(function(){
 v.obj.text="xxcanghai";//有效
 },1000);
</script>
复选框
  • 单个复选框绑定到布尔值

<template>
  <div id="app">
    <input type="checkbox" v-model="checked">
    <label for="checkbox">{{checked}}</label>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      checked: false,
    }
  },
}
</script>

4858美高梅 15

4858美高梅 16

  • 多少个复选框绑定到同1数组

<template>
  <div id="app">
    <input type="checkbox" value="Jack" v-model="checkedArr">
    <label for="jack">Jack</label>
    <input type="checkbox" value="John" v-model="checkedArr">
    <label for="john">John</label>
    <input type="checkbox" value="Mike" v-model="checkedArr">
    <label for="mike">Mike</label>
    <br>
    Checked names: {{ checkedArr }}
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      checkedArr: [],
    }
  },
}
</script>

绑定到checkedArr中的值是input中的value

4858美高梅 17

只是Vue当中比avalon好的少数是,Vue在只是对早先化时不存在的习性赋值无效,但出示是不会报错的。而avalon则根本无法展现,对于上述第二段代码运维都会报错(不精晓最新的avalon是还是不是修改此题材)

单选按钮
<template>
  <div id="app">
    <input type="radio" value="Jack" v-model="picked">
    <label for="jack">Jack</label>
    <input type="radio" value="John" v-model="picked">
    <label for="john">John</label>
    <input type="radio" value="Mike" v-model="picked">
    <label for="mike">Mike</label>
    <br>
    picked names: {{ picked }}
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      picked: '',
    }
  },
}
</script>

4858美高梅 18

幸好vue中提供了$set方法来消除这种赋值退步的标题,如下:

选择框
  • 单选时

<template>
  <div id="app">
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    Selected: {{ selected }}
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      selected: '',
    }
  },
}
</script>

4858美高梅 19

若果 v-model 表明式的初阶值未能同盟任何选用,<select>
成分将被渲染为“未选中”状态。那种情景下iOS 不会触发 change
事件,那会使用户不可能取舍首个采用。由此推荐像上面那样提供二个值为空的剥夺选项。

  • 多选时

<template>
  <div id="app">
    <select v-model="selectedArr" multiple >
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
    SelectedArr: {{ selectedArr }}
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      selectedArr: [],
    }
  },
}
</script>

4858美高梅 20

用v-for渲染的动态项

<template>
  <div id="app">
    <select v-model="selected">
      <option v-for="option in options" :value="option.value">{{option.text}}</option>
    </select>
    Selected: {{ selected }}
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      selected: 'A',
      options: [
        { value: 'A', text: 'One' },
        { value: 'B', text: 'Two' },
        { value: 'C', text: 'Three' },
      ]
    }
  }
}

4858美高梅 21

<div i<div id="app">
 <h1>{{obj.text}}</h1>
</div>

<script>
 var v = new Vue({
 el: '#app',
 data: {
 obj: {}
 }
 });
 setTimeout(function() {
 v.$set("obj.text", "xxcanghai");//有效
 }, 1000);
</script>

computed

接下去大家的话三个前方反复提到的测算属性对象computed,总计属性能够动用于各样复杂的逻辑,使代码越发轻便容易有限支撑。
语法:computed: {xxx: function () { return /* */}}

<template>
  <div id="app">
    <p>Original message: "{{ message }}"</p>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      message: 'hello'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
}

4858美高梅 22

能够像绑定普通属性一样在模板中绑定计算属性。Vue 知道 reversedMessage
注重于message,由此当 message 发生变动时,全部重视 reversedMessage
的绑定也会更新。而且最妙的是用计量属性未有副效用,更易于测试和掌握。

即使那种利用字符串来表示变量名的方法会招致力不从心利用强类型的预编写翻译检查(TypeScript),但也至少算能缓解难题啊。

methods

看了上边computed的例证你会发觉,大家在methods中采纳方法可直达同等的效益:

<template>
  <div id="app">
    <p>Original message: "{{ message }}"</p>
    <p>Methods reversed message: "{{ reversedMessage() }}"</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      message: 'hello'
    }
  },
  methods: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
}

大家得以将同1函数定义为1个艺术而不是2个乘除属性。二种情势的尾声结出真的是完全相同的。分裂的是总括属性是根据它们的依赖实行缓存的,只有在它的有关依赖暴发变动时才会重新求值。那就代表如果message 还平昔不生出转移,多次做客 reversedMessage
计算属性会马上重返从前的测算结果,而不必再度实施函数。

那也同等代表上面包车型地铁持筹握算属性将不再更新,因为 Date.now() 不是响应式重视:

<template>
  <div id="app">
    <p>{{ now }}</p>
    <p>{{ now }}</p>
    <p>{{ now }}</p>
    <p>{{ now }}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  computed: {
    now() {
      return Date.now()
    }
  },
}

4858美高梅 23

对照,每当触发重新渲染时,调用方法总会再度实施函数。

<template>
  <div id="app">
    <p>{{ now() }}</p>
    <p>{{ now() }}</p>
    <p>{{ now() }}</p>
    <p>{{ now() }}</p>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    now() {
      return Date.now()
    }
  },
}

4858美高梅 24

咱俩为啥必要缓存?借使大家有一天性质开支比较大的的盘算属性
A,它须求遍历2个了不起的数组并做大批量的计量。然后大家或然有其它的乘除属性注重于
A 。假若未有缓存,大家将不可制止的反复进行 A 的
getter函数,借使您不期望有缓存,请用方法来替代。

前方说过了computed总结属性与methods方法的相比,现在说说计算属性和侦听属性watch的可比。

<template>
  <div id="app">
    {{ fullName }}
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar',
      fullName: 'Foo Bar'
    }
  },
  watch: {
    firstName: function(val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function(val) {
      this.fullName = this.firstName + ' ' + val
    }
  },
}

如上做法是命令式的watch回调,而且代码重复,也无法实现响应式,未有其他意义。看computed怎样落到实处

<template>
  <div id="app">
    {{ fullName }}
  </div>
</template>

<script>
export default {
  name: 'app',
  data() {
    return {
      firstName: 'Foo',
      lastName: 'Bar',
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
}

代码简洁直观,且当firstName或lastName改变时,fullName也会随着改变并反映到页面上。
即使计算属性在多数景色下更稳妥,但有时也供给1个自定义的侦听器,于是就有了watch。

留神:Vue2.0曾经撤消了vm.$set的用法,应该利用Vm.set()全局方法。

watch

当必要在数据变动时进行异步或支付较大的操作时,watch是最有用响应数据变动的主意,一般用于监听input等有输入操作的气象。

<template>
  <div id="app">
    {{msg}}
    <input v-model="question">
    <div>{{answer}}</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  created() {
    console.log('')
    setTimeout(() => {
      this.msg = '12121212'
    }, 1000);
  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      question: '',
      answer: 'I cannot give you an answei until you ask a question'
    }
  },
  watch: {
    question() {
      this.answer = 'Waiting for you to stop typing...'
    },
    msg() {
      alert('hello')
    }
  }
}
</script>

如上代码在http://localhost:8080/中开辟后,页面不荒谬展现数据,接着先弹出hello

4858美高梅 25

点击鲜明后msg值变为setTimeout中的12121212

4858美高梅 26

在输入框中输入任意内容,answer值变为大家设定的字符串

4858美高梅 27

二、input成分中属性与v-model同时设有以属性为先行

如下代码:当文本框中的value属性与v-model争辨时会以input的value属性为事先,并掩盖v-model的性质
最终console.log输出的也是“inputText”

<div id="app">
 <input type="text" v-model="a" value="inputText">
</div>
<script>
 var v = new Vue({
 el: '#app',
 data: {
 a: "vueText"
 }
 });
 console.log(v.a);//inputText
</script>

对此复选框类型的input上述结论也一如既往适用,如下:

<div id="app">
 <input type="checkbox" v-model="isCheck" checked>
</div>
<script>
 var v = new Vue({
 el: '#app',
 data: {
 isCheck: false
 }
 });
 console.log(v.isCheck);//true
</script>

复选框的v-model设定为false不选中,同时设定checked属性选中,最终效果为以checked属性优先,复选框被选中,同时v.isCheck属性被改写为true。

三、VM中的函数放到data属性和methods属性中的分裂,以及函数调用时带括号与不带括号的界别

Vue在实例化的时候有2个特种的天性即methods,小编看官方文书档案中把全体VM中的函数都停放methods属性里面,经测试把函数写在data和methods中都能够健康运维,那么两方有什么区别?
通过官方demo可见,在绑定函数的时候能够带括号也能够不带括号,对于有参数的函数那必须带括号调用,可是对于无参函数带括号调用与不带括号调用的区分是如何?
以下测试:

<div id="app">
 <button @click="dataFn">1.dataFn</button> 
 <!--输出:<button>,[MouseEvent]-->

 <button @click="dataFn()">2.dataFn()</button> 
 <!--输出:Vue,[]-->

 <button @click="methodsFn">3.methodsFn</button> 
 <!--输出:Vue,[MouseEvent]-->

 <button @click="methodsFn()">4.methodsFn()</button> 
 <!--输出:Vue,[]-->
</div>
<script>
 var vm = new Vue({
 el: "#app",
 data: {
 dataFn: function() {
 console.log(this,arguments);
 }
 },
 methods: {
 methodsFn: function() {
 console.log(this,arguments);
 }
 }
 });
 //xxcanghai@博客园
</script>

因此上述代码相比较能够博得以下结论:

  • 若想要在事变响应函数中收获伊芙nt对象,那么事件绑定时无法加括号,参见上述壹、三示例。
  • 若想在函数中this指向Vue实例化对象,函数调用时应当加括号。同时,全数在methods属性中的函数,无论如何调用,this都针对当前Vue实例化对象。
  • 遂最终定论为:应当把富有VM中的函数都位居methods中,同时对于事件的绑定应当利用无括号办法。即上述示范三中为最优方案。

PS:当然你也足以利用vue内置的$event来展现的传递event对象,以保证函数写在别的岗位都得以平常使用this和event。

<div id="app">
 <button @click="dataFn($event)">5.dataFn($event)</button> 
 <!--输出:Vue,[MouseEvent]-->

 <button @click="methodsFn($event)">6.methodsFn($event)</button> 
 <!--输出:Vue,[MouseEvent]-->
</div>

连带笔记

Vue学习笔记-一(//www.jb51.net/article/98869.htm)

Vue学习笔记-2(//www.jb51.net/article/98878.htm)

正文已被整理到了《Vue.js前端组件学习课程》,欢迎大家学习阅读。

以上正是本文的全体内容,希望对大家的上学抱有帮忙,也目的在于我们多多支持脚本之家。

您或者感兴趣的小说:

  • 至于Vue.js壹些题材和商量学习笔记(二)
  • Vue贰.0使用进度常见的1对题材总计学习

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有