1216 Vue基础

前端框架

angular ---更新程度太快,且不向下兼容
react ----- 移动端大多都使用
vue

vue
    有前两大框架的优点,摒弃缺点
    但没有他们框架健全

Vue

1.简介

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

三大主流框架之一：Angular React Vue 先进的前端设计模式：MVVM 可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发

1.1 优点

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

2 使用

所有的script标签,在body与html标签之内的都会在body最下方加载

通过<script>引入vue.js文件,在<script>标签中实例化vue对象获取关联

2.1 基础

1. 挂载点

el指点与页面中的标签建立关联

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

<body>
    <section>
        <div id="d1">
            {{ msg }}
            <p> {{ info }} </p>
        </div>
    </section>
</body>
<script src="vue/vue.js"></script>
<script>
    // let app = new Vue({
    //     el:'#d1',           // 挂载点,vue实例与页面标签建立关联
    // });
    new Vue({
        el:'section',        // 挂载点采用的是css3选择器语法,但是只能匹配第一次检索到的结果
        // data为挂载点提供数据
        data:{
            msg:'message',
            info:'信息'
        }
    })
</script>
</html>

2. 方法属性

data:{}控制变量

methods:{}控制属性的变化

声明的实例不需要使用变量来接收,用this代表当前vue实例本身
在实例外部或其他实例内部, 需要定义一个变量接受new Vue()产生的实例

console.log(app.pClick);
console.log(this.pClick);

<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>

3. 插值表达式

{{ }} 用于文本插值

<div id="app">
  <p>{{ message }}</p>
</div>

算术运算

        <p>{{ num * 10 }}</p>
拼接
        <p>{{ msg + num }}</p>

取值

        <p>{{ msg[1] }}</p>
        <p>{{ (msg + num)[3] }}</p>

方法

        <p>{{ msg.split('') }}</p>

2.2 文本指令

{{ }}插值表达式
v-text
v-html
v-once

1. v-text

不能解析html,只输出文本

<p v-text="info"> 旧文本 </p>
	如果有旧文本,则会被替换

2. v-html

能够解析html语法的文本

<p v-html="info"></p>

new vue({
	el:'#app',
	data:{
		msg:'message',
		info:'<i> 这是info斜体字 </i>
	}
})

3. v-once

处理的标签内容只能被解析一次

添加之后,只会被解析一次
<p v-on:click="pClick" v-once>{{ msg + info }}</p>

2.3 事件指令

`v-on:事件名 = '方法变量'`

简写:@事件名 = '方法变量'

点击事件click
悬浮mouseover
离开mouseout
按下mousedown
按下抬起mouseup
按下移动mousemove
右键contextmenu

事件变量

事件的变量加括号是传参
事件对象本身为$event

* 事件变量,不添加(),默认会传事件对象:$event
* 事件变量,添加(),代表要自定义传参,系统不再传入事件对象,但是可以手动传入事件对象

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

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

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p @click="f1">{{ msg }}</p>
    <hr>
    <!--鼠标悬浮/离开-->
    <p @mouseover="f2" @mouseout="f3">{{ action }}</p>
    <hr>
    <!--鼠标按下/按下抬起/按下移动-->
    <p @mousedown="f4" @mouseup="f5" @mousemove="f6">{{ action }}</p>
    <!--右键-->
    <p @contextmenu="f7">{{ action }}</p>


</div>

</body>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'点击切换',
            action:'鼠标事件',
        },
        methods:{
            f1 (){
                this.msg = '点击了'
            },
            f2 (){
                this.action = '悬浮了'
            },
            f3 (){
                this.action = '鼠标离开'
            },
            f4 (){
                this.action = '鼠标按下'
            },
            f5 (){
                this.action = '鼠标抬起'
            },
            f6 (){
                this.action = '鼠标按下时移动'
            },
            f7 (){
                this.action = '右键'
            },

        }
    })
</script>
</html>

2.4 属性指令

`v-bind:属性名='变量'`

简写成:属性名='变量'

1. 简单使用(单值的使用)

<p v-bind:title="pTitle" :abc="def">简单使用</p>
	....
        data: {
            pTitle: '简单使用',
            def: '自定义属性',}
            ....

