zoukankan      html  css  js  c++  java
  • Vue框架

    Vue概述

    什么是Vue

    Vue是可以独立完成前后端分离式Web项目的JavaScript框架

    Vue的功能

    前端三大主流框架:

    1. Angular
    2. React
    3. Vue

    使用Vue之后,可以完全脱离服务器端,以前端代码复用的方式渲染整个页面:组件化开发

    vue优点:

    ​ 中文API、单页面应用、组件化开发、数据双向绑定、虚拟DOM、数据驱动思想(相比DOM驱动)

    Vue的使用

    基本语法:

    <div id="app">
    	{{ }}
    </div>
    <script src="js/vue.min.js"></script>
    <script>
    	new Vue({
    		el: '#app'
    	})
    </script>
    

    Vue实例(插值表达式)

    '''
    1、通常挂载点都采用id选择器(唯一性)
    2、html与body标签不能作为挂载点(组件知识点解释)
    '''
    

    el:实例

    #实例与页面挂载点一一对应,在一个页面中可出现多个实例对应多个挂载点
    #实例只操作挂载点内部内容
    <div id="app">
        <p>{{msg}}</p>
        <p>{{ num - 5 }}</p>
    </div>
    
    <script>
        new Vue({
            el:'#app',		#挂载点采用的是css3选择器语法,但是只能匹配第一次检索到的结果
            data:{
                msg:'哈哈是我',
                num:'7'
            }
        })
    </script>
    

    data:数据

    #data为插件表达式中的变量提供数据
    #data中的数据可以通过Vue实例直接或者间接访问
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'哈哈是我',
                num:'7'
            }
        })
    </script>
    

    methods:方法

    '''
    #v-on:为事件绑定指令
    #methods为事件提供实现体
    '''
    <script>
        let app = new Vue({
            el:'#app',
            data:{
                msg:'哈哈是我',
                num:'7'
            },
            methods:{
                pClick:function(){
                    alert('111');
                    app.msg='我被点了'
                }
            }
        })
    </script>
    

    Vue指令

    文本相关指令

    #文本指令:
    '''
    1.{{ }}
    2.v-text:不能解析html语法的文本,传入什么就输出什么
    3.v-html:可以解析html语法文本
    4.v-once:使被处理的标签内容,只能被解析一次
    '''
    
    <body>
    <div id="app">
        <p>{{msg.split('')}}</p>
        <p v-text="msg.split('')"></p>
        <p v-text="info"></p>
        <p v-html="info"></p>
    
        <hr>
        <p v-on:click="pClick">{{msg+info}}</p>
        <p>{{msg}}</p>
    
    </div>
    
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                msg:'simple',
                info:'<h1>我来啦</h1>'
            },
            methods:{
                pClick:function () {
                    this.msg='简简单单'
                }
            }
        })
    </script>
    

    事件指令

    '''
    #事件指令:	v-on:事件名="方法变量"
    #简写:  @事件名="方法变量"
    事件变量,不添加(),默认会传事件对象: $event 
    事件变量,添加(),代表要自定义传参,系统不再传入事件对象,但是可以手动传入事件对象 
    '''
    @click			左键点击
    @mouseover		鼠标悬浮上
    @mouseout		鼠标离开
    @mouseup		左键点击抬起
    @mousemove		鼠标离开
    @contextmenu	右键点击
    
    <body>
        <div id="app">
     
            <p v-on:click="f1">{{ msg }}</p>
            <p @click="f1">{{ msg }}</p>
            <hr>
            <!--mouseover mouseenter  |  mouseout mouseleave-->
            <p @mouseover="f2" @mouseout="f3" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p>
            <hr>
    
            <p @click="f8($event, '第一个')">{{ info }}</p>
            <p @click="f8($event, '第二个')">{{ info }}</p>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                msg: '点击切换',
                action: '鼠标事件',
                info: '确定点击者'
            },
            methods: {
                f1 () {
                    this.msg = '点击了'
                },
                f2 () {
                    this.action = '悬浮';
                    console.log('悬浮')
                },
                f3 () {
                    this.action = '离开'
                },
                f4 () {
                    this.action = '按下'
                },
                f5 () {
                    this.action = '抬起'
                },
                f6 () {
                    this.action = '移动';
                    console.log('移动')
                },
                f7 () {
                    this.action = '右键';
                },
                f8 (ev, argv) {
                    console.log(ev, argv);
                    this.info = argv + '点击了';
                }
            }
        })
    </script>
    

    属性指令

    '''
    属性指令:	v-bind:属性名="变量"
    简写:		:属性名="变量"
    '''
    #v-bind:title="pTitle" 当鼠标悬浮在该标签上,出现提示信息
    <p v-bind:title="pTitle" :abc="def" @click="changeImg">简单使用</p>
       
    #多类名可以用[]语法,采用多个变量来控制
    <p :class="[c2, c3]"></p>
        
    #选择器位可以设置为变量,也可以设置为常量
    <p :class="['d1', c4]"></p>
    
    #{类名: 布尔值}控制某类名是否起作用
    <p :class="{x1: false}"></p>
    
    #多种语法混用
    <p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p>
    
    #style属性绑定
    <p :style="myStyle">样式属性</p>
    <p :style="{ w,height: h, backgroundColor: bgc}">样式属性</p>
    

    表单指令

    #表单指令:	v-model='变量'	变量与value有关
    '''
    通过v-model可以实现数据的双向绑定:
    	v-model绑定的变量值可以影响表单标签的值,标签的值也可影响变量的值
    '''
    #普通输入框
    <input type="text" name="user" id="user" placeholder="点我" v-model="v1">
    <input type="text" v-model="v1">
    {{ v1 }}
    
    #单选框
    男:<input type="radio" name="gender" value="male" v-model="v2">
    女:<input type="radio" name="gender" value="female" v-model="v2">
    {{ v2 }}
    
    #复选框
    爱好:<br>
            看书:<input type="checkbox" name="hobbies" value="book" v-model="v4">
            电影:<input type="checkbox" name="hobbies" value="movie" v-model="v4">
            音乐:<input type="checkbox" name="hobbies" value="music" v-model="v4">
            {{ v4 }}
            
    new Vue({
        el: '#app',
        data: {
            v1: '123',
            v2: 'male',
            v4:  [ "book", "music", "movie" ],
        }
    })
    

    条件指令

    '''
    条件指令:	v-show='布尔变量'	隐藏时,采用display:none渲染
    		   v-if='布尔变量'	   隐藏时,不在页面中渲染(防止不渲染的数据泄露)
    '''
    
    <body>
        <div id="app">
            <!--条件指令:
                v-show="布尔变量"   隐藏时,采用display:none进行渲染
                v-if="布尔变量"     隐藏时,不再页面中渲染(保证不渲染的数据泄露)
                -----------------------------
                v-if | v-else-if | v-else
            -->
            <div class="box r" v-show="is_show"></div>
            <div class="box b" v-if="is_show"></div>
            <hr>
    
            <div class="wrap">
                <div>
                    <button @click="page='r_page'" :class="{active: page === 'r_page'}">红</button>
                    <button @click="page='b_page'" :class="{active: page === 'b_page'}">蓝</button>
                    <button @click="page='g_page'" :class="{active: page === 'g_page'}">绿</button>
                </div>
                <div class="box r" v-if="page === 'r_page'"></div>
                <div class="box b" v-else-if="page === 'b_page'"></div>
                <div class="box g" v-else></div>
            </div>
    
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                is_show: false,
                page: 'r_page'
            }
        })
    </script>
    

    循环指令

    '''
    循环指令:	v-for='ele	in	string|array|obj'
    列表渲染是循环,需要赋值变量给key,使用key需要v-bind:处理
    v-for变量数组[]时,接收两个值时,第一个为元素值,第二个为元素索引
    v-for变量对象{}时,接收三个值时,第一个为元素值,第二个为元素键,第三个为元素索引
    '''
    <body>
    <div id="app">
        <p>{{info}}</p>
        <hr>
        <i v-for="c in info">{{ c }}</i>
        <hr>
        <i v-for="(c,i) in info">{{ i }}:{{ c }}<br></i>
        <hr>
        <div v-for="(e, i) in stus">{{ i }}:{{ e }}</div>
    
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                info:'nofearofthefeture',
                stus: ['Simple', 'Momo', 'Jerry'],
            }
        })
    </script>
    </body>
    

    斗篷指令

    <style type="text/css">
        [v-cloak] { display: none; }
    </style>
    <div id="app" v-cloak>
        {{ msg }}
    </div>
    <script src="js/vue.min.js"></script>
    <script type="text/javascript">
    	new Vue({
    		el: "#app",
    		data: {
    			msg: "message"
    		}
    	})
    </script>
    <!-- 避免页面闪烁-->
    

    todoliat案例

    #前台数据库
        #localStorage: 永久存储
        #sessionStorage:临时存储(所属页面标签被关闭后,清空)
    <body>
        <div id="app">
            <input type="text" v-model="comment">
            <button type="button" @click="send_msg">留言</button>
            <ul>
                <li v-for="(msg, i) in msgs" @click="delete_msg(i)">{{ msg }}</li>
            </ul>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                comment: '',
                msgs: localStorage.msgs ? JSON.parse(localStorage.msgs) : [],
    
            },
            methods: {
                send_msg() {
                    #将comment添加到msgs数组中:unshift push 首尾增 | shift pop 首尾删
                    #this.msgs.push(this.comment);
    
                    #数组操作最全方法:splice(begin_index, count, ...args)
                    #this.msgs.splice(0, 2);
    
                    if (!this.comment) {
                        alert('请输入内容');
                        return false;
                    }
                    this.msgs.push(this.comment);
                    this.comment = '';
    
                    localStorage.msgs = JSON.stringify(this.msgs);
                },
                delete_msg(index) {
                    this.msgs.splice(index, 1);
                    localStorage.msgs = JSON.stringify(this.msgs);
                }
            }
        })
    </script>
    <script>
        #存
        #localStorage.n1 = 10;
        #sessionStorage.n2 = 20;
    
        # 取
        #console.log(localStorage.n1);
        #console.log(sessionStorage.n2);
    
        #数组等类型需要先序列化成JSON
        #localStorage.arr = JSON.stringify([1, 2, 3]);
        #console.log(JSON.parse(localStorage.arr));
    
        #清空数据库
        #localStorage.clear();
    </script>
    

    过滤器

    '''
    1. 在filters成员中定义过滤器方法
    2. 可以多多个值进行过滤,过滤时还可以额外传入辅助参数
    3. 过滤的结果可以再进行下一次过滤(过滤的串联)
    '''
    
    <body>
        <div id="app">
            <p>{{ num | f1 }}</p>
            <p>{{ a, b | f2(30, 40) | f3 }}</p>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                num: 10,
                a: 10,
                b: 20,
            },
            filters: {
                #传入所有要过滤的条件,返回值就是过滤的结果
                f1 (num) {
                    console.log(num);
                    return num * 10;
                },
                f2 (a, b, c, d) {
                    console.log(a, b, c, d);
                    return a + b + c + d;
                },
                f3 (num) {
                    return num * num;
                }
            }
        })
    </script>
    

    计算属性

    '''
    result必须渲染
    绑定的方法内部出现的变量更新方法被调用
    方法返回值是result的值
    result不能在data中重复定义
    '''
    '''
    1、computed计算属性可以声明 方法属性(方法属性一定不能在data中重复声明)
    2、方法属性 必须在页面中渲染,才会启用绑定的方法,方法属性的值就是绑定方法的返回值
    3、绑定的方法中出现的所有变量都会被监听,任何一个变化发生值更新都会重新出发绑定方法,从而更新方法属性的值
    
    * 一般用来解决的问题:一个变量值依赖于多个变量
    '''
    <body>
        <div id="app">
            <input type="number" min="0" max="100" v-model="n1">
            +
            <input type="number" min="0" max="100" v-model="n2">
            =
            <button>{{ result }}</button>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                n1: '',
                n2: '',
                // result: 0,
            },
            
            computed: {
                result () {
                    console.log('被调用了');
                    n1 = +this.n1;
                    n2 = +this.n2;
                    return n1 + n2;
                }
            }
        })
    </script>
    </html>
    

    监听属性

    '''
    1、监听的属性需要在data中声明,监听方法不需要返回值
    2、监听的方法名就是监听的属性名,该属性值发生更新时就会回调监听方法
    3、监听方法有两个回调参数:当前值,上一次值
    * 解决的问题:多个变量值依赖于一个变量值
    '''
    <body>
        <div id="app">
            <p>姓名:<input type="text" v-model="full_name"></p>
            <p>姓:{{ first_name }}</p>
            <p>名:{{ last_name }}</p>
        </div>
    </body>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                full_name: '',
                first_name: '未知',
                last_name: '未知',
            },
            watch: {
                #n是监听的属性当前值,o是其上一次的值,监听的属性值每次更新都会回调监听方法
    
                full_name(n, o) {
                    name_arr = n.split('');
                    this.first_name = name_arr[0];
                    this.last_name = name_arr[1];
                },
            }
        })
    </script>
    </html>
    

    冒泡排序

    <script>
        new Vue({
            el: '#app',
            data: {
    
            }
        })
    </script>
    <script>
    
        let arr = [3, 2, 5, 4, 1];
        console.log(arr);
    
        for (let i = 0; i < arr.length - 1; i++) {  // 外层循环控制趟数
            for (let j = 0; j < arr.length - 1 - i; j++) {  // 内存循环控制比较次数
                if (arr[j] > arr[j + 1]) {
                    let temp = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = temp;
                }
            }
        }
        console.log(arr);
    
        stus = [
            {
                name: 'Bob',
                grade: 98
            },
            {
                name: 'Tom',
                grade: 87
            },
            {
                name: 'Jerry',
                grade: 92
            },
        ];
        // 按照分数进行排名
        for (let i=0; i<stus.length-1; i++) {
            for (let j=0; j<stus.length-1-i; j++) {
                // 处理条件即可
                if (stus[j].grade > stus[j + 1].grade) {
                    let temp = stus[j];
                    stus[j] = stus[j + 1];
                    stus[j + 1] = temp;
                }
            }
        }
    
        console.log(stus);
    
    </script>
    

    js补充

    js面向对象

    <script>
        // undefined、null、string、number、boolean、object(Array)、function
        // var、let、const、不写
    
        // object(Array)、function
    
        function f1() {
            console.log('f1 run')
        }
        f1();
    
        // 构造函数 == 类
        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子面');
    
        let obj = {
            name: 'Jerry',
            // eat: function (food) {
            //     console.log(this.name + '在' + food)
            // },
            eat(food) {  // 方法的语法
                console.log(this.name + '在' + food)
            }
        };
        console.log(obj.name);
        obj.eat('hotdog');
    </script>
    

    js函数

    <script>
        function f() {
            d = 40; // 全局变量
        }
        f();
        
        console.log(d);
        const c = 30;  // 常量
        console.log(c);
    
        if (1) {
            var a = 10;
            let b = 20;  // let、const定义的变量不能重复定义,且具备块级作用域
        }
        console.log(a);
        // console.log(b);
    
        for (let i = 0; i < 5; i++) {
            console.log(i);
        }
        // console.log(i);
        // console.log(i);
        // console.log(i);
    
        function f1() {
            console.log('f1 run');
        }
        let f2 = function () {
            console.log('f2 run');
        };
        f2();
    
        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、箭头函数、方法都具有本质区别
        let obj = {
            name: 'Jerry',
            // eat: function (food) {
            //     console.log(this);
            //     console.log(this.name + '在吃' + food)
            // },
            // eat: food => {
            //     console.log(this);
            //     console.log(this.name + '在' + food)
            // },
            eat(food) {  // 方法的语法
                console.log(this);
                console.log(this.name + '在' + food)
            }
        };
        obj.eat('food');
    
        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;
                    })
                }
            }
        })
    </script>
    
  • 相关阅读:
    HDU 1850 Being a Good Boy in Spring Festival
    UESTC 1080 空心矩阵
    HDU 2491 Priest John's Busiest Day
    UVALive 6181
    ZOJ 2674 Strange Limit
    UVA 12532 Interval Product
    UESTC 1237 质因子分解
    UESTC 1014 Shot
    xe5 android listbox的 TMetropolisUIListBoxItem
    xe5 android tts(Text To Speech)
  • 原文地址:https://www.cnblogs.com/samoo/p/12063778.html
Copyright © 2011-2022 走看看