<!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. k8s之使用secret获取私有仓库镜像

    一.前言 其实这次实践算不上特别复杂,只是在实践过程中遇到了一些坑,以及填坑的方法是非常值得在以后的学习过程中参考借鉴的 二.知识准备 1.harbor是一个企业级的镜像仓库,它比起docker re ...

  2. highcharts多个Y轴

    http://blog.sina.com.cn/s/blog_6a53599101019qax.html 多个Y轴的实现方法在于把yAxis设置成一个数组,里面的一个对象代表一条Y轴,利用opposi ...

  3. Web Workers文档

    Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法.线程可以执行任务而不干扰用户界面.此外,他们可以使用XMLHttpRequest执行 I/O  (尽管responseXML和 ...

  4. redis启动停止+密码认证

    redis启动停止命令 ./bin/redis-server redis.conf ./bin/redis-cli -h 127.0.0.1 -p 6379 shutdown flushall ——& ...

  5. 专业实训题目需求分析(3D推箱子)

    业务需求:    游戏提供主菜单让玩家进行游戏设置.帮助说明,推箱子的小人可以前后左右转动,箱子可以被上下左右的推动,要有关卡设置,障碍物设置,游戏提供背景音乐的功能,要实现3D效果. 面向的用户类型 ...

  6. Linux命令（十八） 压缩或解压缩文件和目录 gzip gunzip

    目录 1.命令简介 2.常用参数介绍 3.实例 4.直达底部 命令简介 和 zip 命令类似,gzip 用于文件的压缩,gzip压缩后的文件扩展名为 ".gz",gzip默认压缩后 ...

  7. jenkins 添加 k8s 云

    同事的jenkins 链接自己的 k8s 总是出问题 给出了资料和服务器 进行处理. 同时给出的参考资料:https://blog.csdn.net/diantun00/article/details ...

  8. Docker一些常用命令

    1.启动Docker服务 service docker start 2.查看所有镜像 docker images 3.查看正在运行的容器 docker ps 4.查看所有容器 docker ps -a ...

  9. POJ 2584 T-Shirt Gumbo

    T-Shirt Gumbo Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 3689   Accepted: 1755 Des ...

  10. MT【105】待定系数算最大最小

    已知$x,y,z>0$,则$max\{2x,\frac{1}{y},y+\frac{1}{x}\}$的最小值______ 分析:首先关注到$2x=\frac{1}{y}=y+\frac{1}{x ...