Vue.js 是用于构建交互式的 Web 界面的库。它提供了MVVM数据绑定和一个可组合的组件系统,具有简单和灵活的API。
特点:简洁,数据驱动,组件化,轻量,快速,模块友好。
数据绑定、双向数据绑定。支持简单表达式
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div>
<!-- 字符串连接 --> {{ message + '官网地址:www.runoob.com' }} <!-- 字符串反转 --> {{ message.split('').reverse().join('') }}
new Vue({ el: '#app', data: { message: '菜鸟教程!' } })
v-for 可用于列表输出
<div id="app"> <ul> <li v-for="todo in todos"> {{ todo.text }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { todos: [ { text: 'Learn JavaScript' }, { text: 'Learn Vue.js' }, { text: 'Build Something Awesome' } ] } }) </script>
<div id="app"> <ul id="example-2"> <li v-for="item in items"> {{ parentMessage }} - {{ $index }} - {{ item.message }} </li> </ul> </div> <script> var example2 = new Vue({ el: '#example-2', data: { parentMessage: '菜鸟教程官网', items: [ { message: 'www.runoob.com' }, { message: 'www.runoob.com' } ] } }) </script>
条件判断 v-if
<div id="app"> <div v-if="Math.random() > 0.5"> 随机数大于 0.5 </div> <div v-else> 随机数不大于 0.5 </div> </div>
<template v-if=true> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
v-show :v-show作用与v-if类似,不同的是v-show的元素会始终渲染并保持在 DOM 中,且v-show不支持<template>标签。
<h1 v-show=true>Hello!</h1>
过滤器
{{message}} => abc
{{message | uppercase}} => ABC
{{message | reverse | uppercase}} => CBA
这里reverse并不是内建的过滤器,我们可以用Vue.filter自定义:
Vue.filter('reverse', function (value) { return value.split('').reverse().join('') })