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
}
})