2. class的属性绑定

<!--c1变量的值就是类名-->
        <p :class="c1"></p>
            c1: 'd1 d2',

<!--多类名可以用[]语法，采用多个变量来控制-->
        <p :class="[c2, c3]"></p>
            c2: 'd1',
            c3: 'd3',
            
        <!--选择器位可以设置为变量，也可以设置为常量-->
        <p :class="['d1', c4]"></p>
            c4: 'd3','d1'直接是默认的样式
            
            
<!--{类名: 布尔值}控制某类名是否起作用-->
            <!--<p :class="{x1: false}"></p>-->
      <!--多种语法混用-->
      		第一个是固定样式,是否为真
            <p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p>

3. 样式属性(了解)

<p :style="myStyle">样式属性</p>

		data中定义:
            myStyle: {
                 '100px',
                height: '100px',
                backgroundColor: 'red'
            }


<p :style="{ w,height: h, backgroundColor: bgc}">样式属性</p>

		data中定义:
            w: '200px',
            h: '100px',
            bgc: 'green'

JS面向对象补充

数据类型

undefined/null/string/number/boolean/object(Array)/function

定义变量的方式

var/let/const/不写

对象object与function

面向过程(函数)
	function f1(){
		console.log('f1 run)
	}
	f1();

面向对象
	定义类(构造函数 == 类)
    function F2(){
    console.log('f1 run)
    }
    f1();
    
JS中类的参数的传值与接收互相分离,多传值不会接收,少传值会是undefined参数
	    // 构造函数 == 类
    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函数的补充

定义变量

作用域 : 全局 -- 块级 -- 局部

var			// for循环时,会是全局的
let			// 不能重复定义,且具备块级作用域,出去括号就不认了
const		// 常量不可以修改
不写			// 函数内定义则是全局变量

函数的定义

第一种
	function f1(){
        console.log('f1')
    }
    f1();
    
第二种
    let f2(){
        console.log('f2')
    }
    f2();
    
第三种(箭头函数)
    let f3 = () => {
        console.log('f3')
    };
    f3();

箭头函数

如果箭头函数没有函数体,只有返回值
	let f4 = (n1,n2) => {
		return n1 + n2;
	}
	
可以写成
	let f4 = (n1,n2) => n1 + n2;
	let res = f4(10,25);
    console.log(res)

如果兼有函数参数列表只有一个,可以省略括号()
	let f5 = num => num * 10;
	let res = f5(10);
    console.log(res);

重点:

function/箭头函数/方法都具有本质区别

<script>
	let obj = {
        name: 'Jerry',
        
    // function
        eat: function (food) {
            console.log(this.name + '在' + food)
            
    // 箭头函数  (this不找当前调用者,找调用者的父一层)
        eat: food => {
            console.log(this)// 指向window
            console.log(this.name + '在' + food) //箭头函数this不能指向上层
            
            
    // 方法
        eat (food) {   // 方法的语法
            console.log(this);
            console.log(this.name + '在' + food) }
    };

    obj.eat('123')
            

---------------------------------------------------------


    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>

作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
             200px;
            height: 200px;
        }

    </style>
</head>
<body>
<div id="app">
    <p class="box" :style="{backgroundColor: bgc}"></p>

    <input type="button" value="红" @click="c_red">
    <input type="button" value="黄" @click="c_ye">
    <input type="button" value="蓝" @click="c_bl">
</div>
</body>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            bgc:'white'
        },
        methods:{
            c_red(){
                this.bgc = 'red'
            },
            c_ye(){
                this.bgc = 'yellow'
            },
            c_bl(){
                this.bgc = 'blue'
            },
        }
    })

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #wrap {
             200px;
            height: 200px;
            background-color: red;
        }

    </style>
</head>
<body>
<div id="app">
    <div id="wrap" :style="{backgroundColor: bgc}" @click="change_c"></div>
    <span>{{ count }}</span>
</div>
</body>
<script src="vue/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            bgc:'blank',
            count:0,
            colorArr:['pink','green','cyan']
        },
        methods:{
            change_c(){
                let n = this.count++;
                this.bgc = this.colorArr[n % this.colorArr.length]
            }
        }
    })
</script>
</html>