1.Vue.js的特点

Vue.js是一个Javascript MVVM（Model-View-ViewModel）库,与传统Jquery的区别在于，Vue.js舍弃了繁杂的DOM操作，

如取DOM值$('#id1').val()，赋DOM值$('#id1').val('hello')

Vue.js DOM和Model通过ViewModel来实现关联，

ViewModel是Vue.js的核心，主要有两个事件DOM Listeners和Data Bindings

DOM Listeners：监听DOM值，变化时，更新Model对应值

Data Bindings:当Model对应值改变时，同步绑定到View

原理图如下：

2.Vue.js使用示例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--view-->

    <span id="myview">{{ message }}</span>

</body>

<script src="js/vue.js"></script>

<script>

    // model

    var mymodel = {

			message: 'Hello World!'

		}

    //ViewModel

    new Vue({

        el: '#myview',

        data: mymodel

    })

</script>

</html>

运行结果：

代码分析：

mymodel:model数据层

v-model="message":view视图层，v-model定义了对应的model中的字段

new Vue({}):定义了view层元素id作用域内，对应的model

3.双向绑定示例

有Vue.js的原理，可知当View值改变时，对应的Model值也会变化；当Model值变化时， View值也会发生变化。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--view-->

    <input type="text" id="myview" v-model="message">

</body>

<script src="js/vue.js"></script>

<script>

    // model

    var mymodel = {

			message: 'Hello World!'

		}

    //ViewModel

    new Vue({

        el: '#myview',

        data: mymodel

    })

</script>

</html>

4.Vue.js常用指令

v-if:判断指令

v-show:显示隐藏指令

v-else:判断指令（必须紧跟v-if,v-show使用）

v-for:循环指令

v-bind:绑定class指令

v-on:绑定事件指令

5.Vue.js指令使用示例

1)v-if,v-else

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <div id="my_info">

        <span v-if="score>=9">popular language</span>

        <span v-else>fewer language</span>

    </div>

</body>

<script src="js/vue.js"></script>

<script>

    // model

    var mymodel = {

			score: 8

		}

    //ViewModel

    new Vue({

        el: '#my_info',

        data: mymodel

    })

</script>

</html>

运行结果：

v-if="score>=9":v-if后接表达式

2)v-show,v-else

v-show表示display:block,display:none

3)v-for

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <table id="my_info">

        <tr>

            <th>name</th>

            <th>score</th>

        </tr>

        <tr v-for="language in languages">

            <td>{{ language.name }}</td>

            <td>{{ language.score }}</td>

        </tr>

    </table>

</body>

<script src="js/vue.js"></script>

<script>

    //ViewModel

    new Vue({

        el: '#my_info',

        data: {

            languages:[{

                name: 'C',

                score: 9

            },{

                name: 'Python',

                score: 8.5

            },{

                name: 'Java',

                score: 7

            }]

        }

    })

</script>

</html>

运行结果：

4)v-bind,v-on

styles/index.css

.pagination li{

    display: inline;

}

.pagination li a{

    padding:6px 12px;

    background-color: #fff;

    border:1px solid #ddd;

    text-decoration: none;

    margin-left: -1px;

    color: #009a61;

}

.pagination .active{

    background-color: #009a61;

    color: #fff;

}

index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="styles/index.css" />

</head>

<body>

    <div id="my_info">

        <ul class="pagination">

            <li v-for="n in pagecount">

                <a href="javascript:void(0)" v-on:click="onpage(n+1)" v-bind:class="pagenum===n+1?'active':''">

                    {{ n+1 }}

                </a>

            </li>

        </ul>

    </div>

</body>

<script src="js/vue.js"></script>

<script>

    //ViewModel

    new Vue({

        el: '#my_info',

        data: {

            pagenum: 1,

            pagecount: 10

        },

        methods: {

            onpage: function (index) {

                this.pagenum = index;

            }

        }

    })

</script>

</html>

运行结果：

el:绑定的view

