VUE入门笔记，第二节

一、总结以上:实例-表格列表

【目标：实现表格数据的添加、删除和过滤筛选】

【解决方案】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>表格列表</title><script src="./lib/vue-2.4.0.js"></script><style>.tableStyle {margin: 20px auto;width: 500px;border-collapse: collapse;}.tableStyle tr>th,td{width: 60px;height:50px;text-align: center;}.search {margin: 50px auto;width:730px;}</style>
</head>
<body><div id="app" ><div class="search">id: <input type="text" name="id" v-model="id">name: <input type="text" name="name" v-model="name"><input type="button" value="添加" @click="add(id,name)">search: <input type="text" name="search" v-model="keywords"></div><table class="tableStyle" border="1"><tr><th>id</th><th>name</th><th>cTime</th><th>操作</th></tr><!-- <tr v-for="item in list" v-bind:key="item.id"> --><tr v-for="item in search(keywords)" v-bind:key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="http://www.baidu.com" @click.prevent="remove(item.id)">删除</a></td></tr></table></div><script>var vm = new Vue({el: "#app",data:{id: "",name: "",keywords: "",list: [{id:1,name:"宝马",ctime:new Date()},{id:2,name:"奔驰",ctime:new Date()}]},methods:{add:function(id,name){let newArray = {id:id,name:name,ctime:new Date()};this.list.push(newArray);},remove:function(id){let newList = new Array();this.list.forEach((item,index)=>{if(item.id!=id){newList.push(item);}});this.list = newList;},search(keywords){let newList = new Array();this.list.forEach((item,index)=>{if(item.name.indexOf(keywords)!=-1){newList.push(item);}});return newList;}}});</script></body>
</html>

结果：

二、过滤器

1、全局过滤器

【目标：将河北替换成邯郸】

【解决方案】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>过滤器vm.filter</title><script src="./lib/vue-2.4.0.js"></script>
</head>
<body><div id="app"><p>{{ msg | msgFormat }}</p></div><script>//定义一个vue全局过滤器，过滤器名称叫做msgFormat//function第一个参数已经被定义死了，必须是过滤器管道符前面 传递过来的数据Vue.filter('msgFormat',function(msg){return msg.replace("河北","邯郸");});var vm = new Vue({el: '#app',data:{msg: "我是河北人，我现在在北京"}});</script></body>
</html>

2、私有过滤器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>过滤器vm.filter</title><script src="./lib/vue-2.4.0.js"></script>
</head>
<body><div id="app"><p>{{ msg | msgFormat("全局") }}</p></div><hr><div id="app2"><p>{{ msg | msgFormat("私有") }}</p></div><script>//定义一个vue全局过滤器，过滤器名称叫做msgFormat//function第一个参数已经被定义死了，必须是过滤器管道符前面 传递过来的数据Vue.filter('msgFormat',function(msg,flag){console.log(flag);return msg.replace("河北","邯郸");});var vm = new Vue({el: '#app',data:{msg: "我是河北人，我现在在北京"}});var vm2 = new Vue({el: '#app2',data:{msg: "我是河北人，我现在在北京"},methods:{},filters:{   //定义私有过滤器，两个条件： 过滤器名称、处理函数//过滤器调用的时候，采用就近原则。如果私有过滤器和全局过滤器名称一致，//这时候优先调用私有过滤器msgFormat:function(msg,flag){console.log(flag);return msg.replace("北京","石家庄");}}});</script></body>
</html>

三、按键修饰符

【目标：将案例-表格列表中 的添加按钮，改成name按回车键直接添加】

【知识点：】

常用的按键修饰符：
.enter   #按回车键
.tab     #按tab键
.delete  #按delete键
.esc     #按esc键
.space   #按回车键
.up      #按↑键
.down    #按↓键
.left    #按←键
.right   #按→键其他按键需要自定义，或者直接用键盘对应的按键编码使用如：Vue.config.keyCodes.f2= 113;   将按键编码为113的f2键 自定义为f2

