2017-3-27 VUE

Vue.js 模板语法

1、使用 {{...}}（双大括号）的文本插值

<div id="main">
    <p>{{ message }}</p>
</div>
<script>
    new Vue({
        el:'#main',
        data:{
            message:'Hello'
        }
    })
</script>

2、使用 v-html 指令用于输出 html 代码

<div id="main">
        <div v-html="message"></div>
    </div>
    <script>
        new Vue({
            el:'#main',
            data: {
                message: '<h1>hello</h1>'
            }
        })
    </script>

3、属性

<div id="main">
        <label for="r1"></label>
        <input type="checkbox" v-model="class1" id="r1">
        <br/>
        <div v-bind:class="{'class1':class1}">
            directiva v-bind:class
        </div>  
    </div>
    <script>
        new Vue({
            el:'#main',
            data:{
            class1:false
            }
        });
    </script>   

4、表达式

<div id="main">
        {{ 1+1 }}<br>
        {{ ok ? ' YES ' : ' NO ' }}<br>
        {{ message.split('').reverse().join('') }}
        <div v-bind:id="'list-' + id">hello</div>
    </div>  
    <script>
        new Vue({
            el:'#main',
            data: {
                ok: true,
                message: 'ABC',
                id: 1
            }
        })
    </script>   

5、指令

<div id="main">
        <p v-if="seen">A</p>
        <template v-if="ok">
            <h1>a</h1>
            <p>b</p>
            <p>c</p>
        </template> 
    </div>
    <script>
        new Vue({
            el:'#main',
            data: {
                seen:true,
                ok:true
            }
        })
    </script>

6、参数

<div id="main">
        <pre><a v-bind:href="url">百度</a></pre>
    </div>  
    <script>
        new Vue({
        el:'#main',
            data: {
                url:'http://baidu.com'
            }
        })
    </script>   

7、用户输入

<div id="main">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#main',
  data: {
    message: ''
  }
})
</script>

对输入的字符串第一个字母转为大写

<div id="main">
  {{ message | capitalize }}
</div>  
<script>
new Vue({
  el: '#main',
  data: {
    message: 'suchenfei'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

8、缩写

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
vm.$watch('a', function (newVal, oldVal) {
})

Vue.js 条件与循环

1、v-else

<div id="main">
    <div v-if="Math.random() > 1">
      Sorry
    </div>
    <div v-else>
      Not sorry
    </div>
</div>
    
<script>
new Vue({
  el: '#main'
})
</script>

2、v-else-if

<div id="main">
    <div v-if="type === 1">
      A
    </div>
    <div v-else-if="type === '1'">
      B
    </div>
    <div v-else-if="type === true">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#main',
  data: {
    type: '1'
  }
})
</script>

3、v-show
注意: v-show 不支持 <template> 语法。

<div id="main">
    <h1 v-show="ok">Hello!</h1>
</div>
    
<script>
new Vue({
  el: '#main',
  data: {
    ok: true
  }
})
</script>

Vue.js循环语句

1、v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

<div id="main">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>

<script>
new Vue({
  el: '#main',
  data: {
    sites: [
      { name: 'A' },
      { name: 'B' },
      { name: 'C' }
    ]
  }
})
</script>