data:model属性

methods:model方法

v-bind:class="pagenum===n+1?'active':''"

model的pagenum属性对应的值和索引一直，设置样式class为active

v-on:click="onpage(n+1)"

view绑定方法，click时执行model的onpage方法

Vue.js简介及指令的更多相关文章

  1. Vue.js简介

    Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然是Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJ ...

  2. vue学习（一）、Vue.js简介

    Vue.js 五天 汤小洋一. Vue.js简介1. Vue.js是什么Vue.js也称为Vue,读音/vju:/,类似view,错误读音v-u-e 版本:v1.0 v2.0 是一个构建用户界面的框架 ...

  3. Vue.js之常用指令

    vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...

  4. 1.Vue.js的常用指令

      Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...

  5. Vue.js：自定义指令

    ylbtech-Vue.js:自定义指令 1.返回顶部 1. Vue.js 自定义指令 除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令. 下面我们注册一 ...

  6. vue.js 简介

    Vue.js是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层 ...

  7. Vue.js——常用的指令

    1.v-on:指令监听DOM事件,并在触发时运行一些javaScript代码. <div id='myView'> <img src="img/se.png" v ...

  8. vue.js 四（指令和自定义指令）

    官方的指令说明已经很简单了,这里再写一遍,也是自己加深一下印象 v-text 就是写入单纯的文本,可以忽略这个指令直接双花括号代替 <span v-text="msg"> ...

  9. Vue.js的简介

    vue.js简介 Vue.js读音 /vjuː/, 类似于 view   Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大 ...

随机推荐

  1. [转载]Ubuntu安装配置 git 服务器和客户端

    原文地址:Ubuntu安装配置 git 服务器和客户端作者:ding404 1.配置前准备 服务器:安装ssh server另外还装了gitosis做git的权限管理 sudo apt-get ins ...

  2. 设置span在div中垂直居中

    转自:https://blog.csdn.net/weirenkuan/article/details/51177695 使用display:table-cell,span中内容无论多少,都可以垂直居 ...

  3. oracle安装后sqlnet.ora文件

    # sqlnet.ora Network Configuration File: D:\Develop\oracle11g\product\11.2.0\dbhome_1\network\admin\ ...

  4. 推荐系统 BPR 算法求解过程

    数据假设: 每个用户之间的偏好行为相互独立 同一用户对不同物品的偏序相互独立 则优化问题为极大化如下目标: [Reference] 1.论文翻译:BPR:面向隐偏好数据的贝叶斯个性化排序学习模型 2. ...

  5. linux shell 脚本攻略学习18--grep命令详解

    grep(global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是unix/linux中用于文本搜索 ...

  6. .net获取当前url各种属性(文件名、参数、域名、端口等)的方法（转）

    假设当前页完整地址是:http://www.test.com:80/aaa/bbb.aspx?id=5&name=kelli "http://"是协议名 "www ...

  7. MySQL -- innodb中cardinality是如何统计的

    cardinality是放在mysql存储引擎层进行的.采用的是采样取值.在innodb存储引擎中,cardinality统计信息的更新发生在两个操作中:insert和update 更新策略为:-表中 ...

  8. Android WebView中软键盘会遮挡输入框相关问题

    要想实现这样的软键盘出现的时候会自己主动把输入框的布局顶上去的效果,须要设置输入法的属性,有下面两种设置方式:     一.在java代码中设置例如以下:      getWindow().setSo ...

  9. java 传址或传值

    原文链接: http://blog.csdn.net/jdluojing/article/details/6962893 java是传值还是传址,这个问题已经讨论了很久了,有些人说是传值的,有些人说要 ...

  10. [转]用GSON 五招之内搞定任何JSON数组

    关于GSON的入门级使用,这里就不提了,如有需要可以看这篇博文 <Google Gson的使用方法,实现Json结构的相互转换> ,写的很好,通俗易懂. 我为什么写这篇文章呢?因为前几晚跟 ...