<!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. 容器flappybird游戏——图文操作指引贴

    第一步:打开华为云容器引擎产品首页,点击免费体验馆   第二步:进入免费体验馆,点击体验按钮,获得3天免费集群     第三步:创建免费集群完成后,进入产品console页,如图所示:   第四步:如 ...

  2. PAT甲题题解-1053. Path of Equal Weight (30)-dfs

    由于最后输出的路径排序是降序输出,相当于dfs的时候应该先遍历w最大的子节点. 链式前向星的遍历是从最后add的子节点开始,最后添加的应该是w最大的子节点, 因此建树的时候先对child按w从小到大排 ...

  3. tomcat运行JSP时产生的错误：”javax.servlet.servletexception: java.lang.nosuchmethoderror”

    这个错误其实是多次重复编译JAVA文件导致的,需要clean操作,简单的来说就是删除tomcat下work文件夹中工作空间,也可以理解为自己的虚拟路径,比如我运行的jsp的路径:localhost:8 ...

  4. Daily Scrum - 11/23

    今天更新blog时发现了老师对我们daily scrum提的要求,从明天起除了简要记录组会的主要内容之外,还会总结上一个工作日每个组员的工作进度.代码提交情况和燃尽图. 今天会议内容主要是人千.章玮同 ...

  5. [转贴] VIM 常用快捷键 --一直记不住

    vim 常用快捷键  原帖地址: https://www.cnblogs.com/tianyajuanke/archive/2012/04/25/2470002.html 1.vim ~/.vimrc ...

  6. vue 使用element-ui upload文件上传之后怎么清空

    首先上传组件中一定要绑定这两个属性: ref,和 :file-list,如果没有ref,即使 用 this.$refs.upload.clearFiles()也不行,因为这时候this.$refs为空 ...

  7. 继承自NSObject的不常用又很有用的函数（1）

    初始化阶段 —— load 和 initialize load函数 原型: +(void)load 当类被引用进程序的时候会执行这个函数. 在一个程序开始运行之前(在main函数开始执行之前),在库开 ...

  8. Luogu4717 【模板】快速沃尔什变换（FWT）

    https://www.cnblogs.com/RabbitHu/p/9182047.html 完全没有学证明的欲望因为这个实在太好写了而且FFT就算学过也忘得差不多了只会写板子 #include&l ...

  9. MT【86】两个绝对值之和最大

    分析:这里只需要注意到$(|x|+|y|)_{max}=max\{|x+y|,|x-y|\}$,所以只需求$max\{|20a|,|14b|\}$ 进而变成熟悉的反解系数问题.容易知道最大值为$a=2 ...

  10. 洛谷P2633 Count on a tree（主席树，倍增LCA，树上差分）

    洛谷题目传送门 题目大意 就是给你一棵树,每个点都有点权,每次任意询问两点间路径上点权第k小的值(强制在线). 思路分析 第k小......又是主席树了.但这次变成树了,无法直接维护前缀和. 又是树上 ...