Day 65 Vue简介与指令/js函数补充

目录

• Vue
  • Vue的优势
  • Vue实例
  • 插值表达式
  • 文本指令
  • 事件指令
  • 属性指令
• 面向对象JS
• JS函数补充

Vue

Vue的优势

目前主流的前端框架有种:angular,react,vue

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

vue的优点:

1. 有中文API
2. 单页面应用,组件化开发
3. 数据双向绑定
4. 虚拟DOM
5. 数据驱动思想(相比DOM驱动)

有前两大框架优点，摈弃缺点；但是没有前两个框架健全

Vue实例

let app = new Vue({
	el: '#app'
})
// 实例与页面挂载点一一对应
// 一个页面中可以出现多个示例对应多个挂载点
// 实例只操作挂载点内部内容
// 一般情况下用id对应(唯一性)

插值表达式

<div id="app">
    <p>{{ msg }}</p>
    <p>{{ num + 10 }}</p>
    <p>{{ msg + num }}</p>
    <p>{{ msg[0] }}</p>
    <p>{{ msg.split('') }}</p>
</div>

<script>
	new Vue({
        el: '#app',
        data: {
            msg: '我是信息',
            num: 10
        }
    })
</script>

文本指令

文本指令

1. {{ }}
2. v-text: 不能解析html语法的文本，会原样输出
3. v-html: 能解析html语法的文本
4. v-once: 处理的标签的内容只能被解析一次

<div id="app">
    <p v-text="{{ msg.split('') }}"></p>
    <p v-html="info"></p>
    <p v-on:click='pClick' v-once></p>
</div>

<script>
	new Vue({
        el: '#app',
        data: {
            msg: '我是信息',
            info: '<i>info</i>'
        },
        methods: {
            pClick: function() {
                this.msg = 'message'
            }
        }
    })
</script>

事件指令

<div id="app">
    <p v-on:click='pClick'>{{ msg }}</p>
    <!-- v-on可以简写为@ -->
    <p @click='pClick'>{{ msg }}</p>
    <hr>
    <p @mouseover='f2' @mouseout='f3' @mousemove='f4' @contextmenu='f5' @mouseup='f6' @mousedown='f7'>{{ action }}</p>
    <hr>
    <!-- 事件变量，不添加()，默认会传事件对象: $event -->
    <!-- 事件变量，添加()，代表要自定义传参，系统不再传入事件对象，但是可以手动传入事件对象 -->
    <p @click='f8($event, "第一个")'></p>
    <p @click='f8($event, "第二个")'></p>
</div>

<script>
	new Vue({
        el: '#app',
        data: {
            msg: '未点击',
            action: '鼠标事件'
        },
        methods: {
            pClick () {
                this.msg = '点击了'
            },
            f2 () {
                this.action = '悬浮'
            },
            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>

属性指令

<style>
    .d1 {
         200px;
        height: 200px;
        background-color: orange;
    }
    .d2 {
        border-radius: 50%;
    }
    .d3 {
        border-radius: 20%;
    }
</style>


<div id="app">
	<!--属性指令：   v-bind:属性名="变量"
           简写：   :属性名="变量"-->
     <!--1、简单使用-->
    <p v-bind:style="pStyle" @click='pClick'>颜色变换</p>
    <!--2、class属性绑定-->
    <p :class="c1"></p>
    <!--多类名可以用[]语法，采用多个变量来控制-->
    <p :class="[c2, c3]"></p>
    <!--选择器位可以设置为变量，也可以设置为常量-->
    <p :class="['d1', c4]"></p>
    <!--{类名: 布尔值}控制某类名是否起作用-->
    <p :class="{d1: false}"></p>
    <!--多种语法混用-->
    <p :class="['d1', {d2: true}]" @click="is_true != is_true"></p>
    
    <p :style="{ w,height: h, backgroundColor: bgc}">样式属性</p>
    <script>
    	new Vue({
            el:'#app',
            data:{
                pStyle: {
                     '100px',
                	height: '100px',
                	backgroundColor: 'red'
                }
                c1: 'd1',
                c2: 'd1',
                c3: 'd2',
                c4: 'd3',
                is_true: true,
                w: '200px',
                h: '200px',
                bgc: 'red'
            },
            methods:{
            	pClick () {
                    this.pStyle.backgroundColor = 'green'
                }
        	}
        })
    </script>
</div>

面向对象JS

// 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');

JS函数补充

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