<!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. 用python的time库写一个进度条

    运算符 算数运算 如a=10,b=20 +两个数相加 a+b=30 -两个数相减 a-b=-10 两个数相乘 a****b =200 /两个数相除b/a=2 %取模,并返回余数b%a=0 幂,a*** ...

  2. bayaim_当前国内外Hadoop的实际使用案例

    当前国内外Hadoop的实际使用案例 说到Hadoop,很多朋友都想知道到底它是如何被应用的呢?通过下文,笔者就向大家介绍一下具体的情况. 1.Yahoo Yahoo是Hadoop的最大支持者,截至2 ...

  3. Troubleshooting ORA-30013 Error (Doc ID 1578717.1)

    Troubleshooting ORA-30013 Error (Doc ID 1578717.1) APPLIES TO: Oracle Database - Enterprise Edition ...

  4. Python类定义、属性、初始化和析构

    类的定义,属性和方法概念 方法中self的作用和意义 初始化( __init__ ) 和 析构方法( __del__ ) 类的定义 class 类名 实例 实例名 = 类名() 一个“实例”的“特征” ...

  5. kettle教程---增量更新

    以下操作都在5.0.1版本下进行开发,其余版本可以进行自动比对 在平时工作当中,会遇到这种情况,而且很常见.比如:增量抽取(每隔2个小时抽取截至到上次抽取时间的记录) 一.操作前提: 存在3张表,源表 ...

  6. 30.Java基础_接口_抽象类_具体类实现案例

    public interface SpeakEnglish { public abstract void speak(); } public abstract class Person { priva ...

  7. 浅谈[].slice.call(arguments, 1)

    今天在跟踪调试项目的代码时,发现在一个function中用到了这么一段[].slice.call(arguments, 1) 的代码.心中便起了疑惑,对于slice 和 call 的方法,倒是不怎么陌 ...

  8. 微信小程序picker重写，精确到时分秒

    https://developers.weixin.qq.com/miniprogram/dev/component/picker.html 微信小程序提供的picker组件,只精确到分,项目中需要秒 ...

  9. Django CSRF

    CSRF(Cross-site request forgery)跨站请求伪造 django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewM ...

  10. ESA2GJK1DH1K升级篇: STM32远程乒乓升级,基于Wi-Fi模块(ESP8266)AT指令TCP透传方式,MQTT通信控制升级(加入数据校验)

    前言 这节演示下,上两节写的利用MQTT来控制STM32控制的程序 测试准备工作(默认访问我的服务器,改为自己的服务器,请看后面说明) 一,下载BootLoader程序(请自行下载) 首先BootLo ...