<!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. CSAPP lab2 二进制拆弹 binary bombs phase_6

    给出对应于7个阶段的7篇博客 phase_1  https://www.cnblogs.com/wkfvawl/p/10632044.htmlphase_2  https://www.cnblogs. ...

  2. week7：个人博客作业

    这周有2个需要注意的地方. 1,课上 这周是由张翼飞老师讲的课,上周已经听过老师讲的一节课了,这周发现,这个老师讲课是理论+案例,我每节课都在第一排坐的,我不知道其他人是什么想法,我是一上课,老师讲理 ...

  3. [转帖] K8S 常用命令

    k8s常用命令  原贴地址 查看集群信息: [root@kubernetes-master pods]# kubectl cluster-info kubectl cluster-info展示结果 k ...

  4. 2013长春网赛1005 hdu 4763 Theme Section（kmp应用）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4763 题意:给出一个字符串,问能不能在该串的前中后部找到相同的子串,输出最长的字串的长度. 分析:km ...

  5. Java学习之StringBuffer

              1.类介绍 ①线程安全的可变字符串序列,一个类似于String的字符串缓冲区,但是不能修改(就是不能通过加号+连接,String就可以) ②StringBuffer和String类 ...

  6. P4932 浏览器

    题目背景 __stdcall在用Edge玩slay的时候,鼠标会经常失灵,这让她十分痛苦,因此她决定也要让你们感受一下Edge制造的痛苦. 题目描述 __stdcall给了你n个点,第i个点有权值x[ ...

  7. (转)远程连接webservice遇到无法访问的问题解决办法

    原帖:http://stu-xu.i.sohu.com/blog/view/170429191.htm 如果在本地测试webservice可以运行,在远程却显示“测试窗体只能用于来自本地计算机的请求” ...

  8. SQLServer过期的解决方案

    看图吧,不喜欢说话,图里面我都打备注了 0SQLService异常 1找到安装中心 2升级版本 3监测ing 4输入升级key 5同意并下一步 6下一步 7下一步 8下一步 9收工 10可以打开了

  9. python之旅：网络编程

    一 客户端/服务器架构 1.硬件C/S架构(打印机) 2.软件C/S架构 互联网中处处是C/S架构 如黄色网站是服务端,你的浏览器是客户端(B/S架构也是C/S架构的一种) 腾讯作为服务端为你提供视频 ...

  10. Gulp安装笔记(转)已经测试过

    前言 总的来说,玩gulp的流程是这样的: 安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务 ...