事件绑定相关#
@click绑定事件#
<button @click="text1">text1</button> <button @click="text2('haha')">text2</button> <button @click="text3($event)">text3</button> <button @click="text4">text4</button><!-- 如果没有指定参数进去,传递进去的就是event--> <button @click="text5(123,$event)">text5</button> var vm = new Vue({ el:'#test', methods:{ text1(){ alert("text 1"); }, text2(msg){ alert(msg); }, text3(event){ alert(event.target.innerHTML); }, text4(event){ alert(event.target.innerHTML); }, text5(msg,event){ alert(msg+event.target.innerHTML); },
可以看到@click使用vue中method的函数时,如果没有参数,可以简写,去掉(), 如果不写参数,传递进去的是事件本身event , text三中通过event拿到了标签的文本内容
@click.prevent阻止事件的默认行为#
<a href="http:www.baidu.com" @click.prevent="text8">百度一下</a> <!-- 阻止事件的默认行为 -->
监听某个按键的点击事件#
<input type="text" @keyup.enter="text9"> <!-- @keyup.13(名字) 监听某一个键的点击事件 -->
收集表单数据#
使用vue将用户填入表单中的数据收集起来, 收集到哪里去? 其实是收集到 vue的data块中的属性中
其实就是在html使用v-model暴力绑定dom监听, 将单选框,输入框,多选框中用户输入进去的内容和data中的属性关联起来
- input,textarea 等输入框,收集起来的值就是用户输入进去的值
- 单选框 radio ,多选框 checkbox 等选择框,收集起来的值的 html中的value属性的值
<h1>表单中最终提交给后台的是 value值</h1><br> <h2> 使用v-model实现表单数据的自动收集 </h2> <form action="/XXX" @submit.prevent="handleSubmit" ><!-- 阻止表单的默认自动提交事件 --> <span>用户名:</span> <input type="text" v-model="username"><br> <span>密码</span> <input type="password" v-model="pwd" ><br> <span>性别</span><br> <input type="radio" id="female" value="女" v-model="sex"> <label for="female">女</label><br> <input type="radio" id="male" value="男" v-model="sex"> <label for="male">男</label><br><br> <span>爱好</span><br> <input type="checkbox" id="basket" value="basket" v-model="likes"> <label for="basket">篮球</label> <input type="checkbox" id="foot" value="foot" v-model="likes"> <label for="foot">足球</label> <input type="checkbox" id="pingpang" value="pingpang" v-model="likes"> <label for="pingpang">乒乓球</label><br><br> <span>城市</span><br> <select v-model="cityId"> <option value="">未选择</option> <option :value="city.id" v-for="(city,index) in allCitys" :key="index">{{city.name}}</option> </select> <span>介绍:</span> <textarea name="" id="" cols="30" rows="10" v-model="dec"></textarea> <input type="submit" value="注册"><br> </form> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el:'#test', data:{ username:'', pwd:'', sex:'女', likes:['foot'], allCitys:[{id:1,name:'北京'},{id:2,name:"山东"},{id:3 ,name:"青岛"}], cityId:'3' /* 默认让 3被选中*/, dec:"哈哈" }, methods:{ handleSubmit(){ alert(this.username+this.pwd); alert(this.sex); } } })
vue的生命周期#
vue对象在创建初始化的过程中一次执行如下声明周期相关的方法, 根据这个特性,通常把加载进入一个新的页面中时去发送ajax请求的方法放到mounted(){},收尾工作放在beforeDestroy(){}
var vm = new Vue({ el: "#text", data: {}, beforeCreate() { // 创建之前回调 console.log("beforeCreate"); }, created() { // 创建之后回调 console.log("created"); }, beforeMount() { console.log("beforrMount"); }, // todo 常用, 异步操作, 比如发起ajax请求获取数据, 添加定时器 mounted() { // 初始化显示之后会立即调用一次 console.log("mounted"); this.intervalId = setInterval(() => { console.log("干掉vm之后, 定时器还在跑, 内存泄露了"); this.isShow = !this.isShow; }, 1000); /* 如果下面不使用箭头回调函数, this就是window, 而不是vm * setInterval(() => { this.isShow= !this.isShow; },1000); * */ }, // 更新阶段 beforeUpdate() { //更新阶段之前回调 console.log("beforeUpdate"); }, updated() { // 更新阶段之后回调 console.log("updated"); }, // 死亡阶段 // todo 常用 收尾工作 beforeDestroy() { // 死亡之前回调一次 console.log("beforeDestroy "); clearInterval(this.intervalId); }, destroyed() { console.log("destroyed"); }, methods: {} } });
ES的语法糖,箭头函数#
比如在设置定时器时, 定时器中需要对vue的属性进行操作,在定时器的代码块中this指的是定时器对象,es6的箭头语法解决就这个问题, 在箭头函数中this没有的属性,会到外层的vue中来找
this.intervalId = setInterval(() => { console.log("干掉vm之后, 定时器还在跑, 内存泄露了"); this.isShow = !this.isShow; }, 1000);
动画#
按照vue的下面的几步要求, vue 会给目标元素添加或者移除特定的 css,实现动画的效果
- 需要添加动画的标签被
<transition name="" > XXX </transition>包裹
<div id="test"> <transition name="YYY"> <p v-show="isShow" class="">toggle</p> <button @click="isShow=!isShow">toggle</button> </transition> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#test', data() { return { isShow: true } } });
- 定义以 .YYY-开头的 css属性, 这个YYY就是上面自定义的YYY, 需要在这些自定义的属性中指定过度的属性以及隐藏的属性
一个简单的动画效果标签从隐藏->出现, 再从出现到隐藏的过程,就像下面这样
v-enter v-enter-to v-leave v-leave-to 隐藏 出现 出现 隐藏
自定义这四个时期的状态
/* 显示的过度效果*/ .YYY-enter-active { transition: all 1s; } /* 隐藏的过度效果*/ .YYY-leave-active { transition: all 3s; } /* 从无到有的样式 */ .YYY-enter { opacity: 0; } /* 从有到无的样式 */ .YYY-leave-to { opacity: 0; transform: translateX(20px); /* 离开时,向X轴的正方向移动20px*/ }
格式化时间的插件库#
点击进入 moment.js网址 ,在这里可以找到需要引入的script标签
点击进入 moment.js的文档 在文档中可以找到对应的格式和例子
<div id="test"> <h2>显示格式化的日期时间</h2> <p>{{date}}</p> <p>默认完整: {{date | dateFormat}}</p><!-- 一旦我们这么写， 他就会把date的值，传递给dateFormat函数 --> <p>年月日: {{date | dateFormat('YYYY-MM-DD')}}</p><!-- 一旦我们这么写， 他就会把date的值，传递给dateFormat函数 --> <p>时分秒: {{date | dateFormat('HH:mm:ss')}}</p><!-- 一旦我们这么写， 他就会把date的值，传递给dateFormat函数 --> </div> /* 这个在官网上查找 */ <script type="text/javascript" src="https://cdn.bootcss.com/moment.js/2.21.0/moment.js"></script> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> // 自定义过滤器 Vue.filter('dateFormat',(value,format)=>{ /* Vue是函数对象 */ return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss'); }); new Vue({ el:'#test', data:{ date:new Date() } });
Es的语法糖#
es6 的语法: 形参默认值 , 没传值的话,就使用默认值
function(value,format="YYYY-MM-DD"){ return moment(value).format(format); }
vue的指令#
常见的原生指令如下
v:text : 更新元素的textContent <br> v:html : 更新元素的innerHtml<br> v-if: true 如果为true,标签才会输出到页面 <br> v-else: 如果为false,标签才会输出到页面 <br> v-show: 通过控制display的样式来控制显示和隐藏<br> v-for: 遍历数组对象 <br> v-on: 绑定监听事件, 一般直接写 @ <br> v-bind: 强制绑定解析表达式 一般简写成 : <br> v-model: 双向数据绑定 <br> ref: 指定唯一的标识, Vue对象可以通过 $els 属性来访问这个元素对象 <br> v-cloak: 防止闪现可能应为网速的原因{{msg}} 一直解析不了, 于是用户就看到它了,不友好, 于是 vue推出 与css配合 [v-cloak] {display:none} <br>
补充最后两个
- ref 指定唯一的标识, Vue对象可以通过 $els 属性来访问这个元素对象
- 防止闪现可能应为网速的原因{{msg}} 一直解析不了, 于是用户就看到它了,不友好, 于是 vue推出 与css配合 [v-cloak] {display:none}
例子:
<head> <meta charset="UTF-8"> <title>Title</title> <style> [v-cloak] { /* 回去寻找有这个属性名的标签 [v-cloak] , 就是下面的p标签 */ display:none } </style> </head> <body> <div id="test"> <p ref="content123">哈哈哈哈</p> <button @click="hint">提示</button> // v-cloak="" + 上面的css 样式避免 {{ }} 闪现的效果 <p v-cloak="">{{msg}}</p> <br> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> // 注册全局指令 Vue.directive('') new Vue({ el:'#test', data:{ msg: '嘿嘿' } , methods:{ hint(){ // 因为 `<p ref="content123">哈哈哈哈</p>` 使用了ref,所以vue可以通过this.$refs.content123 找到指定的这个元素 alert(this.$refs.content123.textContent) } } });
