专栏首页谈补锅Vue官方文档笔记

Vue官方文档笔记

1、如何创建一个Vue实例对象?

var vm = new Vue({
          el: "#app",  //标签id 或 标签类名
          data:{ //双向绑定的数据
              message: "王大锤",
              show: true,
              arr: [
                  { name: "王大锤", age: 18 }, { name:"罗小虎", age: 19 }
              ]
          }
      })

当一个Vue实例(如上面的vm)被创建后,它将data对象里面的所有的属性加入到Vue的响应式系统中。当这些属性的值发生改变时,视图会产生“响应”, 即视图展示最新的数据。

如何双向式绑定数据?用v-model来绑定数据,如:

<input v-model="message" />

2、if  else  如何实现?用v-if、v-else、v-else-if,如:

<div v-if="show">show为true展示</div>
<div v-else>show为false展示</div>

3、for循环如何使用?

  • 不带索引,格式:v-for = "item  in  arr",如:
<div v-for="item in arr">{{item.name}}---{{item.age}}</div>
  • 带索引,格式:v-for = "(item, index)  in  arr",如:
<div v-for="(item, index) in arr">{{index}}--{{item.name}}</div>
  • for循环除了能对数组进行遍历,还能对对象进行遍历,遍历对象的属性,格式:v-for = "value  in  object"  /  v-for = "(value, name)  in  object"   /   v-for = "(value, name, index)  in  object"

4、Vue实例创建后,data对象里面的所有属性都会加入到响应式系统中,当这些属性的值发生改变时,视图将会产生“响应”,如果不想被响应式系统追踪变化,如何操作?

  使用Object.freeze()方法可以处理不想被追踪的数据。

5、如何知道当前Vue实例对象作用在哪个标签上?

  Vue实例.el 就是目标标签,如vm.el == document.getElementById("#app")。在实例里面,this.$el指向的也是目标标签。

6、如果Vue实例中的data里面的属性值变化我们想及时知道,如何做?

  在watch方法里面增加对属性的监听,这样当属性的值进行变化时,watch里面回及时知道。比如想监听data里面message属性的值变化。

//第一种方式
vm.$watch('message', function(newValue, oldValue){
    //这个回调函数会在 ’vm.message‘ 改变后调用
})
//第二种方式,在Vue实例里面写
      new Vue({
          el: "#app",
          data: {
              message: "hello",
              //...
          },
          watch: {
              message: function(newValue, oldValue){
                //这个回调函数会在‘message'改变后调用
              }
          }
      })

7、为什么不能在Vue实例的选项属性或回调中使用箭头函数?   比如类似于 created: ()=>{ console.log(this.message) },  或vm.$watch('a', newValue => this.myMethod())。

  因为箭头函数中并没有this, 如果你使用了箭头函数,然后箭头函数中又使用了this。为了找到这个this,当在当前箭头函数中找不到这个this时,系统会一直向上级词法作用域去查找,直至找到为止,所以会经常导致出现Uncaught  TypeError: Cannot  read  property  of  undefined  或  Uncaught  TypeErrorr:  this.myMethod  is  not  a  function  之类的错误。

8、一个Vue实例,从创建到销毁,经历了哪些过程?也是说它的生命周期是怎样的?

  主要有8个步骤

  8.1  beforeCreate:  创建Vue实例,初始化实例的事件、injections(注射:一般是检查是否有父级信号注入,在这里可以接收对父级组件或父级属性的引用,与父级提供的provide属性相配合)、reactivity(反应性:初始化监听属性变化的方法,如watch)。

  8.2  created: 在实例进入created后,会判断它是否包含“el"option(选项)。如果没有的话,它会调用vm.$mount(el)这个方法,然后执行下一步;如果有的话,直接执行下一步。紧接着会判断是否含有”template"这个选项,如果有的话,它会把template解析成一个render函数。

  8.3  beforeMount:  在beforeMount阶段中,完成render(渲染),  vm.$el创建完成,并将渲染出来的内容挂载到DOM节点上。

  8.4  mounted:  在mounted阶段,进行数据请求 --> data数据更新  -->  然后视图重新渲染  -->  再数据变化  -->  再重新渲染等等循环往复操作。这个对数据进行变化的过程,其实还包含了beforeUpdate和updated两个周期函数。

  8.5  beforeDestroy:  当Vue实例需要被销毁时,执行beforeDestroy函数,再这里拆卸属性侦听器(watch)、子组件、事件监听器(method)等等。

  8.6  destroyed:  最后一步,销毁Vue实例,完成了它丰功伟绩的一生!

