Vue框架1

一、Vue框架的优势

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

二、在页面中引入vue

1. 步骤

    a. 通过script标签引入vew.js环境
    
    b. 创建vue实例
    
    c. 通过el进行挂载


2. 代码
    
    
    
    

3. 注意

    a. 挂载点采用css3选择器语法，只能匹配第一次检索到的结果，因此通常采用id选择器。
    
    b. html与body标签不能作为挂载点
    
    c. 一个页面通常有一个挂载点

三、vue核心代码

    

        {{ msg }}
        
{{ info }}
    

四、插值表达式

变量及变量的简单运算

{{ msg }}
{{ num*10 }}
{{ msg+num }}
{{ msg[1] }}
{{ msg.splite('') }}

五、文本指令

1. v-text

    不能解析html语法的文本，会原样实处。

2. v-html

    不能解析html语法的文本。

3. v-once

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

    
{{ msg }}

六、js中的函数

1. 普通函数

    a. 普通函数1
    
        function f1() {
            console.log('f1 run')
        }
        f1();
    
    
    b. 普通函数2
    
        let f2 = function () {
            console.log('f2 run')
        }
        f2();
    

2. 箭头函数

箭头函数无法使用‘this’

    a. 箭头函数1
    
         let f3 = () => {
             console.log('f3 run')
         };
         f3();
        
        
    b. 箭头函数2
    
         let f4 = (n1, n2) => n1 + n2;
         let res1 = f4(10, 20);
            console.log(res1);
        
        
    c. 箭头函数3
    
         let f5 = num => {
                return num*10
         };
         let res2 = f5(10);
            console.log(res2);
        
    
3. 构造函数

    a. 构造函数普通写法
    
        function F6(name) {
        
            this.name = name;
        
            this.eat = function (food) {
                console.log(this.name + '在吃' + food)
            }
        }
        
        let ff1 = new F6('A');
        console.log(ff1.name);
        
        let ff2 = new F6('B');
        console.log(ff2.name);
        
        ff1.eat('苹果');
        ff2.eat('香蕉');
    
    
    
    b. 构造函数简写

        let obj = {
        
            name: 'C',
                // 普通函数
            drink: function (drinks) {
                console.log(this.name + '在喝' + drinks)
            },
                //方法
            eat(food) {
                console.log(this.name + '在吃' + food)
            },
        };
        
        console.log(obj.name);
        obj.eat('橘子');
        obj.drink('juice')
        
        
    

七、js定义变量的四种方法

1. var a = 10

    

2. let b = 20

    不能重复定义，具备块级作用域。

3. const c = 30

    常量，定义后不可修改。

4. d = 40
    
    全局变量

八、事件指令

1. 语法
        
    v-on:事件名=‘方法变量’
       
    @事件名=‘方法变量’


2. 同一标签绑定多个事件

    鼠标事件示例

    
    

        
{{ action }}
    
    
    
    
    


3. 给绑定事件传参

    a. 不加括号默认传事件对象：$event
    
    b. 加括号表示自己传参，系统不自动传事件对象，可以手动传入事件。

        
{{ action }}

九、属性指令

1. 语法
        
    v-bind:属性名=‘变量’
       
    ：属性名=‘变量’



2. class属性绑定方法


    a. 变量的值就是类名
        
        

    
    b. 多类名可以用[ ],采用多个变量来控制
    
        

    
    c. 选择器可设置为常量
    
        

        
    d. {类名：布尔值}控制某类名是否起作用
    
        

        
        
        
    
    
    

    
        

        

        

        

    
    
    
    
    
    
    
4. style属性绑定方式1

    
    

    
        
样式属性
    
    
    
    
    
    
    
    
5. style属性绑定方式2

    
    
    

    
        
样式属性