一小时复习
vue.js 是一个 JavaScriptmvvm 库, 是以数据驱动和组件化的思想构建的, 相比 angular.JS,vue.JS 提供了更加简洁, 更加容易理解的 API, 如果习惯了 jQuery 操作 dom.
学习 vue.JS, 抛开手动操作 dom 的思维, 因为 vue.JS 是数据驱动的, 你无需手动操作 dom.
MVVM 模式 (Model-View-ViewModel)
view model 是一个 vue.JS 实例.
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- </title>
- </head>
- <body>
- <div id="app">
- {{message}}
- </div>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- // 这是我们的 model
- var exampleData = {
- message: 'Hello World!'
- }
- new Vue({
- el: '#app',
- data: exampleData
- })
- </script>
- </HTML>
实现了双向绑定
v-model 指令在表单元素上创建双向数据绑定
- <div id="app">
- <p>
- {{message}}
- </p>
- <input type="text" v-model="message" />
- </div>
常用指令
v-if 指令 - 根据表达式的真假来删除和插入元素
v-show 指令 - 始终会被渲染到 HTML, 它只是简单地为元素设置 CSS 的 style 属性
image.PNG
v-else 指令
v-for 指令
- <div id="app">
- <table>
- <thead>
- <tr>
- <th>
- </th>
- <th>
- </th>
- <th>
- </th>
- <tr>
- </thead>
- <tbody>
- <tr v-for="item in items">
- <td>
- {{ item.id }}
- </td>
- </tr>
- </tbody>
- </table>
v-bind 指令
image.PNG
- <li v-for="n in pageCount">
- <a href="javascript:void(0)" v-bind:class="activeNumber === n + 1 ?'active':'' ">
- {{ n+1 }}
- </a>
- </li>
image.PNG
v-on 指令
v-on 指令用于给监听 DOM 事件
- @click="deletePerson($index)"
- @click="createPerson"
- <div class="form-group">
- <label>Sex:</label>
- <select v-model="newPerson.sex">
- <option value="Male">Male</option>
- <option value="Female">Female</option>
- </select>
- </div>
image.PNG
image.PNG
image.PNG
请点赞! 因为你的鼓励是我写作的最大动力!
官方微信公众号
吹逼交流群: 711613774
吹逼交流群
来源: http://www.jianshu.com/p/a265724b7705