1216 Vue基础

前端框架

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

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

Vue

1.简介

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

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

1.1 优点

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

2 使用

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

通过

2. 方法属性

data:{}控制变量

methods:{}控制属性的变化

• 声明的实例不需要使用变量来接收,用this代表当前vue实例本身

• 在实例外部或其他实例内部, 需要定义一个变量接受new Vue()产生的实例

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

    

        

            {{ msg }}
            
{{ info }}
        
        

        

            {{ }}
        
        

        

            {{ }}
        
    

3. 插值表达式

{{ }} 用于文本插值

  
{{ message }}

算术运算

        
{{ num * 10 }}
拼接
        
{{ msg + num }}

取值

        
{{ msg[1] }}
        
{{ (msg + num)[3] }}

方法

        
{{ msg.split('') }}

2.2 文本指令

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

1. v-text

不能解析html,只输出文本

 旧文本 
    如果有旧文本,则会被替换

2. v-html

能够解析html语法的文本

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

3. v-once

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

添加之后,只会被解析一次
{{ msg + info }}

2.3 事件指令

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

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

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

事件变量

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

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

    
{{ info }}
    
{{ info }}

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

代码

    
    



    
{{ msg }}
    

    
    
{{ action }}
    

    
    
{{ action }}
    
    
{{ action }}

2.4 属性指令

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

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

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

简单使用
    ....
        data: {
            pTitle: '简单使用',
            def: '自定义属性',}
            ....

2. class的属性绑定

        

            c1: 'd1 d2',


        

            c2: 'd1',
            c3: 'd3',
            
        
        

            c4: 'd3','d1'直接是默认的样式
            
            

            
      
            第一个是固定样式,是否为真
            

3. 样式属性(了解)

样式属性

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


样式属性

        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/箭头函数/方法都具有本质区别

作业

    
    
    



    

    {{ count }}