vue基础

vue基础

渐进式JavaScript 框架

安装vue

一、vue简介

1、什么是vue

前端三大框架之一， 可以独立完成前后端分离式web项目的JavaScript框架

2、vue的优势

• 前端三大主流框架： Angular React Vue
• 先进的前端设计模式： MVVM （Model-View-ViewModel）
• 中文API、可以单页面、组件化开发

3、特点

单页面web应用
数据驱动
数据的双向绑定
虚拟DOM

4、使用vue

• 开发版本：vue.js
• 生产版本：vue.min.js

    {{ }}

二、Vue实例

1、el：实例

new Vue({
        el: '#app',
});

总结：

• 实例与页面挂载点一一对应
• 一个页面中可以出现多个实例对应的挂载点
• 通常挂载点都采用id选择器
• html与body标签不能作为挂载点

2、data 数据

    {{ msg }}

3、methods 方法

    
{{ msg }}

声明的实例是否用一个变量接收

• 在实例内部不需要，用this就代表vue实例本身
• 在实例外部或其他实例内部就需要， 定义一个变量接收new Vue()产生的实例

三、插值表达式

    
{{ msg }}
    
{{ num + msg }}
    
{{ num * 10 }}
    
{{ msg[0] }}
    
{{ msg.split('') }}
    

四、js面向对象补充

五、js函数补充

箭头函数

    function f() {
        var a = 1;
        let b = 2;
        const c = 3;
        d = 4;
    }

    f();
    // console.log(a);    // let、const定义的变量不能重复定义，且具备块级作用域
    // console.log(b);
    // console.log(c);
    // console.log(d)


    function f1() {
        console.log('from f1')
    }
    f1();

    let f2 = () => {
        console.log('from f2')
    };
    f2();

    // 如果箭头函数没有函数体，只有返回值的情况
    let f3 = (x, y) => x + y;
    let res = f3(10, 20);
    console.log(res);

    // 如果箭头函数参数列表只有一个，可以省略括号
    let f4 = num => num + 100;
    res1 = f4(10);
    console.log(res1)

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

let obj = {
        name: 'cwz',
        eat: function (food) {
            console.log(this);   // {name: "cwz", eat: ƒ, eat2: ƒ}
            console.log(this.name + '在吃' + food)
        },

        eat2: food => {
            console.log(this);  // Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
            console.log(this.name + '在吃' + food)
        }

    };
obj.eat('阿达发');
obj.eat2('雪花')

箭头函数内部是没有this的，这个this不能指向当前对象，只能往上找

六、vue指令

1、文本指令

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

    
{{ msg.split('') }}
    

    

    

2、事件指令

v-on: 事件名="方法变量"  可以简写成  @事件名="方法变量"


事件变量，不添加()，默认会传事件对象: $event


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

    
{{ msg }}
    


    
{{ action }}
    


    
{{ info }}

3、属性指令

格式：

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

单类名绑定


多类名绑定用[]语法， 采用多个变量来控制


类名状态绑定, 类名：布尔值， 控制某类名是否器作用
   如果是false就失效；如果是true，就起作用

多类名状态绑定


style属性绑定
样式属性
样式属性