《VUE-REVIEW》day2
day02_01 过滤器的使用
<body> <div id="app"> <!-- 过滤器可以没有参数，默认传的 msg --> <p>{{msg | msgFormat('疯狂','111')}}</p> <p>{{date | dateFormat('yyyy-mm-dd')}}</p> </div> <script> // 定义个全局的VUE过滤器，名字叫做‘msgFormat’ Vue.filter('msgFormat',function(msg,arg,arg1){ //字符串的replace 第一个参数除了写一个字符串，还可以写一个正则 return msg.replace(/单纯/g,arg+arg1) }) Vue.filter('dateFormat',function(date,f){ var d1 = new Date(date); //yyyy-mm-dd var y = d1.getFullYear(); var m = d1.getMonth() + 1; var d = d1.getDate(); if (f.toLowerCase() === 'yyyy-mm-dd'){ return y+"-"+m+"-"+ d ; } }) new Vue({ el: '#app', data: { msg: '曾经，我也是一个单纯的少年，单纯的我傻傻的问，谁是世界上最单纯的男人', date: new Date() }, methods:{ } }) </script> </body>
使用过滤器效果：
day02_02 私有过滤器的使用
body> <div id="app"> {{date}} </div> <!-- 使用私有过滤器 --> <div id="app1"> {{date | dateFormat}} </div> <script> var vm = new Vue({ el: '#app', data: { date:new Date() }, methods: {} }); var vm1 = new Vue({ el: '#app1', data: { date:new Date() }, methods: {}, // 定义私有过滤器:由过滤器名称和处理函数构成 filters:{ dateFormat:function(dateStr){ var time = new Date(dateStr); var y = time.getFullYear(); var m = time.getMonth() + 1; var d = time.getDate(); return y+'-'+m+'-'+d ; } } }); </script> </body>
效果如下：
day02_03 字符串的padStart的方法
<body> <!-- 如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。 --> <div id="app"> {{date | dateFormat}} </div> <script> var vm = new Vue({ el: '#app', data: { date:new Date() }, methods: {}, filters:{ dateFormat:function(dateStr){ var time = new Date(dateStr); var y = time.getFullYear(); //当月份只有一位时,前面用0进行补齐 var m = (time.getMonth() + 1).toString().padStart(2,'0'); var d = time.getDate().toString().padStart(2,'0'); return y+'-'+m+'-'+d ; } } }); </script> </body>
day02_04 按键修饰符及自定义
<body> <div id="app"> 编号：<input type="text" v-model="id"> <!-- 添加案件修饰符：当按下enter时，触发add方法 --> <!-- 姓名：<input type="text" v-model="name" @keyup.Enter="add"> --> <!-- 可以将事件方法绑定到其他按键上 113对应F2健，按F2键即可触发keyup事件--> <!-- 姓名：<input type="text" v-model="name" @keyup.113="add"> --> <!-- 可以自定义按键修饰符，如下所示将 113对应为F2--> 姓名：<input type="text" v-model="name" @keyup.f2="add"> <input type="button" value="提交" @click="add"> <hr> <table> <tr v-for="user in userlist"> <td>{{user.id}}</td> <td>{{user.name}}</td> </tr> </table> </div> <script> // 自定义全局按键修饰符 Vue.config.keyCodes.f2 = 113 var vm = new Vue({ el: '#app', data: { id:null, name:null, userlist:[ {id:'1',name:'张三'}, {id:'2',name:'赵四'} ] }, methods: { add(){ this.userlist.push({id:this.id,name:this.name}) } } }); </script> </body>
day02_05 自定义指令及钩子函数让文本框获取焦点
<body> <div id="app"> <!-- 自定义一个全局指令 v-focus，让一打开页面就让文本框获取到焦点 --> 姓名：<input type="text" v-focus v-color> </div> <div id="app2"> <!-- 自定义私有指令 --> 编号：<input type="text" v-color2 > <p v-color3="'blue'"> 我是个指令</p> </div> <script> // 利用Vue.directive()定义全局指令 v-focus //一个指令定义对象可以提供如下几个钩子函数 (均为可选)：bind inserted updated Vue.directive('focus',{ //每当指令绑定到元素上的时候会立即执行bind函数，只会执行一次 //注意：在每个函数中，第一个参数都是el，表示被绑定的那个元素，这个el参数是一个原生的dom对象，可以调用dom对象的方法 bind: function(el){ }, //inserted表示元素插入到dom中的时候，会执行inserted函数【触发一次】 inserted:function(el){ el.focus() }, //当Vnode更新的时候会触发，可能会触发多次 updated:function(el){ } }) //自定义一个指令 v-color 来控制输入框输入的字体颜色 //样式： 和样式相关的操作，一般都在bind函数中执行 //行为： 和js行为相关的动作一般都在inserted中执行 Vue.directive('color',{ bind:function(el){ el.style.color = 'red' } }) var vm = new Vue({ el: '#app', data: {}, methods: {}, directive:{ color:{ //指令的定义 bind: function(el){ el.style.color = 'red' } } } }); var vm2 = new Vue({ el: '#app2', data: {}, methods: {}, directives:{ 'color2':{ //指令的定义 bind: function(el){ el.style.color = 'yellow' } }, //自定义指令也可以有简写方式 //这个function等同于把代码写入了 bind 和 updated中 //binding参数表示元素调用指令传入的值 'color3': function (el, binding) { el.style.color = binding.value } } }); </script> </body>
day02_06 vue生命周期函数
什么是生命周期：
从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。（Vue实例从创建到销毁的过程）
生命周期钩子：就是生命周期事件的别名而已。
生命周期钩子 = 生命周期函数 = 生命周期事件。
主要的生命周期函数分类：
创建期间：
beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性。
created：实例已经在内存中创建ok，此时data 和 methods 已经创建ok，此时还没有开始编译模板。
beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中。
mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。
运行期间：
beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点。
update：实例更新完毕之后调用此函数，此时data中的状态值和界面上显示的数据都已经完成了更新，界面已经被重新渲染好了。
销毁期间：
beforeDestroy：实例销毁之前调用，在这一步，实例仍然完全可用。
destroyed：Vue实例销毁后调用，调用后Vue实例指示的所有东西都会被解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
图文助解
代码助解
<body>
<div id="app"> <p id="p1">{{msg}}</p> <!-- 事件方法触发时，可直接将法中的操作写在这 --> <input type="button" value="改变" @click="msg = '操操操'"> </div> <script> new Vue({ el: '#app', data: { msg:'哈哈哈' }, methods:{ show(){ console.log('执行了show方法') } }, //第一个生命周期函数，表示VM实例未被完全创建出来之前，会执行它,此时VM实例中的数据，事件还未被加载 beforeCreate(){ console.log('beforCreate方法开始执行'); // console.log(this.msg); // this.show() }, //第二个生命周期函数，VM实例已在内存中创建完成，如果要调用VM中的data,methods，最早只能在这里调用 created(){ console.log('created方法开始执行'); console.log(this.msg); this.show() }, //第三个生命周期函数，VM实例创建完成后，通过el元素，将VM实例绑定到el所指向的元素创建编辑成模板，但是尚未把模板渲染到页面中 beforeMount(){ console.log('beforeMount方法开始执行'); console.log(document.getElementById('p1').innerText) }, //第四个生命周期函数，表示内存中模板已经真实的渲染到页面中了，用户可以看见被渲染后的页面了 //如果此时没有其他操作的话，这个实例就会静静的在内存中，不会发生改变 mounted(){ console.log('mounted方法开始执行'); console.log(document.getElementById('p1').innerText) }, //接下来是运行中的两个事件函数，beforeUpdate 和update函数，会根据VM中数据的改变而触发 //执行beforeUpdate的时候，页面中显示的数据还是旧的，但是VM中的数据已经被改变 beforeUpdate(){ console.log('beforeUpdate方法开始执行'); //点击‘改变’按钮，观察VM中msg值和页面中的msg是否发生变化 console.log('页面中msg的值：'+document.getElementById('p1').innerText) console.log('vm中msg的值：'+this.msg) }, updated(){ console.log('update方法开始执行'); //点击‘改变’按钮，观察VM中msg值和页面中的msg是否发生变化 //update时间执行的时候，页面和vm中data数据都已经保持同步，都是最新的 console.log('页面中msg的值：'+document.getElementById('p1').innerText) console.log('vm中msg的值：'+this.msg) }, //实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。 beforeDestroy(){ }, //实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。该钩子在服务器端渲染期间不被调用。 destroyed(){ } }) </script> </body>
<body>
<div id="app">
编号：<input type="text" v-model="id">
<!-- 添加案件修饰符：当按下enter时，触发add方法 -->
<!-- 姓名：<input type="text" v-model="name" @keyup.Enter="add"> -->
<!-- 可以将事件方法绑定到其他按键上 113对应F2健，按F2键即可触发keyup事件-->
<!-- 姓名：<input type="text" v-model="name" @keyup.113="add"> -->
<!-- 可以自定义按键修饰符，如下所示将 113对应为F2-->
姓名：<input type="text" v-model="name" @keyup.f2="add">
<input type="button" value="提交" @click="add">
<hr>
<table>
<tr v-for="user in userlist">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
</tr>
</table>
</div>
<script>
// 自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113
var vm = new Vue({
el: '#app',
data: {
id:null,
name:null,
userlist:[
{id:'1',name:'张三'},
{id:'2',name:'赵四'}
]
},
methods: {
add(){
this.userlist.push({id:this.id,name:this.name})
}
}
});
</script>
</body>
