<!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. 关于在 ASP.NET 的 Global.asax 中 Application_Error 方法内，设置跳转到自定义错误页无效的问题

    转自:https://www.cnblogs.com/OpenCoder/p/5070645.html 在 Global.asax 中的 Application_Error 方法中,使用 Respon ...

  2. 安卓开发笔记（三十四）:Material Design框架实现优美的左侧侧滑栏

    首先我们先上图:  下面是主页面的代码,activity_main.xml: <?xml version="1.0" encoding="utf-8"?& ...

  3. matlab C程序

    通过把耗时长的函数用c语言实现,并编译成mex函数可以加快执行速度 Matlab本身是不带c语言的编译器的,所以要求你的机器上已经安装有VC,BC或Watcom C中的一种 注:在Matlab里,矩阵 ...

  4. 模板引擎Jinja2的基本用法

    Flask提供的模板引擎为Jinja2,易于使用,功能强大.模板仅仅是文本文件,它可以生成任何基于文本的格式(HTML.XML.CSV.LaTex 等等). 它并没有特定的扩展名, .html 或 . ...

  5. vue组件懒加载

    vue2组件懒加载浅析 一. 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载. 二.为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大, ...

  6. MySQL数据库（三）锁机制

    MyISAM默认使用表级锁,不支持行级锁 InnoDB默认使用行级锁,也支持表级锁 表级锁:开销小,加锁快:不会出现死锁:锁定粒度大,发生锁冲突的概率最高,并发度最低. 行级锁:开销大,加锁慢:会出现 ...

  7. web网页利用JavaScript实现对摄像头的调用

    实现效果: 代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...

  8. 渗透测试学习 二十三、常见cms拿shell

    常见cms 良精.科讯.动易.aspcms.dz 米拓cms.phpcms2008.帝国cms.phpv9 phpweb.dedecms 良精 方法: 1.数据库备份拿shell 上传图片——点击数据 ...

  9. openpyxl的简单使用

    openpyxl的简单使用 openpyxl 操作excel的库,只能操作xlxs 文件, xlrd/xlwt这两个库能兼容xls(2003版) 安装 pip install openpyxl如果ex ...

  10. else if 使用注意

    写出一个程序,接受一个有字母和数字以及空格组成的字符串,和一个字符,然后输出输入字符串中含有该字符的个数.不区分大小写. 例如:输入:ABCDE A 输出:1 错误代码如下: #include < ...