Vue笔记3
<!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的更多相关文章
- Vue笔记目录
Vue笔记目录 一.Vue.js介绍 二.vue基础-vue-cli(vue脚手架) ...持续更新中,敬请期待
- 《Vue笔记01: 我与唐金州二三事》
最近我在收看唐金州在极客时间发布的<vue从入门到精通>,颇有收获. 唐金州,一点资讯前端技术专家,曾在蚂蚁金服就职,也是开源组件库ant design vue的作者,虽然唐老师写的ant ...
- Vue笔记--通过自定义指令实现按钮操作权限
经常做中后台系统,此类系统的权限是比较重要,拿自己做过的一些项目做个笔记. Vue实现的中后台管理系统.按钮操作权限的空置一般都是通过自定义指令Vue.directive. <el-button ...
- Vue笔记（有点乱）
Vue学习笔记(2019.7.31) 目录 Vue学习笔记(2019.7.31) vue 基本指令用法 v-cloak v-text v-html v-bind v-on 跑马灯 v-on v-mod ...
- 一个后端开发的 Vue 笔记【入门级】
一 前言 最近找了些教程,顺带着趴在官网上,看了看 Vue 的一些内容,入门的一些概念,以及基础语法,还有一些常用的操作,瞄了一眼,通篇文字+贴了部分代码 9000 多字,入门语法什么的还是很好理解的 ...
- vue笔记
安装vue脚手架工具 sudo cnpm install -g vue-cli
- vue笔记 递归组件的使用
递归组件 什么是递归组件? 组件自身去调用组件自身. 代码示例 DetailList.vue(子组件-递归组件) <template> <div> <div class= ...
- vue笔记-列表渲染
用v-for把一个数组对应为一组元素 使用方法:v-for="(item,index) in items"//也可以使用of替代in { items:源数组 item:数组元素迭代 ...
- vue笔记-条件渲染
条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...
- 【Vue笔记】-- 详解vue生命周期
针对于Vue的生命周期进行详细的说明,方面加深对各个方法的引用. 引言: 前几天重新回顾vue官网时,看到vue的生命周期,想着自己用vue开发了快一年了,就总结总结vue知识,再次加深自己对vue的 ...
随机推荐
- leaflet-webpack 入门开发系列一初探篇（附源码下载）
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- 使用 gitlab 进行代码管理
这里使用 gitlab 做服务器, 客户端主要使用 git extensions. ============================= gitlab 项目成员类型: ============= ...
- 元祖,range,字典,结构,fromkeys的使用
3.5.3 元祖 关键字 tuple tu=(1,2,3,'你好',True) print(tu) 元祖是有序,不可变数据,不能进行修改, 支持索引查看 存储一些比较重要的信息,在配置文件中使用 存放 ...
- PHP 自动加载
回顾 开始的时候, 如果想在一个php文件中使用其它文件的类或方法, 需要通过include/require方法将文件包含进来. 这种方法的缺点也很明显: 如果需要引入很多文件, 就需要很多的incl ...
- 多线程时，请求执行不是按顺序的，可添加Critical Section Controller(临界部分控制器)，执行顺序是固定的，但执行一段时间后，该逻辑器下的请求不再循环，无解ing
- LG1337 [JSOI2004]平衡点 / 吊打XXX 模拟退火
问题描述 LG1337 题解 模拟退火模板 记住概率公式: \(exp(\frac{dealt}{T}) \times rand \ge R_A^ND^M_AX\) zzk太欧了,我交了一版没过他来了 ...
- 洛谷P3206 [HNOI2010]城市建设
神仙题 题目大意: 有一张\(n\)个点\(m\)条边的无向联通图,每次修改一条边的边权,问每次修改之后这张图的最小生成树权值和 话说是不是\(cdq\)题目都可以用什么数据结构莽过去啊-- 这道题目 ...
- 第四组 团队Git现场编程实战
组员职责分工 组员 分工 林涛(组长) 分配任务.整理数据.写博客 童圣滔 UI界面制作 林红莲 UI界面制作 潘雨佳 测评出福州最受欢迎的商圈 于瀚翔 测评出福州最受欢迎的商圈 覃鸿浩 测评出福州人 ...
- Xshell删除键不好使：删除显示退格^H
Xshell删除键不好使:删除显示退格^H 1.问题: Xshell不能删除,删除时出现 退格^H 2.解决方案: 点击上方:文件→属性→终端→键盘,把 delete 和 backspace 序列改为 ...
- es6的map()方法解释
es6的map()方法解释 map方法的作用不难理解,即“映射”,也就是原数组被“映射”成对应新数组.下面这个例子是数值项求平方: var data = [1, 2, 3, 4]; var arr ...