其他分享
首页 > 其他分享> > （day65）一、介绍、引入、差值表达式、文本、事件、属性指令、js函数补充

（day65）一、介绍、引入、差值表达式、文本、事件、属性指令、js函数补充

作者：互联网

目录

一、介绍

  1. 前端主流三大框架：angular(Facebook)、react(Github、移动端)、vue
  2. Vue 是一套用于构建用户界面的渐进式框架

二、引入及模板

（一）引入流程

  1. 通过script标签引入vue.js环境
  2. 创建Vue实例
  3. 通过el进行挂载

（二）挂载点

挂载点：Vue实例和页面标签建立关联

  1. html和body标签不能作为挂载点
  2. 挂载点采用css3选择器语法，但是只能匹配到第一次检索的结果
  3. 因此，通常挂载点都采用id选择器（唯一性）

（三）模板示例

  1. Vue实例中的methods中，this指代vue实例本身
  2. 在Vue实例外部或者其他实例中，要先定义一个变量接受该实例
<!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>

三、差值表达式

  1. 可以在{{ }}中对变量直接进行算术运算以及索引取值、分割等操作
  2. 差值表达式只能处理一些不复杂的直接就能得出结果的操作
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <p>{{ num * 10 }}</p>
        <p>{{ msg + num }}</p>
        <p>{{ msg[1] }}</p>
        <p>{{ msg.split('') }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'msg',
            num: 10
        }
    })
</script>
</html>

四、文本指令

  1. {{ }} ：支持基于html的模板语法
  2. v-text：不会解析html代码，直接当做文本输出
  3. v-html：可以解析HTML语法的文本
  4. v-once：处理标签的内容只能被解析一次
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <p>{{ msg.split('') }}</p>
        <p v-text="msg.split('')">12345</p>
        <p v-text="info"></p>
        <p v-html="info"></p>

        <hr>
        <p v-on:click="pClick" v-once>{{ msg + info }}</p>
        <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>

五、事件指令

（一）格式

  1. 事件指令：v-on:事件名='方法变量'
  2. 简写：@事件名='方法变量'

（二）事件变量

  1. 事件变量不添加括号，默认传入事件对象($event)

  2. 事件变量添加括号，代表要自定义传参，系统不再传入事件对象，但是可以手动传入事件对象

（三）事件类型及实例

  1. mouseover：鼠标悬浮
  2. mouseout：鼠标移开
  3. mousedown：鼠标单击按下
  4. mouseup：鼠标单击抬起
  5. mousemove：鼠标移动
  6. contextmenu：右键
  7. click：点击
<!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>

六、属性指令

（一）格式

  1. 属性指令：v-bind:属性名='变量'
  2. 简写：:属性名='变量'

（二）class属性绑定

  1. 直接绑定：<p :class="c1"></p>
  2. []语法：采用多个变量控制：<p :class="[c2, c3]"></p>
  3. ''：引号内的内容为常量：<p :class="['d1', c4]"></p>
  4. {}语法：控制该类名是否生效：<p :class="{x1: false}"></p>

（三）style属性绑定

  1. 直接绑定：<p :style="myStyle">样式属性</p>
  2. 定制化绑定：<p :style="{width: w,height: h, backgroundColor: bgc}">样式属性</p>
<!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="{width: 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: {
                width: '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>

七、JS函数补充

（一）构造函数和自定义对象

  1. JS中函数名大写约定俗成为构造函数，等同于python中的类，可以定义自己的属性和方法，并且可以通过new实例化出来一个函数对象
  2. 自定义对象也可以当做一个对象，可以定义自己的属性和方法
  3. 构造函数中的方法和funtion中的this都是指代其实例化出来的对象
  4. 自定义对象中的方法和funtion中的this都是指代对象本身
// 1. 构造函数 == 类
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子面');

// 2. 自定义对象
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');

（二）变量声明

  1. 不加声明词：全局变量
  2. const：常量，不能重复定义，具备块级作用域
  3. let：在哪里声明就是什么变量，不能重复定义，具备块级作用域
  4. var：全局变量
for (let i = 0; i < 5; i++) {
    console.log(i);
}
console.log(i); // undefined
// 使用var和不声明时，此时i为5

（三）箭头函数

  1. 箭头函数可以省略function
  2. 箭头函数没有函数体，只有返回值时，可以省略{}
  3. 箭头函数参数只有一个，可以省略（）
// 匿名函数
let f2 = function () {
    console.log('f2 run');
};
f2();

// 1. 省略function
let f3 = () => {
    console.log('f3 run');
};
f3();

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

// 3. 如果箭头函数参数列表只有一个，可以省略()
let f5 = num => num * 10;
res = f5(10);
console.log(res);

（四）箭头函数、function和方法的区别

  1. function和方法中的this指代调用者
  2. 箭头函数中的this指代调用者的上一层
// 自定义对象
let obj = {
    name: 'Jerry',
    // 1. function中的this指代obj
    eat: function (food) {
        console.log(this)
        console.log(this.name + '在吃' + food)
    },
    // 2. 箭头函数中的this指代obj的上一层：window事件
    eat: food => {
        console.log(this);
        console.log(this.name + '在' + food)
    },
    // 3. 方法中的this指代obj
    eat(food) {  // 方法的语法
        console.log(this);
        console.log(this.name + '在' + food)
    }
};
obj.eat('food');

// Vue实例
new Vue({
        data: {
            res: ''
        },
        methods: {
            fn () {
                // axios插件
                let _this = this;
                this.$axios({
                    url: '',
                    method: 'get',
                    data: {

                    },
                }).then(function (response) {
                    _this.res = response.data;  // 如果是this，指代的是调用者$axios
                })
            },
            
            fn1 () {
                // axios插件
                this.$axios({
                    url: '',
                    method: 'get',
                    data: {

                    },
                }).then(response => {
                    this.res = response.data; // 指代调用者$axios的上一层vue
                })
            }
        }
    })

标签：Vue,console,log,js,实例,差值,msg,day65,name
来源： https://www.cnblogs.com/wick2019/p/12051285.html