vue2 的学习

目录

启示

一、开始

  1.MVVM

  2.模板语句

         2.1.直接赋值

        2.2.属性用法

 3. 今典的条件语句 以及 for语句

        3.1 v-if v-else

        3.2 v-show

        3.3 switch 是没有的，但是有v-else-if

        3.4 v-for

---

启示

        既然上线了vue的项目，那么大家就和Romi一起学习一下vue吧

---

一、开始

        Romi 就不对vue2是什么，以及vue2的环境和安装，做详细介绍了，能力有限望大家理解QAQ (Romi 写的只是简单的应用，具体大家还是要看文档哦！简介 | Vue.js)

  1.MVVM

        什么是MVVM_春风化作秋雨的博客-CSDN博客_mvvm

  2.模板语句

        在脚本中的变量或是常量写好后，该怎么放入页面中？

         2.1.直接赋值

<p>{{ val }}</p>  //{{ val 为输出的变量名 }}

        2.2.属性用法

<p v-bind:id='id'>{{ val }}</p>
//{{ val 为输出的变量名 }},符号""中写入的id为 名为id的变量名
//v-bind 可以缩写成:
<p :id='id'>{{ val }}</p>

 3. 今典的条件语句 以及 for语句

        3.1 v-if v-else

<h1 v-if="awesome">Vue is awesome!</h1>
//当awesome 为true 他会显示 Vue is awesome!
<h1 v-else>Oh no 😢</h1>
//为false 则为Oh no 😢

        3.2 v-show

        v-show的用法与v-if 一样但是，当条件产生变化时。show是将元素隐藏，而if 则是将元素直接删除。再变化后，show 将元素隐藏属性移除，而if 需要将原本元素生成再显示。

<h1 v-show="ok">Hello!</h1>

        3.3 switch 是没有的，但是有v-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>

        3.4 v-for

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
     //items为数组，item为items中的每个对象元素
    {{ item.message }}
     // 因为item为对象，调用时直接使用到具体属性
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

//进阶版v-for
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})
//大家可以看到的是 object 中多出了很多属性，在使用v-for后，会生成 index、name、val
//index 为序列值
//name 为键值
//val 为数值
<div v-for="(value, name, index) in object"  :key="item.id">
  {{ index }}. {{ name }}: {{ value }}
</div>
//为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key，则加上:key
结果为

   

        下一篇介绍vue的事件处理