vue基础3
1.推荐好用的第三方框架
BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务
1.moment.js
2.dayjs
2.收集表达数据
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><style></style>
</head>
<!-- 收集表单数据：若：<input type="text"/>,则v-model收集的是value值，用户输入的就是value值。若：<input type="radio"/>,则v-model收集的是value值，且要给标签配置value值若：<input type="checkbox"/>1.没有配置input的value属性，那么收集的就是checked(勾选 or 未勾选，是布尔值)2.配置input的value属性：(1)v-model的初始值是非数组，那么收集的就是checked(勾选 or 未勾选，是布尔值）(2)v-model的初始值是数组，那么收集的的就是value组成的数组备注：v-model的三个修饰符：lazy:失去焦点再收集数据number：输入字符串转为有效的数字trim：输入首尾空格过滤
--><body><!-- 准备好一个容器 --><div id="root"><form @submit.prevent="demo"><!-- 使用label标签让label里的内容与一个标签作为关联 --><label for="demo"> 账号：</label><!-- 去掉前后空格 --><input type="text" name="" id="demo" v-model.trim="userInfo.account"><br><label for="password">密码：</label><input type="password" name="" id="password" v-model="userInfo.password"><br><label for="age">年龄：</label><!-- 转成 数字类型 --><input type="number" name="" id="age" v-model.number="userInfo.age"><br><label for="sex">性别：</label><!-- 单选框 -->男<input type="radio" value="男" v-model="userInfo.sex">女<input type="radio" value="女" v-model="userInfo.sex"><br>爱好：学习<input type="checkbox" value="study" v-model="userInfo.hobby"><!-- 不写value默认收集的就是checked 布尔值 -->打游戏<input type="checkbox" value="playgame" v-model="userInfo.hobby">吃饭<input type="checkbox" value="eating" v-model="userInfo.hobby"><br>所属校区：<select v-model="userInfo.city"><option value="">请选择校区</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="shenzhen">深圳</option><option value="wuhan">武汉</option></select><br>其他信息<!-- 懒加载 当失去焦点的时候才获取值 --><textarea v-model.lazy="userInfo.otherInfo"></textarea><br><input type="checkbox" v-model="userInfo.agree"> 阅读并接受 <a href="http://www.baidu.com">《用户协议》</a><br><button>提交</button></form></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示const vm = new Vue({el: "#root",data: {userInfo: {account: '',password: '',age:19,sex: '2',hobby: [],city: 'beijing',otherInfo: '',agree: false}},methods: {demo() {console.log(JSON.stringify(this._data));}},})</script></body></html>3.过滤器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>过滤器</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script><script type="text/javascript" src="../js/dayjs.min.js"></script>
</head><!-- 过滤器：定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。语法：1.注册过滤器：Vue.filter(name,callback)或 new Vue{filters:{}}2.使用过滤器：{{xxx|过滤器名}}或 v-bind：属性="xxx|过滤器名”备注：1.过滤器也可以接收额外参数、多个过滤器也可以串联2.并没有改变原本的数据，是产生新的对应的数据-->
<body><!-- 准备好一个容器 --><div id="root"><h2>显示格式化后的时间</h2><!-- 计算属性实现 --><h3>现在的时间是:{{date}}</h3><!-- 计算属性实现 --><h3>现在的时间是:{{dateFun()}}</h3><!-- 过滤器实现 --><h3>现在的时间是:{{time | timeFormat('YYYY-MM-DD') | mySlice}}</h3><hr><h3 :x="msg | mySlice">尚硅谷</h3></div><!-- 准备好一个容器 --><div id="root2"><h2>显示格式化后的时间</h2><!-- 过滤器实现 --><h3>现在的时间是:{{time | mySlice}}</h3></div><script type="text/javascript" >Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示Vue.filter('mySlice',function(val){return val.toString().slice(0,4);})const vm = new Vue({el:"#root",data: {time:Date.now(),msg:'你好,尚硅谷'},methods: {dateFun(){return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');}},computed:{date(){return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss');}},// 局部过滤器filters:{timeFormat(val,format){if(format!==null){return dayjs(val).format(format);}else{return dayjs(val).format('YYYY-MM-DD HH:mm:ss');}}}}) const vm2 = new Vue({el:"#root2",data: {time:Date.now()}}) setInterval(()=>{vm.time = Date.now()},1000)</script></body>
</html>4.cookie
勾上后只能被 http携带
5.自定义指令
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- 需求1:定义一个v-big指令,和v-text功能类似，但会把绑定的数值放大10倍，需求2:定义一个v-fbind指令，和 v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。--><!-- 自定义指令总结：一、定义语法：（1）.局部指令：new Vue({ new Vue({directives:{指令名：配置对象} 或 方法 directives:{指令名(){}}}) ([bind:(){},inserted:(){},update(){}]) })（2）.全局指令：Vue.directive(指令名，配置对象）或 Vue.directive(指令名，回调函数）二、配置对象中常用的3个回调：(1）.bind：指令与元素成功绑定时调用。(2）.inserted：指令所在元素被插入页面时调用。(3）.update：指令所在模板结构被重新解析时调用。三、备注：1.指令定义时不加v-，但使用时要加v-；2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。--><!-- 准备好一个容器 --><div id="root">{{name}}<h2>当前的n值是<span v-text="n"></span></h2><h2>放大10倍后的n值是<span v-big="n"></span></h2><button @click="n++">点我n+1</button><button @click="jiejue">点我变化name</button><hr><!-- <input type="text" v-fbind:value="n" autofocus> autofocus 自动获取焦点 不是什么浏览器都好使 --><input type="text" v-fbind:value="n"></div><!-- 准备好一个容器 --><div id="root2">{{name}}<h2>当前的n值是<span v-text="n"></span></h2><h2>放大10倍后的n值是<span v-big="n"></span></h2><button @click="n++">点我n+1</button><button @click="jiejue">点我变化name</button><hr><!-- <input type="text" v-fbind:value="n" autofocus> autofocus 自动获取焦点 不是什么浏览器都好使 --><input type="text" v-fbind1:value="n"></div><script type="text/javascript" >Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示Vue.directive('fbind1',{bind(element,binding){console.log('bind全局',this);//指令与元素成功绑定时(一上来)element.value = binding.value;},inserted(element,binding){//指令所在元素被插入页面时element.focus();console.log('inserted全局',this);},//局部指令update(element,binding){//指令所在的模板被重新解析时console.log('update全局',this);//注意此处时windowelement.value = binding.value;}});const vm = new Vue({el:"#root",data: {name:2,n:1},methods: {jiejue(){this.name++;}},// 函数式定义指令directives:{//big函数合适会被调用？1.指令与元素成功绑定时调用（一上来）2.指令所在的模板被重新解析时//名字比较长就用 -隔开 然后在定义指令的时候用原生写法 'big-number':function(e,b){}big(element,binding){// console.dir(element) 详细输出element// console.log(element instanceof HTMLElement); true// console.log(b);console.log('big',this);element.innerText=binding.value*10;},fbind:{bind(element,binding){console.log('bind',this);//指令与元素成功绑定时(一上来)element.value = binding.value;console.log('bind');},inserted(element,binding){//指令所在元素被插入页面时console.log('inserted');element.focus();console.log('inserted',this);},//局部指令update(element,binding){//指令所在的模板被重新解析时console.log('update');console.log('update',this);//注意此处时windowelement.value = binding.value;}}}}) new Vue({el:'#root2',data: {name:2,n:1},methods: {jiejue(){this.name++;}}, // 函数式定义指令directives:{//big函数合适会被调用？1.指令与元素成功绑定时调用（一上来）2.指令所在的模板被重新解析时//名字比较长就用 -隔开 然后在定义指令的时候用原生写法 'big-number':function(e,b){}big(element,binding){// console.dir(element) 详细输出element// console.log(element instanceof HTMLElement); true// console.log(b);console.log('big',this);element.innerText=binding.value*10;},fbind:{bind(element,binding){console.log('bind',this);//指令与元素成功绑定时(一上来)element.value = binding.value;console.log('bind');},inserted(element,binding){//指令所在元素被插入页面时console.log('inserted');element.focus();console.log('inserted',this);},//局部指令update(element,binding){//指令所在的模板被重新解析时console.log('update');console.log('update',this);//注意此处时windowelement.value = binding.value;}}}})</script></body>
</html>6.引出生命周期
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head><!-- 生命周期：1.又名：生命周期回调函数、生命周期函数、生命周期钩子。2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。4.生命周期函数中的this指向是vm 或组件实例对象。--><body><!-- 准备好一个容器 --><div id="root"><!-- opacity透明度 0~1 --><h2 v-if="a">你好啊</h2><h2 :style="h2style">欢迎学习Vue</h2></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示const vm = new Vue({el: "#root",data: {a:false,h2style: {opacity: 0.2,},},methods: {},// Vue完成模板的解析，并把初始的真实的DOM元素放入页面后 (挂载完毕) 调用mountedmounted() {console.log('mounted',this);//vm setInterval(() => {this.h2style.opacity -= 0.01;if (this.h2style.opacity <= 0) {this.h2style.opacity = 1;}}, 16);this.a=true;},})// window.onload=()=>{// // vm.change(); 页面加载完再调用// }//通过外部的定时器实现(不推荐)// setInterval(() => {// vm.h2style.opacity-=0.01;// if(vm.h2style.opacity<=0){// vm.h2style.opacity = 1;// }// }, 16);</script></body></html>
这个事件监听器指的是自定义事件
7.分析生命周期
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head><body><!-- 准备好一个容器 --><div id="root"><h2>当前的n值是:{{n}}</h2><button @click="add">点我n+1</button><button @click="bye">点我销毁vm</button></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示const vm = new Vue({el: "#root",//把整个template替换上面root 的div// template: ` // <div>// <h2>当前的n值是{{n}}</h2>// <button @click="add">点我n+1</button>// </div>// `,data: {n: 1},methods: {add() {this.n++;},bye(){console.log('bye');this.$destroy();//销毁vm}},beforeCreate() {console.log('beforeCreate');// console.log(this.n);// debugger;//这是前端的debug },created() {console.log('created');},beforeMount() {console.log('beforeMount');//其实vue已经解析完了，没有往页面放呢// debugger;},mounted() {console.log('mounted ');console.log(this.$el instanceof HTMLElement);//true},beforeUpdate() {console.log('beforeUpdate');console.log(this.n);// debugger;},updated() {console.log('updated'); },beforeDestroy() {console.log('beforeDestroy');}, destroyed() {console.log('destroy');},})</script></body></html>8.总结生命周期
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head><!-- 常用的生命周期钩子：1.mounted: 发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】。2.beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】。关于销毁Vue实例1.销毁后借助Vue开发者工具看不到任何信息。2.销毁后自定义事件会失效，但原生DOM事件依然有效。3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。
--><body><!-- 准备好一个容器 --><div id="root"><!-- opacity透明度 0~1 --><h2 v-if="a">你好啊</h2><h2 :style="h2style">欢迎学习Vue</h2><button @click="h2style.opacity=1">透明度设置为1</button><button @click="stop">点我停止</button></div><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示const vm = new Vue({el: "#root",data: {a: false,h2style: {opacity: 0.2,},},methods: {stop() {this.$destroy();}},// Vue完成模板的解析，并把初始的真实的DOM元素放入页面后 (挂载完毕) 调用mountedmounted() {console.log('mounted', this);//vm this.timer = setInterval(() => {//返回的是定时器的id 数字类型 唯一标识console.log("setInterval");this.h2style.opacity -= 0.01;if (this.h2style.opacity <= 0) {this.h2style.opacity = 1;}}, 16);this.a = true;},beforeDestroy() {console.log('清除定时器成功');clearInterval(this.timer)//放入唯一标识清除定时器},})// window.onload=()=>{// // vm.change(); 页面加载完再调用// }//通过外部的定时器实现(不推荐)// setInterval(() => {// vm.h2style.opacity-=0.01;// if(vm.h2style.opacity<=0){// vm.h2style.opacity = 1;// }// }, 16);</script></body></html>