【解决方案】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>按键修饰符以及自定义</title><script src="./lib/vue-2.4.0.js"></script><style>.tableStyle {margin: 20px auto;width: 500px;border-collapse: collapse;}.tableStyle tr>th,td{width: 60px;height:50px;text-align: center;}.search {margin: 50px auto;width:730px;}</style>
</head>
<body><div id="app" ><div class="search">id: <input type="text" name="id" v-model="id"><!--添加按键修饰符enter-->name-按键修饰符: <input type="text" name="name" v-model="name" @keyup.enter="add(id,name)">name-自定义按键修饰符: <input type="text" name="name" v-model="name" @keyup.f2="add(id,name)"><input type="button" value="添加" @click="add(id,name)">search: <input type="text" name="search" v-model="keywords"></div><table class="tableStyle" border="1"><tr><th>id</th><th>name</th><th>cTime</th><th>操作</th></tr><!-- <tr v-for="item in list" v-bind:key="item.id"> --><tr v-for="item in search(keywords)" v-bind:key="item.id"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.ctime}}</td><td><a href="http://www.baidu.com" @click.prevent="remove(item.id)">删除</a></td></tr></table></div><script>Vue.config.keyCodes.f2= 113;var vm = new Vue({el: "#app",data:{id: "",name: "",keywords: "",list: [{id:1,name:"宝马",ctime:new Date()},{id:2,name:"奔驰",ctime:new Date()}]},methods:{add:function(id,name){let newArray = {id:id,name:name,ctime:new Date()};this.list.push(newArray);},remove:function(id){let newList = new Array();this.list.forEach((item,index)=>{if(item.id!=id){newList.push(item);}});this.list = newList;},search(keywords){let newList = new Array();this.list.forEach((item,index)=>{if(item.name.indexOf(keywords)!=-1){newList.push(item);}});return newList;}}});</script></body>
</html>

四、自定义指令

1、自定义全局指令

【目标：自定义指令，让input框自动获取焦点】

【知识点：】

//focus是指令名称，但用的时候要用 <input v-focus>Vue.directive('focus', {inserted: function (el) {el.focus()}
});【钩子】
##bind：只调用一次，指令第一次绑定到元素时调用【只调用1次】---一般是样式，如css样式 color font-size等
##inserted：表示元素插入到DOM中的时候，就会执行【只调用1次】--一般是行为，如js click keyup等
##updated:当window更新的时候，就会执行【制定多次】如果钩子是bind或update可以简写
Vue.directive('color-swatch', function (el, binding) {el.style.backgroundColor = binding.value
})【参数】
//el是指令绑定的元素，可以用来直接操作原生DOM。默认第一个参数
//binding：
//    name: 指令名称  如focus
//    value: 指令绑定的值  如blue 2
//    expression：指令绑定的表达式 如'blue' ‘1+1’...

【测试】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>自定义全局指令</title><script src="./lib/vue-2.4.0.js"></script>
</head>
<body><div id="app" >id:<input type="text" v-color="'red'" >name:<input type="text" v-focus></div><script>//inserted一般绑定js行为Vue.directive('focus',{inserted:function(el){el.focus();}});//bind一般绑定css样式Vue.directive('color',{bind:function(el,binding){console.log(el);console.log("name:"+binding.name+"  value:"+binding.value+"   expression:"+binding.expression);el.style.color=binding.value;}});var vm = new Vue({el: "#app",data:{},methods:{}});</script></body>
</html>

2、自定义私有指令

【知识点】

指令：
directives:{ //私有指令   指令名   处理函数'fontcolor': {bind: function (el,binding){console.log(binding.value);el.style.color='red';}}
}如果钩子是bind和update可以简写如下：
directives:{ //私有指令   指令名   处理函数'fontsize':function(el,binding){el.style.fontSize=parseInt(binding.value)+"px";}
}