这是官方给出的一张生命周期图:

9、v-once是什么指令,有什么用?

  一次性插值,再html标签中添加v-once属性,表示标签里绑定的文本插值只会展示第一次加载的数据。后面如果那个数据更改了,这个标签里面的内容不会再进行更新。

10、如果相比文本插值转成html标签(把绑定的数据转成html标签),如何操作?

  使用v-html属性,如:<div  v-html="customHtml"></div>

注意:动态渲染的任意HTML可能会非常危险,因为它很容易导致XSS攻击。请只对可信内容使用HTML插值,绝不要对用户提供的内容使用插值。

11、对于在html标签中的插值使用双括号{{message}}来绑定数据,如果想把数据绑定在HTML标签中的属性上,如类名(.)、样式(style)、自定义属性等如何操作?

  一般格式为 v-bind:属性名 = "变量名",如:

<div v-bind:class="myClass" v-bind:style="myStyle" v-bind:key="myKey"></div>

  绑定事件的格式为  v-on:事件类型 = "事件名",如:

<input  v-on:click="showMsg"   v-on:focus="getFocus"   v-on:blur="getBlur" />

12、对于表单标签的一些存在即为true的属性,如何让它们默认为false(比如复选框checkbox的checked属性,所有表单标签的disabled属性) ?

  比如: 

<input type="checkbox" checked/> 
<input type="checkbox" checked="true" /> 
<input type="checkbox" checked="false"/>

  这三种写法的效果是一样的,即这些复选框一渲染出来就是默认选中状态,类似的disabled属性也是这个表现。

  那么如何让它们默认为false呢?用v-bind, 比如:

<input type="checkbox" v-bind:checked="false"/> 
<input v-bind:disabled="false"/>

13、Vue模板语法除了绑定变量,还能绑定表达式,如:

<div>{{number + 1}} , {{ok ? '展示':'隐藏'}} ,{{message.split('').reverse().join('')}}</div>

14、v-bind和v-on的缩写方式:

v-bind:  可以缩写成 :

<div v-bind:href="url" v-bind:class="myClass"></div>

可以缩写成

<div :href="url" :class="myClass"></div>

v-on: 可以缩写成

<input  v-on:focus="getFocus" v-on:click="clickMe"/>

可以缩写成

<input @focus="getFocus" @click="clickMe"/>

15、模板内的表达式可以进行简单运算,如果在模板内进行复杂逻辑有什么后果?有什么替代方案?

  在模板中放入太多的逻辑会让模板过重且难以维护。因此,对于任何复杂逻辑,应该使用计算属性。如:

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

  我们可以像绑定普通属性一样在模板中绑定计算属性,普通属性和计算属性已经建立了依赖关系。当普通属性变化时,计算属性也会跟着更新。

  当然我们能够看出,使用计算属性实现的效果,使用方法也能达到同样的效果,比如:

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

  那么问题来了,既然使用计算属性和方法的效果是一样的,那么用哪个更好性能更高?

  这个要具体问题具体分析,看用在哪些场景下。计算属性是基于它们的响应式依赖进行缓存的,只有相关响应式依赖发生改变时他们才会重新求值。这就意味着只要message还没发生改变,多次访问reversedMessage计算属性会立即返回之前的计算结果,而不必再次执行函数。相比之下,每当触发重新渲染时,调用方法将总会再次执行函数。

  因此,根据实际情况是否需要缓存,来判断是使用计算属性,还是使用方法,让性能更高。

  另外,计算属性vs侦听属性的区别比较,在某种场景下:当有些数据需要随着其他数据的变动而变动时,通常更好的做法是使用计算属性,而不是命令式的watch回调。如:

