Vue常用语法及命令

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