vue命令总结

Vue 构造器中包含el 、data、methods 参数，el是 DOM 元素中的 #id，data 用于定义属性，methods 用于定义函数

<div id="vm">

    <h1>name : {{name}}</h1>

    <h1> {{getDetail()}}</h1>

</div>

<script type="text/javascript">

    var vm = new Vue({

        el: '#vm',

        data: {

            name: "tom",

        },

        methods: {

            getDetail: function() {

                return  this.name+ " hello";

            }

        }

    })

</script>

v-html 指令：用于输出 html 代码

<div v-html="message"></div>

v-bind:class

  <div v-bind:class="{'class1': use}">

    v-bind:class 指令

  </div>

v-model

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

<input type="checkbox" v-model="use" id="r1">

v-show

使用 v-show 指令来根据条件展示元素：

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

v-bind 缩写:

v-bind:href(:href)

<a v-bind:href="url">菜鸟教程</a>

v-on 缩写

v-on:click(@click)

<a v-on:click="doSomething">

过滤器

<!-- 在两个大括号中 -->

{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->

<div v-bind:id="rawId | formatId"></div>

<div id="app">

  {{ message | capitalize }}

</div>

    

<script>

new Vue({

  el: '#app',

  data: {

    message: 'runoob'

  },

  filters: {

    capitalize: function (value) {

      if (!value) return ''

      value = value.toString()

      return value.charAt(0).toUpperCase() + value.slice(1)

    }

  }

})

</script>

条件

v-if

<p v-if="seen">现在你看到我了</p>

智能仓库管理系统

v-else

    <div v-if="Math.random() > 0.5">

      Sorry

    </div>

    <div v-else>

      Not sorry

    </div>

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>