Vue常用語法及命令
阿新 • • 發佈:2018-12-04
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 } })