<!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. git初次推送

    第一次配置Git git config --global user.name "xxxx" git config --global user.email "xxxx@xx ...

  2. LeetCode 606. Construct String from Binary Tree根据二叉树创建字符串 (C++)

    题目: You need to construct a string consists of parenthesis and integers from a binary tree with the ...

  3. linux第十八章学习笔记

    第十八章 调试 内核级开发的调试工作远比用户级开发艰难,它带来的风险比用户级别更高. 一.准备开始 1. 准备工作需要: 一个bug 一个藏匿bug的内核版本 相关内核代码的知识和运气 2. 在用户级 ...

  4. 读书笔记（chapter1-2）

    一.linux内核简介 1.1unix的历史 1.unix强大的根本原因:1.unix很简洁,仅仅提供几百个系统调用并且有一个非常明确的设计目的:2.在unix中,所有的东西都被当作文件对待:3.un ...

  5. 第二个Sprint冲刺第 八天（燃尽图）

    因为今天停电了,所以我们也休息一天!

  6. 四则运算app第一阶段冲刺

    第一阶段冲刺 [开发环境]:eclipse [开发项目]:小学生四则运算APP [开发人员]:郑胜斌 http://www.cnblogs.com/zsb1/ 孔德颖 http://www.cnblo ...

  7. div z-index无论设置多高都不起作用

    这种情况发生的条件有三个: 1.父标签position属性为relative: 2.当前标签无position属性(relative,absolute,fixed): 3.当前标签含有浮动(float ...

  8. 这家伙好像还不错 ZH奶酪-张贺

    http://www.cnblogs.com/CheeseZH/archive/2012/11/23/2783846.html

  9. [转帖] k8s kubectl 命令行技巧

    https://jimmysong.io/posts/kubectl-cheatsheet/ Kubectl Cheatsheet kubectl命令技巧大全Posted on November 3, ...

  10. java使用JMail通过QQ邮件服务器实现自动发送邮件

    前言:项目开发的过程中,我们项目需要一个自动发送邮件提醒的小功能,于是简单的研究了一下java的JMail来实现自动发送邮件的功能.已被后期需要参考. 一.准备 实现的原理很简单:发送人 , 中转的邮 ...