<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="vue.js" type="text/javascript" charset="UTF-8"></script>

    </head>

    <body>

        <div id="app">

            <input v-model="message" placeholder="edit me">

            <p>Message is: {{ message }}</p>

            <span>Multiline message is:</span>

            <p style="white-space: pre-line;">{{ message }}</p>

            <br>

            <textarea v-model="message" placeholder="add multiple lines"></textarea>

            <br>

            <input type="checkbox" id="checkbox" v-model="checked">

            <label for="checkbox">吃饭没</label>选中状态：{{ checked }}

            <br>

            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">

            <label for="jack">Jack</label>

            <input type="checkbox" id="john" value="John" v-model="checkedNames">

            <label for="john">John</label>

            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">

            <label for="mike">Mike</label>

            <br>

            <span>Checked names: {{ checkedNames }}</span>

            <br>

            <input type="radio" id="one" value="One" v-model="picked">

            <label for="one">One</label>

            <br>

            <input type="radio" id="two" value="Two" v-model="picked">

            <label for="two">Two</label>

            <br>

            <span>Picked: {{ picked }}</span>

            <button @click="submit">提交</button>

            <br>

            <select v-model="selected">

                <option disabled value="">请选择</option>

                <option value="1">A</option>

                <option value="2">B</option>

                <option value="3">C</option>

            </select>

            <span>Selected: {{ selected }}</span>

            <br>

            <select v-model="selected" multiple style="width: 50px;">

                <option>A</option>

                <option>B</option>

                <option>C</option>

            </select>

            <br>

            <span>Selected: {{ selected }}</span> aaa

            <div id="components-demo">

                <button-counter title="title1:" @clicknow="clicknow">

                    <h2>123</h2>

                </button-counter>

                <button-counter></button-counter>

            </div>

        </div>

        <script type="text/javascript">

            Vue.component('button-counter', {

                props:['title'],

                data: function() {

                    return {

                        count: 0

                    }

                },

                template: '<div><h1></h1><button v-on:click="clickFun">{{title}}You clicked me {{ count }} times.</button><slot></slot></div>',

                methods:{

                    clickFun:function(){

                        this.count++;

                        this.$emit('clicknow',this.count);

                    }

                }

            })

            var data = {

                message: '',

                checked: false,

                checkedNames: [],

                picked: 'X',

                selected: ''

            }

            var app = new Vue({

                el: '#app',

                data: data,

                methods: {

                    submit: function() {

                        var postData = {

                            picked: this.picked,

                            message1: this.message

                        };

                        console.log(JSON.stringify(postData));

                    },

                    clicknow:function(e){

                        console.log(e);

                    }

                },

            })

        </script>

        <style>

        </style>

    </body>

</html>

Vue笔记3的更多相关文章

  1. Vue笔记目录

    Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待

  2. 《Vue笔记01: 我与唐金州二三事》

    最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...

  3. Vue笔记--通过自定义指令实现按钮操作权限

    经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...

  4. Vue笔记（有点乱）

    Vue学习笔记(2019.7.31) 目录 Vue学习笔记(2019.7.31) vue 基本指令用法 v-cloak v-text v-html v-bind v-on 跑马灯 v-on v-mod ...

  5. 一个后端开发的 Vue 笔记【入门级】

    一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...

  6. vue笔记

    安装vue脚手架工具 sudo cnpm install -g vue-cli

  7. vue笔记 递归组件的使用

    递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...

  8. vue笔记-列表渲染

    用v-for把一个数组对应为一组元素 使用方法:v-for="(item,index) in items"//也可以使用of替代in { items:源数组 item:数组元素迭代 ...

  9. vue笔记-条件渲染

    条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...

  10. 【Vue笔记】-- 详解vue生命周期

    针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...

随机推荐

  1. DDoS的攻击方法

    DDoS攻击 DDoS攻击的方法 攻击网络带宽资源 我们可以采用对目标的网络带宽资源进行攻击,目的就是浪费对方有限的网络带宽资源,使得目标服务出现网络滞缓直至网络带宽资源匮乏,无法访问或访问速度慢. ...

  2. 8.智能快递柜SDK(联网型锁板)

    1.智能快递柜(开篇) 2.智能快递柜(终端篇) 3.智能快递柜(通信篇-HTTP) 4.智能快递柜(通信篇-SOCKET) 5.智能快递柜(通信篇-Server程序) 6.智能快递柜(平台篇) 7. ...

  3. [日常] 修复了grub引导问题

    上周遇到的神奇引导问题竟然被鬼使神差的修复好了.因为我的电脑是64位的也就是x86_64架构,并且是UEFI模式下,但是之前装的grub一直是grub-传统,并且一直是i386-pc平台也就是32位的 ...

  4. 开始认识java

    1.java发展历史                              1991年   詹姆斯·高斯林 (James Gosling)  SUN公司Green项目(消费类电子产品) Oak  ...

  5. 大宗商品交易与风险管理（CTRM）软件产品介绍

    https://mp.weixin.qq.com/s/grA8MhryPfDB2PmBqsao4Q 从全球范围来看,大宗商品行业风险管理领域的主流软件产品是CTRM系列.CTRM是Commodity ...

  6. LINUX下查看点云图————point cloud（.ply .vtk .pcd）

    首先,你要确定点云的格式:.pcd(.vtk) 还是 .ply 如果是.pcd(.vtk),那么可以用pcl工具查看: 1.安装pcl,官网链接点击打开链接 sudo add-apt-reposito ...

  7. arduino (3) 控制sim900A发送短信

    狗屎佳世通旗舰店,卖的什么破玩意sim900a芯片,不支持联通卡,还生明模块支持双卡的 之前买的esp8266-07都是内存偷工减料 买的液体浊度传感器给的原理图也不给基本接线. 差评垃圾店,你敢卖就 ...

  8. linux下如何查看自己都装了什么服务

    service --status-all 先把rabbitmq进程杀掉 ps -ef | grep rabbitmq | grep -v grep | awk '{print $2}' | xargs ...

  9. 安装更新时出现一些问题，但我们稍后会重试。如果你继续看到此错误，并且想要搜索 Web 或联系支持人员以获取相关信息，以下信息可能会对你有帮助: (0x80070426)

    安装更新时出现一些问题,但我们稍后会重试.如果你继续看到此错误,并且想要搜索 Web 或联系支持人员以获取相关信息,以下信息可能会对你有帮助: (0x80070426) https://answers ...

  10. 快速缓存刷新CDN节点的方法

    缓存刷新方式有 URL 刷新.目录刷新和 URL 预热.URL 刷新是以文件为单位进行缓存刷新.目录刷新是以目录为单位,将目录下的所有文件进行缓存刷新.URL 预热是以文件为单位进行资源预热. 刷新后 ...