VUE 入门基础

Posted 柠檬先生

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE 入门基础相关的知识,希望对你有一定的参考价值。

六,条件渲染
  v-if 添加一个条件块
    <h1 v-if=“ok”>Yes</h1>
  也可以用v-else 添加else 块

  <template> 中 v-if条件组

  因为v-if 是一个指令,需要将它添加到一个元素上,但是如果我们想切换多个元素呢可以把一个<template>
  元素当做包装元素,并在上面使用v-if,最终的渲染结果不会包括它。
    <template>
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>

  v-else
    可以用v-else 指令给v-if 添加一个else 块
    <div v-if="Math.random() > 0.5">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
    v-else 元素必须紧跟在v-if元素或者v-else-if 的后面 否则它不能被识别。
  v-else-if
    作用 v-if 的else-if 块,可以链式的多次使用
    <div v-if="type ===‘A‘">
      A
    </div>
    <div v-else-if="type ===‘B‘">
      B
    </div>
    <div v-else-if="type ===‘C‘">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
  v-else-if必须跟在v-if或者v-else-if之后
  使用key控制元素的可重用
  vue提供一种方式让你可以自己决定是否要复用元素,你要做的是添加一个属性key ,key 必须带有唯一的值。
    <template v-if="loginType === ‘username‘">
      <label>Username</label>
      <input placeholder="Enter your username" key="username-input">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="email-input">
    </template>
    <label> 元素仍然会被复用,因为没有添加了key 属性
  v-show
    v-show 的元素会始终渲染并保持在DOM 中v-show 是简单的切换元素的css 属性display
    v-show 不支持<template>语法

七,列表渲染
  v-for
    用v-for 指令根据一组数组的选项列表进行渲染,v-for 指令需要以 item in items 形式的特殊语法
    items 是源数组并且 item 是数组元素迭代的别名。
  基本用法
    <ul id="example-1">
      <li v-for=‘item in items‘>{{item.message}}</li>
    </ul>
    var example1 = new Vue({
      el:‘#example-1‘,
      data: {
        items: [
        {message:‘Foo‘},
        {message:‘Bar‘}
        ]
      }
    })
    结果:
      Foo
      Bar
    v-for 块中 ,我们拥有对父作用域属性的完全访问权限。
    <ul id="example-2">
      <li v-for="(item,index) in items">
        {{parentMessage}} - {{ index }} - {{ item.message }}
      </li>
    </ul>
    var example2 = new Vue({
      el: ‘#example -2‘,
      data: {
        parentMessage: ‘Parent‘,
          items: [
              {message: ‘Foo‘},
              {message: ‘Bar‘}
          ]
      }
    })
    结果:
      Parent - 0 -Foo
      Parent - 1 - Bar
    也可以用 of 替代 in 作为分隔符,因为它是最接近 javascript 迭代器的语法:
      <div v-for="item of items"></div>


  Template v-for
    如同 v-if 模板,你也可以用带有v-for 的<template> 标签来渲染多个元素块
    <ul>
      <template v-for="item in items">
        <li>{{ itme.msg}}</li>
        <li class="divider"></li>
      </template>
    </ul>
  对象迭代 v-for
    也可以用v-for 通过一个对象的属性来迭代
    <ul id="repeat-object">
      <li v-for="value in object">
        {{value}}
      </li>
    </ul>
    new Vue({
        el: ‘#repeat-object’,
        data: {
          object: {
              FirstName: ‘John‘,
              LastName: ‘Doe‘,
              Age: 30
        }
      }
    })
    结果:
      John
      Doe
      30
   也可以提供第二个的参数为键名:
    <div v-for="(value,key) in object">
      {{ key}} : {{ value }}
    </div>

  第三个参数为索引
    <div v-for="(value,key,index) in object">
      {{ key }} ,{{key}} ,{{ value }}
    </div>
  整数迭代 v-for
    v-for 也可以取整数,在这种情况下,它将重复多次模板
      <div>
        <span v-for="n in 10">{{n}} </span>
      </div>
  组件 和v-for
    在自定义数组里,你可以想任何普通元素一样使用v-for
      <my-component v-for="item in items"></my-component>
      然而他不能自动传递传递数据到组件里,因为组件有自己独立的作用域,为了传递数据到组件里,我们要用props.
      <my-component v-for="(item, index) in items" v-bind:item="item" v-bind:index="index">
      </my-component>
  key
    为了给vue 一个提示,以便它跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为,每一项
    提供一个唯一key 属性,理想的key 值是每一项都有唯一id ,它的工作方式类似于一个属性,所以你需要v-bvind 来绑定动态值。
    <div v-for="item in items" :key="item.id"></div>
    建议尽可能使用 v-for 来提供 key ,除非迭代 DOM 内容足够简单,或者你是故意要依赖于默认行为来获得性能提升。
 数组更新检测
  变异方法
    vue包含一组观察数组的变异方法,所以我们将会触发视图更新,这些方法如下。
    push() pop() shift() unshift() splice()
    sort() reverse()
  重塑数组
    变异方法会改变原始的数组,也有非变异方法,如:filter(),concat().slice(),这些不会改变原始数组,但是总是返回一个新数组,使用非变异方法的时候,可以用新数组变异方法时,可以用新数组替换久数组。
    example1.items = example1.items.filter(function (item) {
        return item.message.match(/Foo/)
    })
  显示过滤/ 排序结果
  想要显示一个数组的过滤或排序副本,而不时间改变或重置原始数据,可以创建过滤或排序数组的计算属性。
      <li v-for="n in evenNumbers">{{ n }}</li>
        data: {
          numbers: [1,2,3,4,5]
        },
        computed: {
          evenNumbers: function() {
          evenNumbers: function(){
          return this.numbers.filter(function (number){
            return number % 2 ===0
          })
        }
      }
    }
  可以在计算属性不合适的情况下(列如,在嵌套 v-for 循环中) 使用method方法:
      <li v-for="n in even(number)">{{ n }}</li>
        data: {
          numbers: [1,2,3,4,5]
        },
        methods: {
          even: function(unmbers) {
          return numbers.filter(function(number){
              return number % 2 === 0
            })
          }
        }

以上是关于VUE 入门基础的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 基础入门

vue入门基础教程之经验总结篇(小白入门必备)|建议收藏

Vue基础入门讲义-环境配置

vue 基础 —— html版的 Vue 入门基础

vue 基础 —— html版的 Vue 入门基础

vue 基础 —— html版的 Vue 入门基础