1,Vue常用语法
- vue常用语法之变量的定义
// 1,变量相关 // 变量的提升 var username = "雪雪"; var username ; console.log(username); var username = "小雪"; let username; console.log(username); let username = "雪人"; // 写一个if 判断的语句,var变量:只有全局作用域和函数作用域 // let 有全局作用域和和函数作用域,块级作用域 if (true) { var username = "雪雪"; let age = 22; console.log(username); // 在块级里边var定义的变量是可以访问的 console.log(age) // 在块级标签里边let的定义的变量也是好用的 } console.log(username); // var的变量可以找得到 console.log(age) // let定义的变量找不到会报错,undefined // let定义的变量不能重复定义 var username = "老郑"; var username = "老孙"; console.log(username); let username = "老郑"; let username = "老孙"; console.log(username);
- Vue常用语法之模板字符串
// 2,模板字符串要用 <--->反引号变量的替换 let oDiv = document.getElementById("app"); oDiv.innerHTML = "<h1>Hello Vue" + "<h2>i am ok</h2></h1>"; let username1 = "小雪"; let username2 = "雪人"; oDiv.innerHTML = ` <h1>Hello ${username1}</h1> <h2>Hello ${username2}</h2>`;
- Vue常用语法之数据的解构和赋值
// 3,数据的结构和赋值 // 3.1数据结构的赋值 let ary = [1,2,3]; let[a,b,c] = ary; console.log(a,b,c); // 3.2,数据的结构 let obj = { username : "雪雪 ", age: 23 }; // 声明一个变量用对象去接 let{username, age} = obj; console.log(username, age); // 数据的结构 let a = 1; let b = 2; // 在解构的时候 [a, b] = [b, a]; console.log(a,b);
- Vue常用语法之函数的扩展
// 4,默认值参数 function foo(x, y=10) { let number = y; return number; } ret = foo(1, 2); console.log(ret); ret1 = foo(1); console.log(ret1); ret3 = foo(1, 0); console.log(ret3);
- Vue常用语法之箭头函数
// 4.1,箭头函数 // 一个参数 let foo = v => v; // (参数)=> (return) ret1 = foo(10); console.log(ret1); // 0或多个参数 let bar = (x,y) => {return x+y}; ret2 = bar(10, 20); console.log(ret2) function foo(){ console.log(this) } let bar = () => console.log(this); let obj = { foo: foo, bar: bar, }; let ganggang = { obj : obj }; foo(); // 调用foo函数是window ganggang.obj.foo(); // 调用obj中的foo函数是对象 ganggang.obj.bar(); // 是window let bar = (x,y) => x+y; ret = bar(1, 2);' console.log(ret)
- Vue值常用语法之类
// 5,实例化对象的方法 // function Person(){ // this.username = "雪人"; // this.age = 20; // } // Person.prototype.showInfo = function () { // console.log(this.username); // }; // let xuexue = new Person(); // class Person{ // // 构造函数 // constructor (username, age) { // this.username = username; // this.age = age; // }; // showInfo() { // console.log(this.username, this.age); // } // } // let xuexue = new Person("xuexue", 18); // xuexue.showInfo(); // 定义类在ES6中用class,还要用constructor构造函数固定写法 // class Xuexue { // // 构造函数类似于python中的 __init__方法 // constructor(username, age=29, account=100000) { // this.username = username; // this.age = age; // this.account = account; // } // // 显示信息,在这里是类似于一个类的方法 // showInfo(){ // console.log(this.username, this.age, this.account); // } // } // // 继承前边的类用extends // class Xiaoxue extends Xuexue { // // 构造子类中独有的属性 // constructor(username){ // // 继承父类中的constructor方法 // super(); // this.username = username; // // this.age = age; // // this.account = account // } // } // let xiaoxue = new Xiaoxue("小雪"); // xiaoxue.showInfo() // 小结:父类中定义了字段,子类就不要定义,定义了也不好使,不管用
- Vue常用语法之对象的单体模式
// 6, 单体模式 // let obj = { // name: "xueren", // foo(){ // // console.log(this.name); // } // }; // // obj.foo(); // ret = obj.name; // console.log(ret) // 小结:所谓单体是指在对象里定义属性和函数,通过对象名去调用属性和函数 // 6.1,演示 // let obj = { // name: "雪人", // f: ()=>{ // console.log(this.name) // } // }; // obj.f() // 当用箭头函数的时候必须按照属性的格式写,且找不到name,找到的是window
- Vue常用语法之框架的应用
// 7,vue框架的作用 // 方法一 // let oDiv = document.getElementById("app"); // oDiv.innerText = "Hello Vue"; // 方法二, Vue框架是数据模板引擎 // 第一步,先导入vue.min,第二步实例化一个Vue对象,前边加关键字new // new Vue({ // el: "#app", // el表示元素element: 选择器 // data: { // data表示数据greeting表示引用的变量 // greeting: "Hello Vue", // } // })
- Vue常用指令之v-text
// 9, Vue常用指令之v-text // 数据模板引擎 // v-开头的指令是帮助我们渲染数据用的 // new Vue({ // el:"#app", // data: { // greeting: "Hello Vue", // } // }) // v-text指的是给标签添加内容
- Vue常用指令之v-html
// 10, Vue指令之v-html // new Vue({ // el:"#app", // data: { // greeting: "<h1>Hello Vue</h1>", // } // }) // v-html返回的是一个html标签
- Vue常用指令之v-for
// 11, Vue常用指令之v-for // 数据模板引擎 // v-开头的指令是帮助我们渲染数据用的 // new Vue({ // el: "#app", // data: { // xueren: ["我", "刘继成", "myself"], // friends:[ // { // name: "老郑", // age: 28, // hobby: "王者荣耀", // }, // { // name: "老孙", // age: 23, // hobby: "tourism", // }, // { // name: "老吴", // age: 33, // hobby: "吃鸡", // } // ] // } // }) // 内在机制是for循环,for循环的时候,如果是字典,就可以用点(.)的操作
- Vue常用指令之v-if
// 12, Vue常用指令之v-if // let vm = new Vue({ // el: "#app", // data: { // role: "xuexue", // } // }) // 这个没啥,就是个判断
- Vue常用指令之v-show
// 13, Vue常用指令之v-show // 数据模板引擎 // v-开头的指令是帮助我们渲染数据用的 // let vm = new Vue({ // el:"#app", // data: { // // isShow: false, // 只有isShow是true才能展示出来 // isShow: true, // } // })
- Vue值常用指令之v-bind
/ 14, Vue常用指令之v-bind,绑定 // let vm = new Vue({ // el: "#app", // data: { // jingdong:"https//www.jd.com", // isActive: "active" // } // }) // v-bind绑定的时候要正在a标签的href前边写并加上一个:
- Vue常用指令之v-on
// 15, Vue常用之v-on // let vm = new Vue({ // el: "#app", // data: { // isActive:false, // }, // methods: { // changeColor: function(){ // this.isActive = !this.isActive; // } // } // }) // 小结:v-on可以简写成@但是在用v-on:后边很内容
- Vue常用指令之v-mode
/ 16, Vue常用之v-model // let vm = new Vue({ // el: "#app", // data: { // name: "赵丽颖", // genders: [], // girlfriends: [], // } // }) // 获取用户输入的数据用的v-model要放在script中data一致
- Vue常用指令之计算属性
// 18,Vue常用语法之计算 // let vm = new Vue({ // el: "#app", // data: { // python: 88, // Vue: 100, // Go: 65, // }, // // 计算输入框的和在程序启动的时候,加载需要消耗性能 // computed: { // sumScore: function() { // console.log(1); // return this.python + this.Vue + this.Go; // }, // }, // // watch是监听python输入框的值的变化 // watch: { // python: function () { // alert(this.python); // return this.python + 1; // // } // } // })
- Vue常用指令之修饰符
// 19,Vue常用语法之指令修饰符 // let vm = new Vue({ // el: "#app", // data: { // python: 88, // Vue: 100, // Go: 65, // }, // computed: { // sumScore: function() { // console.log(1); // return this.python + this.Vue + this.Go; // } // }, // watch: { // python: function() { // return this.python + 1 // } // } // }) // 小结:v-model后边可以.trim去空格.number把输入的字符串变成数字类型,lazy当失去焦点在去监听数据的变化
- Vue常用指令之获取DOM元素
/ 20,Vue常用语法之获取DOM元素 // let vm = new Vue({ // el: "#app", // data: { // isActive: "active", // }, // methods: { // changeColor: function (){ // this.$refs.myRef.className = this.isActive; // } // } // }) // V-on绑定事件点击这个按钮洗护发methods中的changeColor函数,将ref中的样式增加红色的样式
- Vue之常用指令之自定义指令
/ 21,Vue常用指令之自定义指令 Vue.directive("pos", function(el, binding){ console.log("el", el); console.log("binding", binding); if (binding.value) { el.style["position"] = "fixed"; for (let key in binding.modifiers) { el.style[key] = 0; } el.style["right"] = 0; el.style["bottom"] = 0 } }); let vm = new Vue({ el: "#app", data: { position: true } })