Vue.js基础入门

vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue入门</title>
    </head>
    <body>
      <!-- 定义一个 View -->
      <div id="box">
        {{message}} 
        <input type="text" v-model="message"/>
      </div>

      <script src="js/vue.js"></script>
      <script>
        /* * 
         * 定义一个 Modal 
         * */
        var mes = {
          message: 'hello'
        }

        /* *
         * 创建一个 Vue 实例或 "ViewModal" 
         * 它用于连接 View 和 Modal
         * */
        new Vue({
          el: '#box',  // 指向View
          data: mes  // 指向Modal
        })
      </script>
    </body>
</html>

常用指令

指令（Directives）是带有 v- 前缀的特殊属性。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上

1、v-model
可用于一些表单元素，常见的input、checkbox、radio、select
2、v-for
vue.js 1.0以前的版本是v-repeat

<ul id="box">
    <li v-for="item in arr" >{{item}}</li>
</ul>

var mes = {
  arr: [1, 3, 4, 5]
}
new Vue({
  el: '#box', 
  data: mes
})

3、v-on
用于监听 DOM 事件

<button v-on:click="doSomething">doSomething</button>
// "v-on:" 可以简写为 "@"
<button @click="doSomething">doSomething</button>

new Vue({
  el: '#box', 
  methods: {
    doSomething: function () {
      alert(1)
    }
  }
})

4、v-if、v-else-if、v-else、v-show
为true时都会显示出来
v-if、v-else-if、v-else值为false时，不会生成对应的节点
v-show为false时，会生成对应的节点，并用display:none隐藏

<div id="box">
  <div v-if="aa == 1">v-if true</div>
  <div v-else>v-else</div>

  <div v-show="aa == 1">v-show true</div>
  <div v-else>v-else</div>

  <div v-if="aa != 1">v-if false</div>
  <div v-else>v-else</div>

  <div v-show="aa != 1">v-show false</div>
  <div v-else>v-else</div>      
</div>

　aa = 1时，浏览器的解析效果解析

这里写图片描述

5、v-bind
用来响应地更新 HTML 属性

<div v-bind:title="message">{{message}}</div>
// "v-bind:" 可以简写为 ":"
<div :title="message">{{message}}</div>

6、v-once
一次性地插值，当数据改变时，插值处的内容不会更新，v-once会影响到该节点上所有的数据绑定

过滤器

Vue.js 你自定义过滤器，被用作一些常见的文本格式化。过滤器应该被添加在 mustache 插值的尾部，由“管道符”指示：

{{ message | capitalize }}

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

过滤器可以串联：{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：{{ message | filterA('arg1', arg2) }}
这里，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数