<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!--引入Vue.js-->

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

<title>无标题文档</title>

</head>

<body>

<!--普通文本输出-->

<div id="app">

    {{ message }}

</div>

<!--鼠标放上几秒显示信息-->

<div id="app-2">

  <span v-bind:title="message">

    鼠标悬停几秒钟查看此处动态绑定的提示信息！

  </span>

</div>

<!--if判断-->

<div id="app-3">

    <p v-if="seen">现在你看到我了</p>

</div>

<!--for循环输出-->

<div id="app-4">

    <ol>

        <li v-for="todo in todos">

            {{ todo.text }}

        </li>

    </ol>

</div>

<!--点击按钮点击后逆转消息-->

<div id="app-5">

    <p>{{ message }}</p>

    <button v-on:click="reverseMessage">逆转消息</button>

</div>

<!--表单输入和应用状态之间的双向绑定-->

<div id="app-6">

    <p>{{ message }}</p>

    <input v-model="message">

</div>

<div id="app-7">

    <ol>

        <!--

          现在我们为每个 todo-item 提供 todo 对象

          todo 对象是变量，即其内容可以是动态的。

          我们也需要为每个组件提供一个“key”，稍后再

          作详细解释。

        -->

        <todo-item

                v-for="item in groceryList"

                v-bind:todo="item"

                v-bind:key="item.id">

        </todo-item>

    </ol>

</div>

</body>

</html>

<script type="text/javascript">

    var app = new Vue({

        el: '#app',

        data: {

            message: 'Hello Vue!'

        }

    })

    var app2 = new Vue({

        el: '#app-2',

        data: {

            message: '页面加载于 ' + new Date().toLocaleString()

        }

    })

    var app3 = new Vue({

        el: '#app-3',

        data: {

            seen: true

        }

    })

    var app4 = new Vue({

        el: '#app-4',

        data: {

            todos: [

                { text: '学习 JavaScript' },

                { text: '学习 Vue' },

                { text: '整个牛项目' }

            ]

        }

    });

    app4.todos.push({ text: '新项目' });

    var app5 = new Vue({

        el: '#app-5',

        data: {

            message: 'Hello Vue.js!'

        },

        methods: {

            reverseMessage: function () {

                this.message = this.message.split('').reverse().join('')

            }

        }

    })

    var app6 = new Vue({

        el: '#app-6',

        data: {

            message: 'Hello Vue!'

        }

    })

    Vue.component('todo-item', {

        props: ['todo'],

        template: '<li>{{ todo.text }}</li>'

    })

    var app7 = new Vue({

        el: '#app-7',

        data: {

            groceryList: [

                { id: 0, text: '蔬菜' },

                { id: 1, text: '奶酪' },

                { id: 2, text: '随便其它什么人吃的东西' }

            ]

        }

    })

</script>

Vue.js几个简单用法的更多相关文章

  1. vue.js+webpack在一个简单实例中的使用过程demo

    这里主要记录vue.js+webpack在一个简单实例中的使用过程 说明:本次搭建基于Win 7平台 Node.js 安装官网提供了支持多种平台的的LTS版本下载,我们根据需要来进行下载安装.对于Wi ...

  2. vue.js最最最最简单实例

    vue.js最最最最简单实例 一.总结 一句话总结: 1.vue.js实现实现数据的双向绑定用的是什么标记? 双大括号:比如{{message}} 2.vue数据循环输出的标记是什么? 用的是标签的v ...

  3. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  4. vue.js+vue-router+webpack keep-alive用法

    本文是机遇 提纲:   现有需求 各个解决方案的优缺点 相关的问题延伸 keep-alive使用详解   现有需求   每个项目中都存在许多列表数据展示页面,而且通常包含一些筛选条件以及分页.   并 ...

  5. Vue.js 作用域、slot用法（单个slot、具名slot）

    作用域 在介绍slot前,需要先知道一个概念:编译的作用域.比如父组件中有如下模板: <child-component> {{message}} <child-component&g ...

  6. vue.js路由参数简单实例讲解------简单易懂

    vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...

  7. Vue.js中ref ($refs)用法举例总结

    原文地址:http://www.cnblogs.com/xueweijie/p/6907676.html <div id="app"> <input type=& ...

  8. VUE -- vue.js中$watch的用法示例

    Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch( ...

  9. vue.js中$watch的用法示例

    Vue.js 提供了一个方法 watch,它用于观察Vue实例上的数据变动.对应一个对象,键是观察表达式,值是对应回调.值也可以是方法名,或者是对象,包含选项. 在实例化时为每个键调用 $watch( ...

随机推荐

  1. 镜像仓库管理：与Portus不得不说的那些事

    背景: 目前在做一个云计算相关的项目,其中有这样一个需求:每个平台用户都有自己的docker镜像仓库(docker registry),用户可以对自己的镜像仓库的push/pull权限进行管理,也就是 ...

  2. lambda表达式，map函数

    lambda只是一个表达式,不需要定义函数,故也是匿名函数,用法为:lambda 参数:表达式. x=5 list1=[2,3,4] list2=[10,20,30] s=lambda x:x**3 ...

  3. PAT甲题题解-1124. Raffle for Weibo Followers-模拟，水题

    水题一个,贴个代码吧. #include <iostream> #include <cstdio> #include <algorithm> #include &l ...

  4. kafka学习总结之kafka核心

    1.  Kafka核心组件 (1)replication(副本).partition(分区) 一个topic可以有多个副本,副本的数量决定了有多少个broker存放写入的数据:副本是以partitio ...

  5. Visual Studio的安装应用及单元测试

    新建项目—Visual C#—类库 一.Visual Studio的安装 这可能是自己安装软件用的的最长时间的一次 ..刚下载完安装的时候灰常的尴尬,因为2013版本和2015的版本都是不支持在win ...

  6. Python日志模块简单使用

    def loginfo(info): # create logger logger = logging.getLogger('[cpu and mem]**********') # Set defau ...

  7. PHP中Cookie的使用

    1.什么是Cookie? Cookie保存在客户端浏览器中,cookie是Http头的一部分,通过浏览器请求页面时,它会被通过Http头的形式发送过去.被请求的页面,可以通过PHP来获取cookie的 ...

  8. Oracle 导入单表数据

    1. 测试一下 删除某一张表,然后 通过 expdp 数据库泵的备份来恢复数据. 测试过程 ) from bizlog COUNT() ---------- 151 drop table bizlog ...

  9. golang curl

    /** 1.可设置代理 2.可设置 cookie 3.自动保存并应用响应的 cookie 4.自动为重新向的请求添加 cookie */ package curl import ( "net ...

  10. PHP阿里云云解析签名, 通过API 绑定域名到动态 ip

    <?php date_default_timezone_set("GMT"); //绑定 ip 到域名 Ali::Obj()->UpdateDomainRecord() ...