<div id="demo">{{ fullName }}</div>
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

  上面的代码式命令式重复的。且看使用计算属性如何实现这个效果:

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

  可以看出,在这种场景下,使用计算属性比侦听属性要好的多。

16、给标签绑定类名和内联样式,有几种写法?

  主要有两种:对象语法和数组语法,看下面的例子:

<div :class="{classOne: classObj.isOK, 'classTwo': classObj.isNO}">class的对象语法</div>
<div :class="{'classOne': classObj.isNo, 'classTwo': classObj.isOK}">class的对象语法</div>
<div class="classZero" :class="classObj2">class的对象语法</div>
<div :class="classObj3">class的数组语法</div>
<div :class="[classObj3[0], classObj3[1]]">class的数组语法</div>
<div :style="{fontSize: styleObj.fontSize, border: styleObj['border-bottom']}">style的对象语法</div>
<div :style="styleObj">style的对象语法</div>
<div :style="[styleObj, styleObj2]">style的数组语法</div>
data:{
    classObj: { isOK: true, isNO: false }, //class对象语法
    classObj2: { classOne: true, classTwo: true }, //class的对象语法2
    classObj3: ['classOne', 'classTwo'],   //class的数组语法
    styleObj: { fontSize: '50px', 'border-bottom': '8px dashed purple', color: 'red' }, //内联样式的对象语法
    styleObj2: { borderLeft: '3px solid red', 'border-right':'5px solid green' }, //内联样式的对象语法
},

最后这8个div渲染为:

<div class="classOne">class的对象语法</div>
<div class="classTwo">class的对象语法</div>
<div class="classZero classOne classTwo">class的对象语法</div>
<div class="classOne classTwo">class的数组语法</div>
<div class="classOne classTwo">class的数组语法</div>
<div style="font-size: 50px; border: 8px dashed purple; ">style的对象语法</div>
<div style="font-size: 50px; border-bottom: 8px dashed purple; color: red">style的对象语法</div>
<div style="font-size: 50px; border-bottom: 8px dashed purple; color: red; border-left: 3px solid red; border-right: 5px solid green;">style的数组语法</div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • web页面和小程序页面实现瀑布流效果

      2、小程序实现瀑布流,大致流程差不多。只不过小程序的图片的宽高度的获取没有web页面那么方便。

    tandaxia
  • Quartz2D复习(四) --- 图层CALayer和动画CAAnimation

    1)、在ios中,能看得见摸得着的东西基本上都是UIView, 比如按钮、文本标签、文本输入框、图标等,这些都是UIView

    tandaxia
  • 工作中碰到的js问题(disabled表单元素不能提交到服务器)

    今天碰到一个奇葩的问题,asp页面表单提交后,有一个文本框<input type="text" name="phone" id="phone" />在后台获取不...

    tandaxia
  • JavaScript之怎样获取元素节点

    JavaScript获取元素节点一共有三种方法,分别是通过元素ID、通过标签名字和通过类名字来获取; 1.通过元素ID属性的ID值来获得元素对象-getElem...

    郑小超.
  • 初学者必知的HTML规范

    超然
  • jQuery中排除指定元素,同时选择剩下的所有元素

    场景:某页面用了js延时加载技术处理所有图片,以改善用户体验,但是有几个图片不想延时加载,要求把它们单独挑出来。 研究了一下jQuery的API文档,搞掂了,j...

    菩提树下的杨过
  • 【前端】CSS : display

    设置了该属性之后设置高度、宽度都无效,同时text-align属性设置也无效,但是设置了line-height会让inline元素居中

    Gavin-ZYX
  • CSS-三栏响应式布局(左右固宽,中间自适应)的五种方法

    xing.org1^
  • 一天带入门到放弃vue.js(三)

    自己新建的标签赋予特殊功能的是组件,而指定是在标签上使用类似于属性,以v-name开头,v-on,v-if...是系统指令! v-是表示这是vue的指令if,f...

    十月梦想
  • 模板引擎(比如ejs)中如何显示markdown语法编写的内容

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.n...

    acoolgiser

扫码关注云+社区

领取腾讯云代金券