标签 script 下的文章 - 自我成长

登录

标签搜索

少年

累计撰写 189 篇文章
累计收到 24 条评论

搜索到 2 篇与的结果

2022-03-06
vue学习一、vue的基本使用<!DOCTYPE html> <head> <title>vue的基本使用</title> </head> <body> <div id="app">   <h1>{{msg}}</h1> </div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> new Vue({ el: '#app', data: { msg: '黄瓜' }, template: '<div><h5>{{msg}}</h5></div>' }); </script> </body> </html>二、vue指令<!DOCTYPE html> <head> <title>vue指令</title> <style> .box{ width: 300px; height: 300px; background-color: red; } .active{ background-color: green; } </style> </head> <body> <div id="app">{{msg}}</div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ el: "#app", data:function(){ return{ msg: 'vue指令', msg2: 'vue的3种{{}}插值，1、{{}} 2、v-text="" 3\v-html=""', isShow: true, isActive: true, frut: [ {id:1,name:"苹果",price:20}, {id:2,name:"火龙果",price:40}, {id:3,name:"西瓜",price:30}, {id:4,name:"荔枝",price:60} ], person:{ name:"zhangsan", age:30, sex:"boy" } } }, template: '<div>{{msg}} <p v-text="msg"></p> <p v-html="msg2"></p> <div v-if="isShow">v-if的使用</div> <div v-if="Math.random()>0.5">显示</div><div v-else>隐藏</div> <div v-show="true">v-show显示</div> <div class="box" v-on:click="clickHander" v-bind:class="{active:isActive}"></div> <ul><li v-for="(item,index) in frut"><h1>{{index}}</h1><h3>{{item.id}}</h3><h2>{{item.name}}</h2><h1>{{item.price}}</h1></li></ul> <ul><li v-for="(value,key) in person">{{value}}==={{key}}</li></ul> </div>', methods:{ clickHander(e){ console.log(this); this.isActive=!this.isActive; } } }); console.log(vm); </script> </body> </html>三、vue的双向绑定<!DOCTYPE html> <head> <title>vue的双向绑定</title> </head> <body> <div id="app"> <input type="text" v-model="msg"> <h3 >{{msg}}</h3> </div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> new Vue({ el:"#app", data:function(){ return{ msg:"Hello World" } }, template:'', methods:{ } }); </script> </body> </html>四、局部组件的创建<!DOCTYPE html> <head> <title>vue局部组件的创建</title> </head> <body> <div id="app"><h1>{{msg}}</h1></div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> var App={ data(){ return { } }, template:'<div>VUE Hello </div>' } new Vue({ el:"#app", data(){ return{ msg:"Hello ---- World" } }, template:'<App/>', methods:{ }, components:{ App } }); </script> </body> </html>五、全局组件<!DOCTYPE html> <head> <title>vue全局组件的创建</title> </head> <body> <div id="app"></div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('Vquanju',{ data(){ return{ } }, template:'<div><button>全局组件按钮</button></div>' }); var Vjubu={ data(){ return{ } }, template:'<div><h2>我是局部组件</h2><Vquanju/></div>' } var Vju={ data(){ return{ } }, template:'<div><h2>我是局部组件2</h2><Vquanju/></div>' } new Vue({ el: "#app", data(){ return { } }, template: '<div><Vjubu/><Vju/></div>', components:{ Vjubu, Vju } }); </script> </body> </html>六、通过prop往子组件通信<!DOCTYPE html> <head> <title>通过prop往子组件通信</title> </head> <div id="app">{{msg}}</div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('Vchild',{ data(){ return{ } }, template:'<div><p>我是子组件<p/><input type="text" v-model="bdata" ></input></div>', props:['bdata'] }); Vue.component('Vparent',{ data(){ return{ bmsg: 'Hello,绑定数据' } }, template:'<div><p>我是父组件</p><Vchild :bdata="bmsg"/></div>' }); var App={ data(){ return{ } }, template:'<h1><Vparent/></h1>' } new Vue({ el: '#app', data(){ return{ msg: '好罗' } }, components:{ App }, template:'<App/>' }); </script> </html>七、通过事件向子组件发送消息<!DOCTYPE html> <head> <title>通过prop往子组件通信</title> </head> <div id="app">{{msg}}</div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('Vchild',{ data(){ return{ newData: '' } }, template:'<div><p>我是子组件{{childData}}<p/><input type="text" v-model="newData" @input="changeValue(newData)" /></div>', props:['childData'], methods:{ changeValue(val){ this.$emit('childHandler',val); } } }); Vue.component('Vparent',{ data(){ return{ bmsg: 'Hello,绑定数据' } }, template:'<div><p>我是父组件</p><Vchild :childData="bmsg" @childHandler="childHandler"/></div>', methods:{ childHandler(val){ console.log(val+"-------------------") } } }); var App={ data(){ return{ } }, template:'<h1><Vparent/></h1>' } new Vue({ el: '#app', data(){ return{ msg: '好罗' } }, components:{ App }, template:'<App/>' }); </script> </html>八、全局组件的使用<!DOCTYPE html> <head> <title>vue全局组件的创建</title> <style> .buttons{ display: inline-block; line-height: 1; white-space: nowrap; cursor: pointer; background: #fff; border: 1px solid #dcdfe6; color: #606266; -webkit-appearance: none; text-align: center; box-sizing: border-box; outline: none; margin: 0; transition: .1s; font-weight: 500; padding: 12px 20px; font-size: 14px; border-radius: 4px; } .successs{ color: #fff; background-color: #67c23a; border-color: #67c23a; } .defaults{ color: #fff; background-color: #409eff; border-color: #409eff; } </style> </head> <body> <div id="app"></div> <script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script> <script type="text/javascript"> Vue.component('Vquanju',{ data(){ return{ } }, template:'<div><button class="buttons" :class="type">全局组件按钮<slot></slot></button></div>', props:['type'] }); //利用父向子传值，自己封装组件，例如按钮 var Vjubu={ data(){ return{ } }, template:'<div><h2>我是局部组件 </h2><Vquanju>slot覆盖内容</Vquanju> <Vquanju type="successs">默认</Vquanju > <Vquanju type="defaults">成功</Vquanju></div>', } var Vju={ data(){ return{ } }, template:'<div><h2>我是局部组件2</h2><Vquanju/></div>' } new Vue({ el: "#app", data(){ return { } }, template: '<div><Vjubu/><Vju/></div>', components:{ Vjubu, Vju } }); </script> </body> </html>
- 2022年03月06日
- 257 阅读
- 0 评论
- 2 点赞
2022-03-06
ES6语法 ES6语法一、let<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // { // //var 声明的变量往往会跨域 // //let 声明的变量有严格局部作用域 // var a = 1; // let b = 2; // } // console.log(a); //1 // console.log(b); //Uncaught ReferenceError: b is not defined // //var 可以声明多次 // //let 只能声明一次 // var m = 3; // var m = 4; // let n = 5; // // let n=5; // console.log(m); //3 // console.log(n); //Identifier 'n' has already been declared // //var 会变量提升 // //let 不存在变量提升 // console.log(x); //undefined // var x = 10; // console.log(y); //Cannot access 'y' before initialization // let y = 20; // // const 用于定义常量 // //1、声明之后不允许改变。 // //2、一旦声明必须初始化，否则会报错 // const a = 1; // a = 3; //Assignment to constant variable. </script> </body> </html>二、解构表达式<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // //数组结构 // let arr =[1,2,3]; // // let a = arr[0]; // // let b = arr[1]; // // let c = arr[2]; // //快速复制 // let [a,b,c] = arr; // console.log(a,b,c); // //对象结构 // const person = { // name: "jack", // age: 21, // language: ['java','js','css'] // } // // const name = person.name; // // const age = person.age; // // const language = person.language; // //新语法 // const {name:abc, age, language} = person; // console.log(abc,age,language); // //字符串扩展 // let str ="hello.vue"; // console.log(str.startsWith("hello")); // console.log(str.endsWith(".vue")); // console.log(str.includes("e")); // console.log(str.includes("hello")); // //字符串模板 // let ss = // ` // <div> // <span>Hello World</span> // </div> // `; // console.log(ss); //字符串插入变量和表达式。变量名写在${}中，在${}中可以放入JavaScript表达式。注意符号是·不是单引号 function fun(){ return "这是一个函数"; } let abc = "zhangsan"; let age = 20; let info = `我是${abc},今年${age+10}岁了，我想说:${fun()}`; console.log(abc,age,info); </script> </body> </html>三、函数优化<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // //在SE6，我们无法给一个函数参数设置默认值，只能采用变通写法； // function add(a, b){ // //判断是否为空，为空就给默认值1 // b = b || 1; // return a + b; // } // console.log(add(10)); // //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值 // function add2(a, b = 1){ // return a + b; // } // console.log(add2(10)); // //不定参数 // function fun(... values){ // console.log(values.length); // } // console.log(fun("1111","22",33)); // //箭头函数 // // var print = function (obj){ // // console.log(obj); // // } // // console.log(print("Hello")); // //现在写法，一个参数 // var print = obj => console.log(obj); // print("China") // //多个参数 // var sum = function(a, b){ // return a + b; // } // console.log(sum(1,9)); // var sum2 = (a, b) => a+b; // console.log(sum2(1,9)); // //以前写法 // var sum3 = function(a, b){ // c = a +b; //多了一步操作 // return a + c; // } // console.log(sum3(1,9)); // //新写法 // var sum4 = (a, b) =>{ // c = a + b; // return a + c; // } // console.log(sum4(1,9)); //实战：箭头函数结合解构表达式 const person = { name: "jack", age: 20, language: ['java','js','css'] }; function hello(person){ console.log("你好："+person.name); } hello(person); var hello2 = (person)=>console.log("你好哟："+person.name); hello2(person); //箭头函数+解构表达式 var hello3 = ({name})=>console.log("你好哟："+ name); hello3(person); </script> </body> </html>四、对象优化<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // const person = { // name: "jack", // age : 20, // fun : ['jva','css','html'] // }; // console.log(Object.keys(person)); // console.log(Object.values(person)); // console.log(Object.entries(person)); // const a ={aa: 1}; // const b ={bb: 2}; // const c ={cc: 3}; // console.log(Object.assign(a,b,c)); // //声明对象简写 // const name ="zhangsan"; // const age =10; // const person = {name, age}; // console.log(person); // //对象大的函数属性简写 // let person = { // name: "jack", // //以前 // eat: function(food){ // console.log(this.name+ "在吃"+ food); // }, // //箭头函数this不能使用 // eat2: food => { // console.log(this.name+ "在吃"+ food); // }, // eat3: food => { // console.log(person.name+ "在吃"+ food); // }, // eat4(food){ // console.log(person.name+ "在吃"+ food); // } // } // person.eat("香蕉"); // person.eat2("苹果"); // person.eat3("草莓"); // person.eat3("芒果"); //对象拓展运算符 //1、拷贝对象(深拷贝) let p1 = {name: "zhangsan", age: 19}; let p2 = {... p1}; console.log(p2) //2、合并对象 const a ={name: "lisi"} const b = {age: 20}; //后面的name会覆盖之前的name let person = {name: "wangwu"}; person = {...a, ... b}; console.log(person); </script> </body> </html>五、map和reduce<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> //数组中新增了map和reduce方法。 //map():接收一个函数，将原数组中的所有袁术用这个函数处理后放入新数组返回。 let arr = ['1','2','-3','4']; // arr = arr.map((item)=>{ // return item * 2; // }); arr = arr.map(item => item*2); console.log(arr); //reduce()为数组中的每一个袁术一次执行回调函数，不包括数组中被删除或从未被赋值的元素。\ //arr.reduce(callback,[initialValue]) /** * 1、previousValue(上一次调用回调返回的值，或者是提供的初始值(initialValue)) * 2、currentValue（数组中当前被处理的元素） * 3、index（当前元素在数组中的索引） * 4、array（调用reduce的数组） **/ let result = arr.reduce((a,b )=>{ console.log("上一次处理后："+a); console.log("当前正在处理："+b); return a+b; },100); console.log(result); </script> </body> </html>六、promise<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body>  <script> //原始写法 // $.ajax({ // url: "mock/user.json", // success(data) { // console.log("查询用户：", data); // $.ajax({ // url: `mock/user_corse_${data.id}.json`, // success(data) { // console.log("查询到课程：", data); // $.ajax({ // url: `mock/corse_score_${data.id}.json`, // success(data) { // console.log("查询到分数：", data); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); //promise写法 // const promise = new Promise(function (resolve, reject) { // // 执行异步操作 // if (/* 异步操作成功*/) { // resolve(value);// 调用resolve，代表Promise 将返回成功的结果 // } else { // reject(error);// 调用reject，代表Promise 会返回失败结果 // } // }); // const promise = new Promise((resolve, reject) => { // // 执行异步操作 // if (/* 异步操作成功*/) { // resolve(value);// 调用resolve，代表Promise 将返回成功的结果 // } else { // reject(error);// 调用reject，代表Promise 会返回失败结果 // } // }); // promise.then(function (value) { // // 异步执行成功后的回调 // }).catch(function (error) { // // 异步执行失败后的回调 // }) // new Promise((resolve, reject) => { // $.ajax({ // url: "mock/user.json", // success(data) { // console.log("查询用户：", data); // resolve(data.id); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }).then((userId) => { // return new Promise((resolve, reject) => { // $.ajax({ // url: `mock/user_corse_${userId}.json`, // success(data) { // console.log("查询到课程：", data); // resolve(data.id); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }); // }).then((corseId) => { // console.log(corseId); // $.ajax({ // url: `mock/corse_score_${corseId}.json`, // success(data) { // console.log("查询到分数：", data); // }, // error(error) { // console.log("出现异常了：" + error); // } // }); // }); // promise优化处理后写法 let get = function (url, data) { // 实际开发中会单独放到common.js 中 return new Promise((resolve, reject) => { $.ajax({ url: url, type: "GET", data: data, success(result) { resolve(result); }, error(error) { reject(error); } }); }) } // 使用封装的get 方法，实现查询分数 get("mock/user.json").then((result) => { console.log("查询用户~~：", result); return get(`mock/user_corse_${result.id}.json`); }).then((result) => { console.log("查询到课程~~：", result); return get(`mock/corse_score_${result.id}.json`) }).then((result) => { console.log("查询到分数~~：", result); }).catch(() => { console.log("出现异常了~~：" + error); }); </script> </body> </html>七、模块化<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>  </body> </html>
- 2022年03月06日
- 271 阅读
- 0 评论
- 1 点赞