Vue.js学习

来源：互联网发布：东莞金博软件编辑：程序博客网时间：2024/05/18 23:12

vue.js是一个JavaScript MVVM库。

MVVM模式

MVVM模式
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。
首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。

Hello World！

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <!--这是我们的View-->        <div id="app">            {{ message }}        </div>    </body>    <script src="js/vue.js"></script>    <script>        // 这是我们的Model        var exampleData = {            message: 'Hello World!'        }        // 创建一个 Vue 实例或 "ViewModel"        // 它连接 View 与 Model        new Vue({            el: '#app',            data: exampleData        })    </script></html>

使用Vue的过程就是定义MVVM各个组成部分的过程的过程。

定义View
定义Model
创建一个Vue实例或”ViewModel”，它用于连接View和Model
在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。
在这个示例中，选项对象的el属性指向View，el: ‘#app’表示该Vue实例将挂载到<div id="app">...</div>这个元素；data属性指向Model，data: exampleData表示我们的Model是exampleData对象。
Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出”Hello World!”。

综合示例(vue2.0)

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" href="styles/demo.css" />    </head>    <body>        <div id="app">            <fieldset>                <legend>                    Create New Person                </legend>                <div class="form-group">                    <label>Name:</label>                    <input type="text" v-model="newPerson.name"/>                </div>                <div class="form-group">                    <label>Age:</label>                    <input type="text" v-model="newPerson.age"/>                </div>                <div class="form-group">                    <label>Sex:</label>                    <select v-model="newPerson.sex">                    <option value="Male">Male</option>                    <option value="Female">Female</option>                </select>                </div>                <div class="form-group">                    <label></label>                    <button @click="createPerson">Create</button>                </div>        </fieldset>        <table>            <thead>                <tr>                    <th>Name</th>                    <th>Age</th>                    <th>Sex</th>                    <th>Delete</th>                </tr>            </thead>            <tbody>                <tr v-for="(person,index) in people">                    <td>{{ person.name }}</td>                    <td>{{ person.age }}</td>                    <td>{{ person.sex }}</td>                    <td :class="'text-center'"><button @click="deletePerson(index)">Delete</button></td>                </tr>            </tbody>        </table>        </div>    </body>    <script src="js/vue.js"></script>    <script>        var vm = new Vue({            el: '#app',            data: {                newPerson: {                    name: '',                    age: 0,                    sex: 'Male'                },                people: [{                    name: 'Jack',                    age: 30,                    sex: 'Male'                }, {                    name: 'Bill',                    age: 26,                    sex: 'Male'                }, {                    name: 'Tracy',                    age: 22,                    sex: 'Female'                }, {                    name: 'Chris',                    age: 36,                    sex: 'Male'                }]            },            methods:{                createPerson: function(){                    this.people.push(this.newPerson);                    // 添加完newPerson对象后，重置newPerson对象                    this.newPerson = {name: '', age: 0, sex: 'Male'}                },                deletePerson: function(index){                    // 删一个数组元素                    this.people.splice(index,1);                }            }        })    </script></html>

这里写图片描述

常用指令
v-model:在表单元素上创建双向数据绑定
v-if:条件渲染指令，它根据表达式的真假来删除和插入元素
v-show:条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，他只是简单地为元素设置CSS的style属性（display:none）
v-else:可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素（2.0不行）的后面——否则它不能被识别
v-for:基于一个数组渲染一个列表
v-bind:指令可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是HTML元素的特性（attribute），例如：v-bind:class
v-on:用于给监听DOM事件，它的用语法和v-bind是类似的，例如监听<a>元素的点击事件：<a v-on:click="doSomething">
Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。v-bind指令可以缩写为一个冒号，v-on指令可以缩写为@符号

<!--完整语法--><a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a><!--缩写语法--><a href="javascripit:void(0)" :class="activeNumber=== n + 1 ? 'active' : ''">{{ n + 1 }}</a><!--完整语法--><button v-on:click="greet">Greet</button><!--缩写语法--><button @click="greet">Greet</button>

摘自：http://www.cnblogs.com/keepfool/p/5619070.html

阅读全文

1 0