您的位置: 首页  >  IT文章  >  vue介绍 Vue介绍 如何使用Vue Vue实例 插值表达式 文本指令 面向对象js js的函数 事件指令 属性指令

vue介绍 Vue介绍 如何使用Vue Vue实例 插值表达式 文本指令 面向对象js js的函数 事件指令 属性指令

分类: IT文章 • 2023-11-08 21:24:33

前台框架：angular、react、vue
　　vue：有前两大框架优点，摈弃缺点；没有前两个框架健全
　　vue优点：中文API、单页面应用、组件化开发、数据双向绑定、虚拟DOM、数据驱动思想(相比DOM驱动)

如何使用Vue

模板：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {

        }
    })
</script>
</html>

Vue实例

1.el实例

new Vue({
    el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点，挂载点采用的是css3选择器语法，但是只能匹配第一次检索到的结果
// 实例只操作挂载点内部内容
// html与body标签不能作为挂载点




2.data数据




<div id='app'>
    {{ msg }}
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            msg: '数据',
        }
    })
    console.log(app.$data.msg);
    console.log(app.msg);
</script>
<!-- data为插件表达式中的变量提供数据 -->
<!-- data中的数据可以通过Vue实例直接或间接访问-->




3.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为事件提供实现体-->







<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Vue实例</title>
    <style>
        body {
            user-select: none;
        }
    </style>
</head>
<body>
    <section>
        <div id="d1">
            {{ msg }}
            <p v-on:click="pClick" v-bind:style="pStyle">{{ info }}</p>
        </div>
        <hr>
        <div class="d2">
            {{ }}
        </div>
        <hr>
        <div class="d2">
            {{ }}
        </div>
    </section>
</body>
<script src="js/vue.js"></script>
<script>
    `
    console.log(Vue);
    let app = new Vue({
        el: '#d1',  // 挂载点：vue实例与页面标签建立关联
    });

    new Vue({
        el: '.d2',  // 挂载点采用的是css3选择器语法，但是只能匹配第一次检索到的结果
    });
    `;
    // 总结：
    // 1、通常挂载点都采用id选择器（唯一性）
    // 2、html与body标签不能作为挂载点(组件知识点解释)

    // new Vue({
    //     el: 'body'
    // })
    let app = new Vue({
        el: 'section',
        data: {  // data为挂载点内部提供数据
            msg: 'message',
            info: '信息',
            pStyle: {
                color: 'yellowgreen'
            }
        },
        methods: {
            pClick: function () {
                if (app.pStyle.color !== 'yellowgreen') {
                    app.pStyle.color = 'yellowgreen'
                } else {
                    app.pStyle.color = 'red'
                }
                console.log(app.msg);
                console.log(app.pClick);
                console.log(this.msg);
                console.log(this.pClick);
            }
        }
    });

    // 声明的实例是否用一个变量接收
    // 1、在实例内部不需要，用this就代表当前vue实例本身
    // 2、在实例外部或其他实例内部需要，定义一个变量接收new Vue()产生的实例
    console.log(app.msg)

</script>
</html>




插值表达式




<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>       //msg
        <p>{{ num * 10 }}</p>  //100
        <p>{{ msg + num }}</p> //msg10
        <p>{{ msg[1] }}</p>    //s
        <p>{{ msg.split('') }}</p> //["m","s","g"]
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'msg',
            num: 10
        }
    })
</script>
</html>




文本指令


v-text：不能解析html语法的文本，会原样输出
v-html：能解析html语法的文本
v-once：处理的标签的内容只能被解析一次




<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <!--
            文本指令：
            1、{{ }}
            2、v-text：不能解析html语法的文本，会原样输出
            3、v-html：能解析html语法的文本
            4、v-once：处理的标签的内容只能被解析一次
        -->
        <p>{{ msg.split('') }}</p>   //[ "m", "e", "s", "s", "a", "g", "e" ]
        <p v-text="msg.split('')">12345</p>  //[ "m", "e", "s", "s", "a", "g", "e" ]
        <p v-text="info"></p>  //<i>info</i>
        <p v-html="info"></p>  //info(斜体 )

        <hr>
        <p v-on:click="pClick" v-once>{{ msg + info }}</p>  //message<i>info</i>
        <p>{{ msg }}</p>  //信息
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'message',
            info: '<i>info</i>'
        },
        methods: {
            pClick: function () {
                this.msg = '信息'
            }
        }
    })
</script>
</html>