【方案：】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>自定义私有指令</title><script src="./lib/vue-2.4.0.js"></script>
</head>
<body><div id="app" >id:<input type="text" v-color="'red'" >name:<input type="text" v-focus><a v-fontcolor="'red'" v-fontsize="30">{{ msg }}</a></div><script>Vue.directive('focus',{inserted:function(el){el.focus();}});Vue.directive('color',{bind:function(el,binding){el.style.color=binding.value;}});var vm = new Vue({el: "#app",data:{msg:'你好，我是私有指令'},methods:{},directives:{ //私有指令   指令名   处理函数'fontcolor': {bind: function (el,binding){console.log(binding.value);el.style.color='red';}},'fontsize':function(el,binding){ //如果钩子是bind和update可以简写如下el.style.fontSize=parseInt(binding.value)+"px";}}});</script></body>
</html>

五、VUE的生命周期

【知识点：】

VUE生命周期分类：
1、创建期间的生命周期函数beforeCreate：实例刚在内存中被创建出来，此时还没有初始化好data和methods属性created:实例已经在内存中创建OK，此时data和methods已经创建OK，此时还没有开始编译模板beforeMount:此时已经完成了模板的便已，但是还没有挂载到页面中mounted：此时，已经将便已好的模板，挂载到了页面制定的容器中显示
2、运行期间的生命周期函数beforeUpdate：状态更新之前执行此函数，此时data中的状态值是最新的，但是界面上显示的数据还是旧的，应为此时还没有开始重新渲染DOM节点updated：实例更新完毕之后调用此函数，此时data中的状态值 和 洁面上显示的数据都已经完成了更新，洁面已经被重新渲染好了
3、销毁期间的生命周期函数：beforeDestory:实例销毁之前调用。在这一步，实例仍然完全可用destroyed:vue实例销毁后调用。调用会后，vue实例指示的所有东西都会解绑，所有的时间监听器会被移除，所有的子实例也会被销毁


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue的生命周期</title><script src="./lib/vue-2.4.0.js"></script>
</head>
<body><div id="app"><input type="button" value="修改MSG" @click="msg='No'"><p id="h3">{{  msg }}</p></div><script>var vm = new Vue({el: '#app',data:{msg: 'ok'},methods:{show: function(){console.log('执行了show方法');}},//1、创建期间的生命周期函数beforeCreate() {//这是我们遇到的第一个生命周期函数，表示实例完全被创建出来之前，会执行它// console.log(this.msg);// this.show();//注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有被初始化，所以都不能够被调用},created() {//这是遇到的第二个生命周期函数// console.log(this.msg);// this.show();//注意：在created中data和methods都已经被初始化好了//如果要调用methods中的方法，或操作data中的数据，最早，只能在created中操作。},beforeMount() {//这是遇到的第三个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中//console.log(document.getElementById("h3").innerText); //结果是 ： {{ msg }}//注意：在beforeMount被执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串},mounted() {//这是遇到的第四个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了//console.log(document.getElementById("h3").innerText); //结果是 ： ok//注意： mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例//已经被完全创建好了，此时，如果没有其他操作的话，这个实例就静静的躺在我们的内存中},//2、运行期间的生命周期函数（点击更新MSG按钮）beforeUpdate() {//这个时候表示我们的界面还没有被更新，但是数据已经在内存中被更新了//console.log('界面上的内从:'+document.getElementById("h3").innerText);//console.log('data中的msg数据：'+this.msg);//结论：当执行beforeUpdate的时候，界面中的显示数据还是 旧的OK，此时data数据是最新的No//页面尚未和最新的数据保持同步},updated() {//console.log('界面上的内从:'+document.getElementById("h3").innerText);//console.log('data中的msg数据：'+this.msg);//updated事件执行的时候，页面和data数据已经保持同步了},//3、销毁期间的生命周期函数：beforeDestroy() {//当执行beforeDestroy 生命周期函数的时候，vue实例已经从运行阶段，进入到了销毁阶段。//当执行beforeDestroy的时候，实例上所有的data和methods，以及过滤器，指令...仍处于可用状态，//此时还没有真正执行销毁的过程},destroyed() {//当执行到destroyed函数的时候，组件已经被完全销毁了，此时组件中所有的 数据 方法 指令 过滤器...//都已经不可用了},});</script></body>
</html>

六、vue-resource

vue-resource是一个第三方包，也可以使用axios等实现数据的请求【 官网地址 】

【目标：vue-resource实现get、post、jsonp请求】

【常用方法：】

get(url, [config])
head(url, [config])
delete(url, [config])
jsonp(url, [config])
post(url, [body], [config])
put(url, [body], [config])
patch(url, [body], [config])

【案例：】

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>vue-resource第三方组件</title><script src="./lib/vue-2.4.0.js"></script><script src="./lib/vue-resource.js"></script>
</head><body><div id="app"><input type="button" value="get按钮" @click="dataGet"><input type="button" value="postget按钮" @click="dataPost"><input type="button" value="jsonp按钮" @click="dataJsonP"><p id="h3">{{  msg }}</p></div><script>var vm = new Vue({el: '#app',data: {msg: 'ok',addr1: 'xxxxxxxxxxxxxxxx',addr2: 'xxxxxxxxxxxxxxxx',addr3: 'xxxxxxxxxxxxxxxx'},methods: {dataGet() {console.info('get')this.$http.get(this.addr1, {params: {name: '1'},headers: {token: 'a'}}).then(res => {console.info(res.data)//返回成功函数}, error => {console.info(error)//返回失败函数})},dataPost() {console.info('post')this.$http.post(this.addr2, {name: '1'}, {headers: {token: 'a'}}).then(res => {console.info(res.data)//返回成功函数}, error => {console.info(error)//返回失败函数})},dataJsonP() {console.info('jsonp')this.$http.jsonp(this.addr3, {params: {name: '1'}}).then(res => {console.info(res.data)//返回成功函数}, error => {console.info(error)//返回失败函数})}});</script></body></html>

VUE入门笔记，第二节相关推荐

  1. VUE入门笔记，第一节

    VUE入门笔记,第一节 一.MVVM分层思想 M:用来保存每个页面中的单独的数据 V:每个页面中的HTML结构 VM:它是M和V层的调度者,它分割了M和V层,用于处理M和V层的数据双向绑定 二.VUE ...

  2. iHRM 人力资源管理系统_第9章_文件上传与PDF报表入门_第二节_PDF报表入门

    iHRM 人力资源管理系统_第9章_文件上传与PDF报表入门_第二节_PDF报表入门 文章目录 iHRM 人力资源管理系统_第9章_文件上传与PDF报表入门_第二节_PDF报表入门 PDF报表入门 3 ...

  3. [北大肖臻-区块链技术与应用笔记]第二节课

    文章目录 [北大肖臻-区块链技术与应用笔记]第二节课 一.哈希指针 二.区块链 三.Merkle Tree 结点 参考资料 [北大肖臻-区块链技术与应用笔记]第二节课 一.哈希指针 普通的指针存储的是 ...

  4. vue入门笔记（一）

    Vue Day 01 B站原视频地址 注:本文只是记录自己的学习过程 文章目录 Vue Day 01 一.邂逅Vuejs 1.1.认识Vuejs 1.2.Vue的初体验 1.3.创建Vue时, opt ...

  5. Python入门（第二节）：Python编译器安装

    一 前言 上一篇Python入门(第一节):Python版本如何选和安装末尾我放了一个投票 大家选择的是vscode,我们就来一篇vscode安装使用讲解 其实vscode和pycharm一个是插件下 ...

  6. 后端小白的VUE入门笔记, 前端高能慎入

    因为项目需要前后端分离,后端竟然不用控制view层了,页面的跳转后端不再干涉,(前端的vue经过打包后成了一张index.html) 后端只需要响应给前端json串就ok,其实这不是爽歪歪?但是觉得还 ...

  7. vue入门笔记（三）

    Vue Day 03 文章目录 Vue Day 03 一.v-model的使用(表单绑定) 1.1.v-model的基本使用 1.2.v-model的原理 1.3.v-model结合radio的类型使 ...

  8. 后端小白的VUE入门笔记, 进阶篇

    使用 vue-cli( 脚手架) 搭建项目 基于vue-cli 创建一个模板项目 通过 npm root -g 可以查看vue全局安装目录,进而知道自己有没有安装vue-cli如果没有安装的话,使用如 ...

  9. Vue入门笔记Day 8

    一.vue中的css动画原理(transition) 1.过渡显示 (1)transition标签 transition表示包裹的内容会有一个动画过渡效果,动画效果必须包含在transition标签里 ...

最新文章

  1. js 点击侧边栏展示内容_【DEMO】JS实现侧边栏信息展示效果
  2. javascript python 通信_Python通过websocket与js客户端通信示例分析
  3. solr索引服务器的配置和solrj集成开发总结
  4. MFC下的MessageBox使用_附带CBUTTON
  5. jQuery+php+ajax实现无刷新上传文件功能
  6. [笔记]极大极小过程的alpha-beta剪枝不可与记忆化搜索一起使用
  7. Asp.Net异步加载
  8. sql server2016还原数据库
  9. 西门子PLC与DCS通讯
  10. python 保存bin文件,python bin文件处理
  11. 大数据第一季--java基础（day5）-徐培成-专题视频课程
  12. 生活小技巧：自己动手修理希捷 Expansion 移动硬盘
  13. Git报错--Everything up-to-date branch ‘main‘ set up to track ‘origin/main‘.
  14. 示例：波士顿房价预测
  15. TCP/IP 详解（第 2 版） 笔记 / 3 链路层 / 3.2 以太网与 IEEE 802 LAN/MAN 标准 / 3.2.2 以太网帧格式
  16. string转LPCTSTR
  17. 相机标定（基础）20221204
  18. 杭电计算机复试面试题库,杭电电子分院历年复试题(整理版).doc
  19. 英语口语在线测试软件,4个最实用的英语口语练习软件
  20. 通过一个测试项目了解EF CORE

热门文章

  1. Unity学习资源汇总 2021/4/16 更新
  2. Word控件Spire.Doc 转换教程(九)：在 Doc 转PDF 转换期间设置图像质量
  3. iPhone开发内存管理之一
  4. CSS 盒子模型、边框
  5. 微型计算机流水灯实验报告,广东海洋大学微型计算机基础流水灯左移右移实验报告.docx...
  6. el-carousel加载缓慢
  7. 庄子心得02：境界有大小
  8. 关于Ajax局部刷新
  9. 超详细教程-Django实现Ajax局部刷新
  10. 远程计算机组策略,利用Windows XP组策略实现远程关机