通过一个简单例子快速学习Vue.js

分类：Javascript| 发布：佚名| 查看：696 | 发表时间：2017/1/3

Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。

Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。

另一方面，Vue 完全有能力驱动采用单文件组件和 Vue 生态系统支持的库开发的复杂单页应用。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue采用的MVVM设计模式

也就是说model和view绑定 model改变，view的内容改变，反之亦然

Vue主要有以下几个关键字

v-model 绑定模型
v-if 判断是否显示该dom
v-show 判断是否将该dom的display设为none
v-else if或者show为false时显示该dom
v-for 迭代
v-bind 绑定属性
v-on 绑定方法

001<!DOCTYPE html>
002<html>
003 
004    <head>
005        <meta charset="UTF-8">
006        <title></title>
007        <link rel="stylesheet" href="styles/demo.css" />
008    </head>
009    <body>
010        <div id="app">
011            <span>key</span>
012            <!-- 绑定model中search.key -->
013            <!-- 内容和下面每一列的数据进行比较 -->
014            <!-- 内容改变，下面的每一列都马上会进行比较 -->
015            <input type="text" v-model="search.key">
016                <legend>
017                    Create New Person
018                </legend>
019                <div class="form-group">
020                    <label>Name:</label>
021                    <!-- 绑定model中newPerson.name -->
022                    <input type="text" v-model="newPerson.name"/>
023                </div>
024                <div class="form-group">
025                    <label>Age:</label>
026                    <!-- 绑定model中newPerson.age -->
027                    <input type="text" v-model="newPerson.age"/>
028                </div>
029                <div class="form-group">
030                    <label>Sex:</label>
031                    <!-- 绑定model中newPerson.sex -->
032                    <select v-model="newPerson.sex">
033                    <option value="Male">Male</option>
034                    <option value="Female">Female</option>
035                </select>
036                </div>
037                <div class="form-group">
038                    <label></label>
039                    <!-- @click是v-on:click的缩写 -->
040                    <button @click="createPerson">Create</button>
041                </div>
042        </fieldset>
043        <table>
044            <thead>
045                <tr>
046                    <th>Name</th>
047                    <th>Age</th>
048                    <th>Sex</th>
049                    <th>Delete</th>
050                </tr>
051            </thead>
052            <tbody>
053                <!-- 用v-for迭代，$index为每一个item的索引 -->
054                <!-- v-if判断为true则显示，否则则移除，这里更适合用v-show,v-show并不会移除dom只会将display属性改为none -->
055                <!-- 和搜索框内容进行比较 -->
056                <tr v-for="person in people" v-if="person.name.indexOf(search.key)>=0||person.sex.indexOf(search.key)>=0||person.age==search.key">
057                        <td >{{ person.name }}</td>
058                        <!-- :style是v-bind:style的缩写，满足条件则值为前面的，否则为后面的，固定的字符串要用' ',变量不需要用'' -->
059                        <!-- v-bind后面还可以接其他的属性例如class，id -->
060                        <td :style="person.age>30 ? 'color: red' : ' ' ">{{ person.age }}</td>
061                        <!-- v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别 -->
062                        <td v-if="person.sex =='Male'">男</td>
063                        <td v-else>女</td>
064                        <td class="text-center"><button @click="deletePerson($index)">Delete</button></td>
065                </tr>
066            </tbody>
067        </table>
068        </div>
069    </body>
070    <script src="js/vue.js"></script>
071    <script>
072        // 初始化Vue
073        //el获取绑定的标签，#app获取id为app的dom，.app的话则获取class为app的dom
074        //data中为模型
075        //methods为方法
076        var vm = new Vue({
077            el: '#app',
078            data: {
079                search:{
080                    key:""
081                },
082                newPerson: {
083                    name: '',
084                    age: 0,
085                    sex: 'Male'
086                },
087                people: [{
088                    name: 'Jack',
089                    age: 30,
090                    sex: 'Male'
091                }, {
092                    name: 'Bill',
093                    age: 26,
094                    sex: 'Male'
095                }, {
096                    name: 'Tracy',
097                    age: 22,
098                    sex: 'Female'
099                }, {
100                    name: 'Chris',
101                    age: 36,
102                    sex: 'Male'
103                }]
104            },
105            methods:{
106                createPerson: function(){
107                    this.people.push(this.newPerson);
108                    // 添加完newPerson对象后，重置newPerson对象
109                    this.newPerson = {name: '', age: 0, sex: 'Male'}
110                },
111                deletePerson: function(index){
112                    // 删一个数组元素
113                    this.people.splice(index,1);
114                }
115            }
116        })
117    </script>
118 
119</html>

效果图如下：

Vue小例子：信息管理系统

365据说看到好文章不转的人，服务器容易宕机！

标签：Vue GitHub 教程

原创文章如转载，请注明：转载自郑州网建-前端开发　http://camnpr.com/
本文链接：http://camnpr.com/javascript/2282.html

通过一个简单例子快速学习Vue.js

Vue采用的MVVM设计模式

Vue主要有以下几个关键字

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想爱你所爱

通过一个简单例子快速学习Vue.js

Vue采用的MVVM设计模式

Vue主要有以下几个关键字

相关文章

关注本站

一条新消息

小编推荐

热门文章

想你所想 爱你所爱

想你所想爱你所爱