设为首页 加入收藏

TOP

Vue官方文档笔记(一)
2019-10-09 20:01:37 】 浏览:116
Tags: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属性,表示标签里绑定的文本插值只会展示第一次加载的数据。后面如果那个数据更改了,这个标签里面

首页 上一页 1 2 3 4 5 下一页 尾页 1/5/5
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇cocos2d游戏jsc文件格式解密,Spi.. 下一篇gulp简单使用

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目