<!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. E203 CSR rtl实现分析

    CSR状态控制寄存器,每个hart都有自己的CSR.对于每个hart,可以配置的状态寄存器是4k.CSR寄存器的功能见:https://www.cnblogs.com/mikewolf2002/p/1 ...

  2. Wireshark使用技巧：提取VOIP通话中的音频流

    "Wireshark的RTP流分析功能实战." 在VOIP协议的分析过程中,常常会遇到一些标准协议承载的语音传输,如以SIP.H.323为控制协商协议,RTP为语音数据协议的VOI ...

  3. NumPy实现数组的拼接和分裂

    一.数组的拼接 import numpy as np x=np.array([,,]) x2=np.array([,,])np.concatenate([x,x2]) 输出:array([1, 2, ...

  4. Android框架Volley之：ImageRequest请求实现图片加载

    首先我们在项目中导入这个框架: implementation 'com.mcxiaoke.volley:library:1.0.19' 在AndroidManifest文件当中添加网络权限: < ...

  5. linux 创建虚拟块设备，制作文件系统并挂载，用于测试lustre

    1.制作块文件 3 个 [root@localhost yaoxu]# [root@localhost yaoxu]# [root@localhost yaoxu]# 2.创建回环设备 [root@l ...

  6. CentOS 7 Apache 绑定域名和网站

    CentOS 7 Apache 绑定域名和网站适用场景一台服务器,运行有多个网站,每个网站都希望用户直接通过二级域名来访问,而不是同一个域名通过子目录来访问 配置过程确定自己的 Apache 服务器的 ...

  7. JAVA中this和super用法

    参考网上资料和自行理解总结java中this和super中各自用法及其差异 <一>. this的用法 构造方法是创建java对象的重要途径,通过new关键字调用构造器时,构造器返回该类的对 ...

  8. 5. this关键字

    一.this关键字概述 1. this作为对象的引用,它总是指向调用该方法的对象 2. this的最大作用:让类中的一个方法访问该类中的另一个方法或实例变量 二.this关键字的两种用法 1. 在方法 ...

  9. python 连接数据库，查询结果写入数据到excel

    使用Python链接数据库查询数据,并将查询结果写入到Excel中,实现方法上主要有两步,第一,查数据,第二,写Excel. 一.导入需要的包 import time import xlwt from ...

  10. Tensorflow之多元线性回归问题（以波士顿房价预测为例）

    一.根据波士顿房价信息进行预测,多元线性回归+特征数据归一化 #读取数据 %matplotlib notebook import tensorflow as tf import matplotlib. ...