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. Electromagnetic radiation and Radio 电磁波/电磁辐射和无线电波

    电磁辐射,又称电磁波,是由同相振荡且互相垂直的电场与磁场在空间中以波的形式传递能量和动量,其传播方向垂直于电场与磁场构成的平面. 电磁辐射的载体为光子,不需要依靠介质传播,在真空中的传播速度为光速.电 ...

  2. nginx常用超时设置

    客户度连接nginx超时, 建议5s内 接收客户端header超时, 默认60s, 如果60s内没有收到完整的http包头, 返回408 Syntax: client_header_timeout t ...

  3. WinPE无法识别NVMe SSD硬盘，如何重装系统

    (源自网络出处不详) 抽风,diy一台新机器,下载的win10系统安装时出现如题所示的问题,开始以为是主板的问题设置u盘启动也不行,后来在某个群里有人说是系统版本问题,无奈重新做了启动优盘(用的17年 ...

  4. 【Visual Studio】如何在VS 2012中打印变量值到输出窗口

    1.在调试程序时,想要输出某个变量的值到vs的输出窗口,而不是通过添加断点,每次调试时,一步一步的看变量的值,很麻烦,用console.writeline(str);是不行的,这个命令只能用在控制台应 ...

  5. Windows 10安装DockerToolBox失败处理方法

    指令运行报错: Windows 10安装DockerToolBox失败处理方法:升级Windows 10. (注意:只有Windows10 专业版才支持升级,Server和企业版无效)

  6. 基于matplotlib的数据可视化 - 饼状图pie

    绘制饼状图的基本语法 创建数组 x 的饼图,每个楔形的面积由 x / sum(x) 决定: 若 sum(x) < 1,则 x 数组不会被标准化,x 值即为楔形区域面积占比.注意,该种情况会出现 ...

  7. linux大文件传输

    Mysql复制,初始化服务器,备份/还原等大文件复制是很常见的任务,他们完成的实际任务可以概括为: 1,(可选)压缩文件 2,发送文件 3,解压文件 4,验证文件一致性 下面介绍几种方法: 1,最简单 ...

  8. Groovy 学习手册（3）

    五. Groovy 的设计模式 设计模式是一种非常好的方式,可以使你的代码变得实用,可读又具有扩展性.跟 Java 相比,在 Groovy 里使用设计模式使代码更加简洁和容易. 1. 策略模式 设想一 ...

  9. Python 文件 close() 方法

    描述 Python 文件 close() 方法用于关闭一个已打开的文件.关闭后的文件不能再进行读写操作, 否则会触发 ValueError 错误. close() 方法允许调用多次. 当 file 对 ...

  10. 【转载】Spring Cache介绍

    原文地址:http://www.cnblogs.com/rollenholt/p/4202631.html 缓存是实际工作中非常常用的一种提高性能的方法, 我们会在许多场景下来使用缓存. 本文通过一个 ...