面向对象js




<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>面向对象js</title>
</head>
<body>
    <h1>面向对象js</h1>
</body>
<script>
    // undefined、null、string、number、boolean、object(Array)、function
    // var、let、const、不写

    // object(Array)、function

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


    // 构造函数 == 类
    function F2(name) {
        this.name = name;
        this.eat = function (food) {
            console.log(this.name + '在' + food);
        }
    }
    let ff1 = new F2("Bob");
    console.log(ff1.name);  //f1 Bob

    let ff2 = new F2("Tom");
    console.log(ff2.name);  //f1 Tom

    ff1.eat('饺子');  //Bob在饺子
    ff2.eat('sao子面');  //Tom在sao子面


    let obj = {
        name: 'Jerry',
        // eat: function (food) {
        //     console.log(this.name + '在' + food)
        // },
        eat(food) {  // 方法的语法
            console.log(this.name + '在' + food)
        }
    };
    console.log(obj.name);  //Jerry
    obj.eat('hotdog');  //  Jerry在hotdog
</script>
</html>




js的函数


var  let  count  d




    function f() {
        d = 40; // 全局变量
    }

    f();


    console.log(d);

    const c = 30;  // 常量
    // c = 20 常量不能被修改
    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、箭头函数、方法


箭头函数





    // 如果箭头函数没有函数体，只有返回值
    let f4 = (n1, n2) => n1 + n2;
    let res = f4(10, 25);
    console.log(res);  //35

    // 如果箭头函数参数列表只有一个，可以省略()，如果没有参数，或者参数大于1个，必须写（）
    let f5 = num => num * 10;
    res = f5(10);
    console.log(res);  //100








    // 重点：function、箭头函数、方法都具有本质区别
    let obj = {
        name: 'Jerry',
        // eat: function (food) {
        //     console.log(this);  this指的是obj
        //     console.log(this.name + '在吃' + food)
        // },  Jerry在吃food
        // eat: food => {
        //     console.log(this);   this指的是window即箭头函数不能产生this
        //     console.log(this.name + '在' + food)
        // },  在food
        eat(food) {  // 方法的语法
            console.log(this);
            console.log(this.name + '在' + food)
        }
    };  //Jerry在吃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;
                })
            }
        }
    })




事件指令


事件指令：   v-on:事件名="方法变量"
简写：               @事件名="方法变量"


鼠标事件


区分点击对象，事件变量加（），手动传参


<p @click="f8($event, '第一个')">{{ info }}</p>


        f8 (ev, argv) {
            console.log(ev, argv);
            this.info = argv + '点击了';




<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <!--
        事件指令：   v-on:事件名="方法变量"
        简写：           @事件名="方法变量"
        -->
        <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>

        <!-- 事件变量，不添加()，默认会传事件对象: $event -->
        <!-- 事件变量，添加()，代表要自定义传参，系统不再传入事件对象，但是可以手动传入事件对象 -->
        <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>
</html>




属性指令


属性指令：   v-bind:属性名="变量"
    简写：                :属性名="变量"






<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .d1 {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        .d2 {
            border-radius: 50%;
        }
        .d3 {
            border-radius: 20%;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--属性指令：   v-bind:属性名="变量"
            简写：             :属性名="变量"
        -->
        <p style="color: red" class="dd1" abc="def" title="悬浮提示">红色字体</p>

        <!--1、简单使用-->
        <p v-bind:title="pTitle" :abc="def" @click="changeImg">简单使用</p>
        <!--<img :src="img_src" alt="">-->


        <!--2、class属性绑定-->
        <!--c1变量的值就是类名-->
        <p :class="c1"></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>


        <!--3、style属性绑定(了解)-->
        <p :style="myStyle">样式属性</p>

        <p :style="{ w,height: h, backgroundColor: bgc}">样式属性</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            pTitle: '简单使用',
            def: '自定义属性',
            img_src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3819296004,574391848&fm=26&gp=0.jpg',
            c1: 'd1 d2',
            c2: 'd1',
            c3: 'd3',
            c4: 'd3',
            is_true: true,
            myStyle: {
                 '100px',
                height: '100px',
                backgroundColor: 'red'
            },
            w: '200px',
            h: '100px',
            bgc: 'green'
        },
        methods: {
            changeImg() {
                this.img_src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1371195756,4187769521&fm=26&gp=0.jpg'
            }
        }
    })
</script>
</html>


															

																					

								

									相关推荐