• VUE- 介绍


    一、VUE介绍:

    1,什么是Vue:

    三大主流框架之一:Angular/React/Vue

    JS中没有关键字参数,所以只有类似python中的*号。只不过在JS中用'...'来表示 *

    可以独立完成前后端分离式web项目的JavaScript框架;先进的前端设计模式MVVM(数据的双向绑定),可以完全脱离服务器端,以前端代码复用的方式渲染整个页面形成组件化开发

    2,Vue特点:

    单页面web应用、数据驱动、数据的双向绑定、虚拟DOM

    二、Vue实例

    1,Vue实例

    //el
    new Vue({
        el: '#app' //le为挂载点
    })
    // 实例与页面挂载点一一对应
    // 一个页面中可以出现多个实例对应多个挂载点
    // 实例只操作挂载点内部内容
    
    //data
    <div id='app'>
        {{ msg }}  //{{ }},这里的双大括号里面什么都不写,中间要以空格隔开
    </div>
    <script>
        var app = new Vue({
        	el: '#app',
        	data: {
        		msg: '数据',//上面的msg获取到的就是这里'数据'
        	}
        })
        console.log(app.$data.msg);
        console.log(app.msg);
    </script>
    <!-- data为插件表达式中的变量提供数据 -->
    <!-- data中的数据可以通过Vue实例直接或间接访问-->
    

    2,methods方法内部是处理函数

    <style>
        .box { background-color: orange }
    </style>
    <div id='app'>
        <p class="box" v-on:click="pClick">测试</p>
    	<p class="box" v-on:mouseover="pOver">测试</p>
    </div>
    <script>
        var app = new Vue({
        	el: '#app',
        	methods: {
                pClick () {
                    // 点击测试
                },
                pOver () {
                    // 悬浮测试
                }
        	}
        })
    </script>
    <!-- 了解v-on:为事件绑定的指令 -->
    <!-- methods为事件提供实现体-->
    

    3,插值表达式

    <div id="app">
        <p>{{ msg }}</p>
        <p>{{ num * 10 }}</p>
        <p>{{ msg + num }}</p>
        <p>{{ msg[1] }}</p>
        <p>{{ msg.split('') }}</p>
    </div>
    
    new Vue({
        el: '#app',
        data: {
            msg: 'msg',
            num: 10
        }
    })
    

    三、面向对象js

    1,我们定义一个普通的js函数

    function f1() {
        console.log('f1 run')
    }
    f1();
    

    2,构造函数 == 类

    function F2(name) {
        this.name = name;
        this.eat = function (food) {
            console.log(this.name + '在' + food);
        }
    }
    let ff1 = new F2("Bob");//通过类名加括号传参进行实例化
    console.log(ff1.name);//通过点的方式获取值
    
    let ff2 = new F2("Tom");
    console.log(ff2.name);
    
    ff1.eat('饺子');
    ff2.eat('sao子面');
    
    

    四、js函数补充

    1,函数变量

    function f() {
        d = 40; // 全局变量
        const c = 30;  // 常量
        var a = 10;	  //不仅仅作用于函数体内,
        let b = 20;  // let、const定义的变量不能重复定义,且具备块级作用域
    }
    f();
    
    

    2,箭头函数

     //第一种方式:
    let f3 = () => {
         console.log('f3 run');
     };
    f3();
    // 第二种方式:如果箭头函数没有函数体,只有返回值
    let f4 = (n1, n2) =>  n1 + n2;
    let res = f4(10, 25);
    console.log(res);
    // 第三种方式:如果箭头函数参数列表只有一个,可以省略()
    let f5 = num => num * 10;
    res = f5(10);
    console.log(res);
    //function、箭头函数、方法都具有本质区别:
    //(1)函数体内的this对象,不在是自己的函数,而是上一级的函数对象。
    
    //(2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。
    
    //(3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
    
    //(4)不可以使用yield命令,因此箭头函数不能用作 Generator 函数。
    

    3,axios(ajax)的命令

    new Vue({
        data: {
            res: ''
        },
        methods: {
            fn () {
                // axios插件
                let _this = this;
                this.$axios({
                    url: '',
                    method: 'get',
                    data: {
    
                    },
                }).then(function (response) {
                    _this.res = response.data;
                })
            },
            fn1 () {
                // axios插件
                this.$axios({
                    url: '',
                    method: 'get',
                    data: {
    
                    },
                }).then(response => {
                    this.res = response.data;
                })
            }
        }
    })
    
    
  • 相关阅读:
    开发者使用JasperReport——通过数据源生成报表
    《编程导论(Java)》电子参考文献索引
    QT信号的自定义
    uCOS3空闲任务
    php函数nl2br的反函数br2nl
    PHPstorm相关设置以及快捷键
    phpstorm 左边的文件列表没用了 怎么弄出来
    nl2br()与nl2p()函数,php在字符串中的新行(\n)之前插入换行符
    DNS配置&HTTP 规格严格
    GC与幽灵引用 规格严格
  • 原文地址:https://www.cnblogs.com/mqhpy/p/12051760.html
Copyright © 2020-2023  润新知