vue样式操作与事件绑定
Vue笔记
1 Vue实例 （VM）
var vm = new Vue({
el:'#app', //挂载元素
//数据
data: {
title:'值',
....
dataList:[]
},
//方法
methods: {
方法名: function(){
},
...
},
//计算属性
computed: {
属性名： function(){
return 值
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed</title>
</head>
<body>
<div id="app">
<div>
姓：<input type="text" v-model='first_name' />
</div>
<div>
名：<input type="text" v-model='last_name' />
</div>
<!-- <p>姓名：{{ full_name() }}</p> -->
<!-- 采用计算方式的变量可以不在data中赋初值 -->
<p>姓名：{{ full_name }}</p>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
first_name: '',
last_name: ''
},
// methods: {
// full_name: function () {
// return this.first_name + " " + this.last_name;
// }
// },
// 一个变量依赖于多个变量，一般对该变量采用计算处理
computed: {
full_name: function () {
return this.first_name + " " + this.last_name;
}
}
})
</script> </html>
computed
//监听属性
watch: {
属性名: function(){
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>computed</title>
</head>
<body>
<div id="app">
<div>
姓名：<input type="text" v-model='full_name' placeholder="姓与名以空格隔开" />
</div>
<p>姓：{{ first_name }}</p>
<p>名：{{ last_name }}</p>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: ''
},
watch: {
full_name: function () {
// 监听full_name，然后拆分为姓与名
var fname = this.full_name;
var arr = fname.split(' ');
this.first_name = arr[0];
this.last_name = arr[1];
}
}
})
</script> </html>
watch
// delimiters
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>delimiters</title>
</head>
<body>
<div id="app">
{{ msg }} [[ msg ]] ${ msg }
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
msg: '数据'
},
// delimiters配置自定义绑定符号
// 值为拥有两个元素的数组，元素为字符串形式
delimiters: ['${', '}']
})
</script> </html>
delimiters
//钩子方法
//数据创建成功 data methods computed watch
//在这里从服务器获取数据
created: function(){
},
//vue实例 已经挂载到元素上
// dom操作 在这里
mounted: function(){
}
})
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生命周期钩子</title>
</head>
<body>
<div id="app">
{{ msg }}
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
msg: '数据'
},
// 该钩子方法触发：vue实例刚被创建(只拥有内存位置),其他任何操作都未执行
// 就满足的beforeCreate钩子的触发条件，系统就会回调该方法的实现
// 用户在该触发条件情况下想去完成某些逻辑，那么就去实现该钩子
beforeCreate: function () { },
/*
// 系统内部调用
if (beforeCreate) {
beforeCreate()
}
// ...
// ...
if (created) {
created()
}
if (beforeMount) {
beforeMount()
}
// ...
*/ // 数据与事件加载完毕，el并没有进行挂载
created: function () {
// 获取想要的数据(请求后台)
// 事件的解绑或换绑或重新绑定
// 对虚拟DOM进行修改
},
// DOM树加载完毕，el渲染完毕
mounted:function () {
// 可能需要对DOM进行操作(交给模块处理)
}
})
</script> </html>
生命周期钩子
数据驱动
Vue.set() 或者 vm.$set()
vue实例 的对象
vm.$data
vm.$el
vm.$watch()
Vue.set(数组, 索引, 新值)
Vue.set(对象, 属性, 新值)
2 Vue视图 （V） 模板
2.1 插值
{{ }}
<p v-text=""></p>
<p v-once>{{}}p>
<p v-html=""></p>
防止闪烁 v-cloak
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>视图</title>
<style type="text/css">
p {
border: 1px solid #ff6700;
height: 30px;
line-height: 30px;
}
.abc {
border-color: yellowgreen;
}
[class] {
border-width: 5px;
} [v-cloak] {
display: none;
}
</style>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<!-- <div id="app" v-cloak> -->
<div id="app">
<!-- v-model实现数据的双向绑定 -->
<input type="text" v-model='msg'>
<input type="text" v-model='msg'>
<p>{{ msg }}</p>
<p v-text='msg'></p>
<!-- 只赋值一次 -->
<p v-once>{{ msg }}</p>
<!-- 可以解析html语法的标签 -->
<p v-html='msg'></p> <!-- 属性的绑定：属性值有变量控制 v-bind:属性名 :属性名 -->
<!-- <p class="active"></p> -->
<!-- <p v-bind:class='active'></p> -->
<p :class='active'></p> <!-- 事件的绑定：事件值为函数名(带或不带参数列表) v-on:事件名 @事件名 -->
<p @dblclick='func'></p> </div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
msg: '初值',
active: 'abc'
},
methods: {
func: function () {
alert('呵呵')
}
}
})
</script>
</html>
vue视图相关操作
2.2 绑定属性
v-bind:属性=值
:属性=值
v-model="" 用于表单控件 双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主要指令v-bind</title>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css">
.a {
background-color: red;
}
.b {
color: green;
}
</style>
</head>
<body>
<div id="app">
<!-- v-bind:绑定系统预定义属性 -->
<!-- 字符串abc -->
<p title="abc">p段落</p>
<!-- 1、变量abc，需要初始化 -->
<p v-bind:title="abc">p段落</p>
<!-- 2、如何直接将abc作为字符串绑定到属性 -->
<p v-bind:title="'abc'">p段落</p>
<!-- 3、v-bind简写为: -->
<p :title="'ABC'">p段落</p> <!-- 4、绑定多个变量 --> <!-- i：以数组形式进行赋值 -->
<!-- a, b为两个变量 -->
<!-- 变量值可以有data提供 -->
<!-- <div :class="[a, b]">12345</div> --> <!-- ii：以对象形式进行赋值 -->
<!-- a，b为两个class值 -->
<!-- class值只取true | false -->
<!-- 非空均视为true，否则视为false -->
<!-- <div :class="{a: 'A', b: 'B'}">67890</div> -->
<!-- <div :class="{a: true, b: true}">67890</div> --> <!-- iii -->
<div :class="[{a: true}, {b: true}]">呵呵嘻嘻哈哈</div> <!-- 总结 -->
<!-- [], 中出现的值，作为变量，变量值来源于data，且最终将来源于data的数据作为属性值赋值给v-bind绑定的属性 -->
<!-- {}, 中出现的键(key)，直接作为v-bind绑定的属性的值，而键(key)对应的值(value)是决定键是否起效，值(value)的取值只为true|false --> <a :style="color" href="">百度</a>
<a :style="{color: 'red', backgroundColor: 'black'}" href="">京东</a>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
abc: 'ABC',
a: 'a',
b: 'b',
// color: 'color: red'
color: {
color: 'red',
// 支持驼峰命名法
backgroundColor: 'orange'
}
}
})
</script>
</html>
vue指令之v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主要指令v-model</title>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css"> </style>
</head>
<body>
<div id="app">
<!-- v-model针对于表单元素 --> <form action="" method="get">
<!-- 1、双向绑定：服务于文本输入框 -->
<!-- v-model存储的值为输入框的value值 -->
<div>
<input type="text" name="usr" v-model="in_val">
<input type="password" name="ps" v-model="in_val" >
<textarea name="info" v-model="in_val"></textarea>
</div> <!-- 2、单选框 -->
<div>
<!-- 单选框是以name进行分组，同组中只能发生单选 -->
<!-- v-model存储的值为单选框的value值 -->
男：<input type="radio" name="sex" value="男" v-model="ra_val">
女：<input type="radio" name="sex" value="女" v-model="ra_val">
{{ ra_val }}
</div> <!-- 3、单一复选框 -->
<!-- v-model存储的值为true|false -->
<!-- 或者为自定义替换的值 -->
<div>
<input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
{{ sin_val }}
</div> <!-- 4、多复选框 -->
<!-- v-model存储的值为存储值多复选框value的数组 -->
<div>
<input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
<input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
<input type="checkbox" value="不挑" name="cless" v-model='more_val' />
{{ more_val }}
</div> <input type="submit">
</form> </div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
in_val: '',
// 默认值可以决定单选框默认选项
ra_val: '男',
// 默认值为true，单一复选框为选中，反之false为不选中
sin_val: '',
// 数组中存在的值对应的复选框默认为选中状态
more_val: ['喜好女的','不挑']
}
})
</script>
</html>
vue指令之v-model
2.3 指令
v-bind
v-on
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>主要指令v-on</title>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css"> </style>
</head>
<body>
<div id="app">
<!-- 1、绑定系统预定义事件，事件值为函数 -->
<div v-on:click="fn1">{{ msg }}</div>
<!-- 2、v-on简写 -->
<div @click="fn2">{{ msg }}</div>
<!-- 3、传值 -- 默认传值 -- 事件 event -->
<div @click='fn3'>{{ msg }}</div>
<!-- 4、传值 -- 自定义值 -->
<div @click="fn4(msg, 88888)">{{ msg }}</div>
<!-- 5、传参 -- 自定义值 + 事件 -->
<div @click="fn5($event, msg)">{{ msg }}</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: '默认值'
},
methods: {
fn1: function () {
alert('呵呵')
},
fn2 () {
alert('嘻嘻')
},
fn3 (obj) {
console.log(obj)
},
fn4 (obj, num) {
console.log(obj, num)
console.log(this.msg)
},
fn5 (ev, msg) {
console.log(ev, msg)
}
}
})
</script>
</html>
vue指令之v-on
v-cloak
v-for
v-if
v-else
v-else-if
v-show
v-text
v-html
v-once
v-model
v-pre
2.4 条件渲染
v-if="表达式" 表达式的返回值是boolean
v-else
v-else-if
提高效率： 使用 key="唯一值" v-bind:key=""
v-show="布尔值"
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script type="text/javascript" src="js/vue.js"></script>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: red;
border-radius: 50%;
}
.bb {
width: 50px;
height: 50px;
border: 1px solid black;
border-radius: 50%;
font: 400 20px/50px 'STSong';
text-align: center;
user-select: none;
float: left;
margin-left: 20px;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.a {
width: 300px;
height: 200px;
}
.r {background: red}
.g {background: green}
.b {background: blue}
</style>
</head>
<body>
<div id="app">
<button @click="btnClick">切换</button>
<!-- 1、v-if取值为true|false -->
<!-- true将会被渲染|false不会被渲染(页面中不存在该标签) -->
<!-- <div class="box" v-if="isShow"></div> --> <!-- 2、v-show取值为true|false -->
<!-- true为渲染并显示，false虽然渲染到DOM上，但display以none形式存在 -->
<div class="box" v-show='false'></div> <!-- 3、v-if、v-else-if、v-else -->
<!-- 多分支条件 -->
<div class="wrap">
<!-- .bb.b$*3 -->
<div class="bb b1" @click='changeColor(0)'>红</div>
<div class="bb b2" @click='changeColor(1)'>绿</div>
<div class="bb b3" @click='changeColor(2)'>蓝</div>
</div>
<div>
<!-- 多分支一定存在判断，判断便会产生比较变量 -->
<div class="r a" v-if='tag == 0'></div>
<div class="g a" v-else-if='tag == 1'></div>
<div class="b a" v-else></div>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
isShow: false,
tag: 0
},
methods: {
// 通过方法控制绑定给v-if的值
btnClick: function () {
this.isShow = !this.isShow;
},
changeColor (num) {
this.tag = num;
}
}
})
</script>
</html>
条件渲染
2.5 v-for 列表渲染
v-for 通常都需要指定 key 保证唯一值
<p v-for="item in itemList">
<p v-for="(item,index) in itemList">
<p v-for="(val,key) in obj">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li>{{list[0]}}</li>
<li>{{list[1]}}</li>
<li>{{list[2]}}</li>
<li>{{list[3]}}</li>
<li>{{list[4]}}</li>
<li>{{list[5]}}</li>
<li>{{list[6]}}</li>
</ul>
<!-- 迭代数组 -->
<ul>
<!-- 变量it为集合list中被迭代出的元素 -->
<!-- 由v-for指令控制的标签会随元素的个数动态渲染 -->
<li v-for='it in list'>{{ it }}</li>
</ul> <!-- 迭代对象 -->
<div v-for='value in dic'>{{ value }}</div> <!-- 迭代除取值外的其他可迭代到的值 -->
<ul>
<li v-for="(v, i) in list">索引：{{i}} 名字：{{v}}</li>
</ul> <ul>
<li v-for="(v, k, i) in dic">{{i}} {{k}} {{v}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
list: ["张三", "李四", "王五", "赵六", "钱七", "egon", "monkey"],
dic: {'name': 'zero', 'age': 8, 'salary': 88888}
}
})
</script>
</html>
列表渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表渲染</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<!-- key属性：可以提高效率（通过不同的唯一key值建立缓存） -->
<div id="app">
<div v-for='(item,index) in list' :key='index' style="height: 30px">
<div v-for='(value, key, index) in item' :key='index + 10' style="float: left;">
{{key}} : {{value}}
</div>
</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
list: [
{'name': 'egon', 'age': 108},
{'name': 'monkey', 'age': 77},
{'name': 'zero', 'age': 8}
]
}
})
// items: [{'name': '张三'}, {'age': 18}, {'sex': '男'}]
// 通过[索引]取出数组中对应的值
// 通过.key取出对象中对应的值
</script>
</html>
复杂数据的列表表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>todoList</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<!-- 录入用户输入的数据，更新到指定的list中，通过vue的数据驱动特效，实时渲染到页面 -->
<div id="app">
<div>
<input type="text" v-model='value'>
<!-- 提交：将数据添加到list中 -->
<button @click='pushAction'>提交</button>
</div>
<ul>
<!-- 点击指定的li，将自身数据从list中移除，完成自身删除 -->
<li @click='deleteAction(index)' v-for='(item,index) in list' :key="index">{{ item }}</li>
</ul> </div>
</body>
<script type="text/javascript">
new Vue({
el: '#app',
// vue目前不支持索引直接操作数据，但可以通过数据类型对应的操作方法
data: {
value: '',
list: []
},
methods: {
pushAction () {
this.list.push(this.value);
this.value = ''
},
deleteAction (index) {
// alert(index)
this.list.splice(index, 1)
}
}
})
</script>
</html>
todoList
2.6 样式绑定
class绑定
<p :class="对象">
<p :class="数组">
<p :class="{类名:true/false, 类名:true/false}">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡 tabs</title>
<link rel="stylesheet" href="../dist/css/bootstrap.css">
<style>
#app {
margin:100px auto 0px;
width:800px;
}
.panel {
border-top:none;
}
</style>
</head>
<body> <div id="app">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li :class="{active: tab == 0}" @click="tab = 0"><a href="#">未付款订单</a></li>
<li :class="{active: tab == 1}" @click="tab = 1"><a href="#">未发货订单</a></li>
<li :class="{active: tab == 2}" @click="tab = 2"><a href="#">未收货订单</a></li>
<li :class="{active: tab == 3}" @click="tab = 3"><a href="#">未评价订单</a></li>
<li :class="{active: tab == 4}" @click="tab = 4"><a href="#">所有订单</a></li>
</ul> <div class="panel panel-default" v-show="tab === 0">
<div class="panel-body">
这是未付款的订单
</div>
</div> <div class="panel panel-default" v-show="tab === 1">
<div class="panel-body">
这是未发货的订单
</div>
</div> <div class="panel panel-default" v-show="tab === 2">
<div class="panel-body">
这是未收货的订单
</div>
</div> <div class="panel panel-default" v-show="tab === 3">
<div class="panel-body">
这是未评价的订单
</div>
</div> <div class="panel panel-default" v-show="tab === 4">
<div class="panel-body">
这是所有的订单
</div>
</div>
</div>
</div> </div> <script src="../dist/js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data: {
tab: 0
}
})
</script>
</body>
</html>
vue选项卡1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡 tabs</title>
<link rel="stylesheet" href="../dist/css/bootstrap.css">
<style>
#app {
margin:100px auto 0px;
width:800px;
}
.panel {
border-top:none;
}
</style>
</head>
<body> <div id="app">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li :class="{active: isTab(0)}" @click="setTab(0)"><a href="javascript:void(0)">未付款订单</a></li>
<li :class="{active: isTab(1)}" @click="setTab(1)"><a href="javascript:void(0)">未发货订单</a></li>
<li :class="{active: isTab(2)}" @click="setTab(2)"><a href="javascript:void(0)">未收货订单</a></li>
<li :class="{active: isTab(3)}" @click="setTab(3)"><a href="javascript:void(0)">未评价订单</a></li>
<li :class="{active: isTab(4)}" @click="setTab(4)"><a href="javascript:void(0)">所有订单</a></li>
</ul> <div class="panel panel-default" v-show="isTab(0)">
<div class="panel-body">
这是未付款的订单
</div>
</div> <div class="panel panel-default" v-show="isTab(1)">
<div class="panel-body">
这是未发货的订单
</div>
</div> <div class="panel panel-default" v-show="isTab(2)">
<div class="panel-body">
这是未收货的订单
</div>
</div> <div class="panel panel-default" v-show="isTab(3)">
<div class="panel-body">
这是未评价的订单
</div>
</div> <div class="panel panel-default" v-show="isTab(4)">
<div class="panel-body">
这是所有的订单
</div>
</div>
</div>
</div> </div> <script src="../dist/js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data: {
tab: 0
},
methods: {
setTab(index) {
this.tab = index;
},
isTab(index) {
return this.tab === index;
}
}
})
</script>
</body>
</html>
vue选项卡2
style绑定
<p :style="{color:'值', background:'值'}">
<p :style="[{}, {}, {}]">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue样式操作</title>
<style>
.item {
width: 600px;
padding: 10px;
border: 1px solid #ccc;
}
.current {
border-color:red;
}
.active {
border-color:green;
}
</style>
</head>
<body>
<div id="app">
<h1>样式操作</h1>
<hr> <p class="item" :class="cname"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente alias autem a velit neque dolore blanditiis cumque enim provident, expedita, non debitis, fugiat atque at doloribus distinctio vero repellendus maxime.</p> <p class="item" :class="{current:isCurrent, active:true, link:true, 'li-item':true}"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente alias autem a velit neque dolore blanditiis cumque enim provident, expedita, non debitis, fugiat atque at doloribus distinctio vero repellendus maxime.</p> <p :class="classObj">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor provident officia facilis ipsam nisi doloribus earum ratione dolorem, minus, suscipit, magnam beatae. Magni dolor similique, a molestias neque officiis animi?</p> <p :class="classList">Lorem ipsum dolor sit amet.</p>
</div> <script src="../dist/js/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
cname:'current',
isCurrent: false,
classObj: {item:true, link:true,active:true},
classList: ['link', 'item']
}
});
</script>
</body>
</html>
vue样式操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Style绑定</title>
<style>
p {
border:1px solid #ccc;
width: 700px;
padding:20px;
}
</style>
</head>
<body>
<div id="app">
<h1>Style绑定</h1> <p :style="styleValue">Lorem ipsum dolor sit amet.</p>
<p :style="{color:'purple', background:'pink'}">Lorem ipsum dolor sit amet.</p>
<p :style="styleObj">Lorem ipsum dolor sit amet.</p>
<p :style="[styleObj, {borderWidth:'2px'}]">Lorem ipsum dolor sit amet.</p>
</div> <script src="../dist/js/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
styleValue: 'color:red;background:green',
styleObj: {color:'pink',background:'#ccc', transform:'translate(0, 0)'}
}
});
</script>
</body>
</html>
vue样式绑定-style
2.7 事件
事件绑定
<p @事件名="方法">
<p v-on:事件名="方法">
方法加 () 的问题
<p @事件名="方法(1,1,2,3,$event)">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 事件</title>
<link rel="stylesheet" href="../dist/css/bootstrap.css">
</head>
<body>
<div id="app" class="container">
<div class="page-header">
<h1>Vue 事件</h1>
</div> <div class="row">
<div class="col-md-12">
<button @click="counter ++" class="btn btn-default"> +1 </button>
<button @click="addCounter(1)" class="btn btn-default"> +1 </button>
<button @click="addCounter(10)" class="btn btn-default"> +10 </button> <hr> <p class="info">
{{counter}}
</p> <hr> <div class="alert alert-info" @mousemove="onMoveFn">
Lorem ipsum dolor sit amet.
</div> <div class="alert alert-danger" @mousemove="onMoveFn($event, 100)">
Lorem ipsum dolor sit amet.
</div>
</div>
</div>
</div> <script src="../dist/js/vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
counter:0
},
methods: {
addCounter(num=1) {
this.counter += num;
}, onMoveFn(ev, num) {
console.log(ev.target)
//ev 是获取的event 对象
console.log(ev.pageX, ev.pageY)
}
}
})
</script>
</body>
</html>
vue事件绑定
事件修饰符
.stop 阻止事件冒泡
.prevent 阻止默认动作
.capture 捕获阶段触发事件
.once 只绑定一次
.self 只有本身才触发
.passive 优化移动端的scroll事件
<p @click.stop="">
<p @click.stop.prevent="">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 事件</title>
<link rel="stylesheet" href="../dist/css/bootstrap.css">
<style>
.box {
width:200px;
height:200px;
border:1px solid red;
}
.inner {
width:100px;
height:100px;
margin:50px;
background: pink
}
</style>
</head>
<body>
<div id="app" class="container">
<div class="page-header">
<h1>Vue 事件修饰符 键盘修饰符</h1>
</div> <div class="row">
<div class="col-md-12">
<div class="box" @click.self="boxFn">
<div class="inner" @click="innerFn"></div>
</div>
</div>
</div> <hr> <div class="row">
<div class="col-md-6"> <input type="text" class="form-control" @keyup.65="onkeyupFn">
<input type="text" class="form-control" @keyup.enter="onkeyupFn">
<input type="text" class="form-control" @keyup.ctrl.65="onkeyupFn"> </div>
</div>
</div> <script src="../dist/js/vue.js"></script>
<script>
new Vue({
el:'#app',
methods: {
boxFn(){
console.log('box');
},
innerFn(){
console.log('inner');
//event.stopPropagation();
},
onkeyupFn(event) {
console.log('按了 '+event.keyCode+' 按键')
}
}
})
</script>
</body>
</html>
vue事件修饰符
键盘修饰符
.enter
.space
.tab
.up
.left
.right
.down
.delete
.数字 (ascii )
系统按键修饰符
.ctrl
.alt
.shift
.meta
<input @keyup.ctrl.enter> 按住ctrl再按回车
2.8 表单
文本
input:text textarea v-model
checkbox 单个 true-value false-value
true/false
checkbox 多个
数组
单选按钮 input:redio v-model value值
select选择框 option的value值 多选 multiple, 数组
<input v-model="formData.username">
<input v-model="formData.pwd">
v-model.trim
v-model.number 把值转为 number 类型
v-model.lazy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单数据绑定</title>
<style>
p {
border: 1px solid #ccc;
width: 600px;
padding: 20px;
}
</style>
</head>
<body>
<div id="app">
<h1>表单数据绑定</h1>
<hr> <input type="text" v-model="message">
<br>
<textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
<br>
<h3>单个复选框</h3>
<input type="checkbox" v-model="checkVal01" true-value="yes" false-value="no">全选
<br> <h3>多个复选框</h3>
<input type="checkbox" value="lanball" v-model="loveList">篮球
<input type="checkbox" value="zuball" v-model="loveList">足球
<input type="checkbox" value="bangball" v-model="loveList">棒球
<input type="checkbox" value="paiball" v-model="loveList">排球 <h3>单选按钮</h3>
<input type="radio" v-model="sex" value="male"> 男
<input type="radio" v-model="sex" value="female"> 女 <h3>选择框</h3>
<select v-model="address">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="深圳">深圳</option>
<option value="广州">广州</option>
</select> <h3>修饰符</h3>
<input type="text" v-model.number.lazy="num"> <p> {{num}} </p>
<p> {{address}} </p>
<p> {{sex}} </p>
<p> {{loveList}} </p>
<p>{{checkVal01}}</p>
<p>{{ message }}</p>
<p>{{ message }}</p> </div> <script src="../dist/js/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data:{
message:'同志',
checkVal01: true,
loveList:['bangball'],
sex:'male',
address:'广州',
num:0
}
})
</script>
</body>
</html>
vue表单数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
<link rel="stylesheet" href="../dist/css/bootstrap.css">
<style> </style>
</head>
<body> <div id="app">
<div class="container">
<div class="page-header">
<h1>表单提交</h1>
</div> <div class="row">
<div class="col-md-6">
<form @submit.prevent="">
<div class="form-group">
<label for="#">用户名</label>
<input type="text" class="form-control" v-model="loginData.username" placeholder="请输入用户名">
</div> <div class="form-group">
<label for="#">密码</label>
<input type="password" class="form-control" v-model="loginData.pwd">
</div> <div class="checkbox">
<label for="#">
<input type="checkbox" v-model="loginData.remember"> 记住密码
</label>
</div> <button class="btn btn-success btn-block" @click="login()">登 录</button>
</form>
</div>
</div>
</div>
</div> <script src="../dist/js/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data: {
loginData: {
username:'',
pwd:'',
remember: true
}
},
methods: {
login() {
//获取所有表单的值
console.log(this.loginData)
}
}
})
</script>
</body>
</html>
vue获取表单数据
实例：todolist
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>todoList</title>
<style>
#app {
margin:100px auto 0;
width:600px;
}
.input-box {
font-size:0;
}
.input-box input {
box-sizing: border-box;
width:500px;
font-size:16px;
border:1px solid #ccc;
padding:10px;
line-height: 18px;
}
.input-box button {
width:100px;
padding:10px;
font-size:16px;
border:1px solid #ccc;
background: #f5f5f5;
cursor: pointer;
line-height: 18px;
border-left:none;
}
ul {
list-style: none;
margin:0;
padding:0;
}
.todo-list {
margin-top:20px;
}
.todo-list li{
border:1px solid #ccc;
padding:10px;
margin-bottom:10px;
font-size:0;
}
.todo-list i {
margin-right:20px;
display: inline-block;
width:16px;
height:16px;
border:1px solid #ccc;
cursor: pointer;
vertical-align: bottom;
}
.todo-list p {
width:500px;
display: inline-block;
font-size:16px;
margin:0;
}
.todo-list span {
width:50px;
cursor: pointer;
color:red;
font-size:16px; }
.done-list {
margin-top:20px;
}
.done-list li{
border:1px solid #ccc;
padding:10px;
margin-bottom:10px;
background: #999;
color:#ccc;
cursor: not-allowed;
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="app">
<div class="input-box">
<input type="text" v-model.trim="newTodo" placeholder="请输入代办事项">
<button @click="addTodo">添 加</button>
</div> <div class="todo-list">
<ul>
<li v-for="(todo,index) in todoList" :key="index">
<i @click="addDone(index)"></i>
<p>{{ todo }}</p>
<span @click="deleteTodo(index)">×</span>
</li>
</ul>
</div> <h3>已完成</h3>
<div class="done-list">
<ul>
<li v-for="done in doneList" :key="done">{{ done }}</li>
</ul>
</div>
</div> <script src="../dist/js/vue.js"></script>
<script>
new Vue({
el:"#app",
data: {
todoList: ['今天代码敲三遍', '晚上和小莉莉去喝酒'],
doneList: [],
newTodo:''
},
methods: {
addTodo() {
//如果输入框是空的，不执行
if (this.newTodo.length === 0) {
return;
}
//添加内容到 代办事项
this.todoList.push(this.newTodo)
//清空输入框
this.newTodo = '';
},
deleteTodo(index) {
this.todoList.splice(index, 1)
},
addDone(index) {
//把内容添加到 doneList
this.doneList.push(this.todoList[index])
//从todoList删掉
this.deleteTodo(index);
}
}
})
</script>
</body>
</html>
todolist
vue样式操作与事件绑定的更多相关文章
- jQuery学习笔记之DOM操作、事件绑定（2）
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
- jQuery_02之元素操作及事件绑定
1.操作元素之属性: ①attr读:$("selector").attr("属性名"):=>getAttribute("属性名"):改 ...
- jQuery之元素操作及事件绑定
1.操作元素之属性: ①attr读:("selector").attr("属性名"):=>getAttribute("属性名"):改: ...
- vue.js的一些事件绑定和表单数据双向绑定
知识点: v-on:相当于: 例如:v-on:click==@click ,menthods事件绑定 v-on修饰符可以指定键盘事件 v-model进行表单数据的双向绑定 <template&g ...
- jquery的链式操作以及事件绑定
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- vue学习(四) v-on:事件绑定
//html <div id="app"> <input type="button" value="ok" v-bind: ...
- vue中把一个事件绑定到子组件上
官网上是这样描述的 你可能有很多次想要在一个组件的根元素上直接监听一个原生事件.这时,你可以使用 v-on的 .native 修饰符 父组件App.vue <template> <d ...
- vuejs学习笔记（1）--属性，事件绑定，ajax
属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...
- vuejs学习笔记（2）--属性，事件绑定，ajax
属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...
随机推荐
- BZOJ_1095_[ZJOI2007]Hide 捉迷藏_动态点分治+堆
BZOJ_1095_[ZJOI2007]Hide 捉迷藏_动态点分治+堆 Description 捉迷藏 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子 ...
- Linux中进程控制块PCB-------task_struct结构体结构
Linux中task_struct用来控制管理进程,结构如下: struct task_struct { //说明了该进程是否可以执行,还是可中断等信息 volatile long state; // ...
- bzoj2875随机数生成器——矩阵快速幂
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2875 矩阵快速幂,把x和c分开求,最后加上即可: 为防止爆long long,要用快速乘. ...
- rsync（四）技术报告
1.1 摘要 本报告介绍了一种将一台机器上的文件更新到和另一台机器上的文件保持一致的算法.我们假定两台机器之间通过低带宽.高延迟的双向链路进行通信.该算法计算出源文件中和目标文件中一致的部分(译者注: ...
- 是否要从单片机转为嵌入式Linux？
作者:嵌入式老鸟火哥 授权转载于公众号嵌入式老鸟的职场之道(ID: ict_embedded),有增加内容和修改. 最近很多童鞋投票并咨询如何从单片机转为嵌入式Linux开发.看来读者圈中做单片机,R ...
- 2.row_number() over (partition by col1 order by col2)的用法
row_number() over (partition by col1 order by col2) 表示根据COL1分组,在分组内部根据 COL2排序,而此函数计算的值就表示每组内部排序后的顺序编 ...
- json对象和json数组
json字符串对象和json字符串数组:JSONArray跟JSONObject的区别就是JSONArray比JSONObject多中括号[] jsonObject: "Row": ...
- Identity Server 4 原理和实战（完结）_Implicit Flow 实例
oidc-client.js貌似是IdentityServer4的团队开发的 服务端的设置 在服务端新增一个Client 之后需要在angular客户端页建两个页面,对应这两个url才行 登出之后要跳 ...
- 一道关于chm设计ctf钓鱼的一些思考
版权声明:本文为博主的原创文章,未经博主同意不得转载 题目:flag就是文件指向的地址 文件: 作为一名web狗的出题人,这道ctf有点意思不是在于因为它难,而是相对于一些代码审计以及一些杂项题来说, ...
- springboot+mongodb报错Caused by: java.net.ConnectException: Connection refused (Connection refused)
com.mongodb.MongoSocketOpenException: Exception opening socket at com.mongodb.connection.SocketStrea ...