　　1、定义：vue是JavaScript渐进式框架

　　　　渐进式：可以控制一个页面的一个标签，也可以控制一系列标签，还可以控制整个页面，甚至可以控制整个前端项目

　　2、优点：

　　　　有指令（分支结构，循环结构...），复用页面结构等

　　　　有实例成员（过滤器，监听），可以对渲染的数据做二次格式化

　　　　有组件（模块的复用或组合），快速搭建页面

　　　　虚拟DOM

　　　　数据的双向绑定

　　　　单页面应用

　　　　数据驱动

　　3、为什么要学习vue?

　　　　目前主流的前端有三个框架：Angular(庞大)，React(精通移动端)，Vue（吸取两者优势，轻量级），

　　　　还有一个很重要的原因就是Vue是由中国人创造的（尤雨溪）所以第一手文档是中文，　　

　　　　初此之外vue还可以实现前后端分离开发，这样一来就大大节约开发成本。

二、vue环境简单搭建

　　1、通过cdn搭建

　　2、本地导入

　　　　这个需要你自己去vue官网下载之后，放到你的项目中然后导入

初识vue
一、vue简介
二、vue环境简单搭建
三、vue实例成员
四、vue指令
五、js对象补充
六、js函数的补充
七、总结

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue导入</title>

</head>
<body>
    <div>
        abc
        {{num}}
    </div>

    <p class="pp">
        opq
        {{num}}
    </p>

</body>
<!--&lt;!&ndash;第一种导入方式cdn&ndash;&gt;-->
<!--<script src="https://cn.vuejs.org/js/vue.js"></script>-->
<!--第二种导入方式：本地导入-->
<script src="js/vue.js"></script>

<script>
    new Vue({
        el:'div', //el和页面结构进行绑定
        data:{
            num:10, //页面中的变量声明
        }
    });
    new Vue({
        el: '.pp',
        data: {
            num:100
        }
    })
</script>
</html>

vue环境导入

三、vue实例成员

　　1、挂载点el

　　1) 一个挂载点只能控制一个页面结构（优先匹配到的结构）

　　2）挂载点挂载的页面标签严格建议用id属性进行匹配（一般这个id名为app）

　　3）html标签与body标签不能作为挂载点（html标签和body标签不能被替换）

　　4）是否接受vue对象，是由外界是否只需要有vue对象的内容决定的

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>挂载点</title>

</head>
<body>
    <div id="app">
        <div class="d1">
            {{num}}
        </div>
        <div class="d1">
            {{num}}
        </div>
    </div>
    
    <!--不在app里面就叫做外界接收-->
    <div id="main">
        {{n}}
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /** el:挂载点
     * 1）一个挂载点只能控制一个页面结构（优先匹配到的结构）所以想一个el控制两个需要再搞一个div包裹
     * 2）挂载点挂载的页面标签严格建议用id属性进行匹配（一般习惯命名为app）
     * 3）html标签与body标签不能作为挂载点（html和body标签不可以被替换）
     * 4）是否接收vue对象，是由外界是否只需要vue对象的内容决定的
     *
     */
    var app = new Vue({
        el:'#app',
        data:{
            num:100
        }
    });

    new Vue({
        el:'#main',
        data:{
            n:app.num //在app的外面就叫做外界接收，可直接引用app.num
        }
    });

    console.log('12345');
    console.log(app.num);//可简写
    console.log(app.$el);// 规定写法必须加$才可以获取到
    console.log(app.$data.num); //本质写法
</script>
</html>

为了美观我们还可以去vue.js中把两行广告给它去掉

初识vue
一、vue简介
二、vue环境简单搭建
三、vue实例成员
四、vue指令
五、js对象补充
六、js函数的补充
七、总结

　　2、插值表达式

插值表达式的作用：简单来说就是将vue控制的变量渲染到页面上去（即可以渲染数据）

　　1）空的插值表达式：{{ }} # 注意：当为空的时候一定要在里面加一个空格

　　2）插值表达式中渲染的变量在data中可以初始化

　　3）插值表达式可以进行简单运算与简单逻辑

　　4）插值表达式解决django与vue的{{}}冲突时可用delimiters自定义

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>插值表达式</title>
</head>
<body>
    <div id="app">
        <p>{{ info }}</p>
        <p>{{ msg }}</p>
        <p>{{ }}</p>
        <p>{{num}}</p>
        <p>{{num + 10 * 2}}</p>
        <p>{{ msg.length + num }}</p>
        <p>{{ msg[4] }}</p>
        <p>{{ msg.split('')[4] }}</p>
        <p>[{ num }]</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /** 插值表达式的作用：将vue控制的变量渲染到页面上（即渲染数据）
     * 1）空插值表达式：{{ }}
     * 2）中渲染的变量在data中可以初始化
     * 3）插值表达式可以进行简单运算与简单逻辑
     * 4）插值表达式解决vue与django{{}}符号冲突问题，用delimiters自定义（了解）
     */
    new Vue({
        el: '#app',
        data: {
            info: '信息',
            msg: 'message',
            num: 10,
        },
        // 控制vue插值表达式符号
        delimiters: ['{{', '}}'],  //['','']里面加什么符号表示让它在冲突时保留vue
    })
</script>
</html>

初识vue
一、vue简介
二、vue环境简单搭建
三、vue实例成员
四、vue指令
五、js对象补充
六、js函数的补充
七、总结

　　3、过滤器

　　1）用实例成员filters来定义过滤器

　　2）在页面结构中，用 |来标识使用过滤器

　　3）过滤方法的返回值就是过滤器过滤后的结果

　　4）过滤器可以对1~n个变量进行过滤，同时还可传入辅助的变量比如add等

　　注意：过滤器方法接收参数是按照掺入的位置先后顺序

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
</head>
<body>
    <div id="app">
        <!--简单使用：过滤的对象会作为参数传给过滤器-->
        <p>{{num | add(20)}}</p>
        <!--串联使用：将第一个过滤器结果作为参数传给第二个过滤器-->
        <p>{{num | add(100) | jump(2)}}</p>
        <!--终极使用-->
        <p>{{ n1, n2 | fn(100, 200) }}</p>
        <!--更牛皮使用-->
        <p>{{ n1, n2 | fn(100, 200), n1, n2 | fn(100)}}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /**过滤器
     * 1）用实例成员filters来定义过滤器
     * 2）在页面结构中，用|来标识使用过滤器
     * 3）过滤方法的返回值就是过滤器过滤的结果
     * 4）过滤器可以对1~n个变量进行过滤，同时还可以传入辅助变量
     *   注意：过滤器方法接收参数是按照传入位置的 先后顺序
     */
    new Vue({
        el: '#app',
        data: {
            num:10,
            n1:30,
            n2:60,
        },
        filters: {
            add: function (a,b) {
                console.log(a, b);
                return a + b;
            },
            jump: function (a, b) {
                return a * b
            },
            fn :function (a,b,c,d) {
                console.log(a,b,c,d);
                return a + b + c + d;
            }
        }
    })
</script>
</html>

初识vue
一、vue简介
二、vue环境简单搭建
三、vue实例成员
四、vue指令
五、js对象补充
六、js函数的补充
七、总结

四、vue指令

　　1、文本指令

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文本指令</title>
</head>
<body>
    <div id="app">
        <p>{{num | add(200)}}</p>
        <p v-text="num"></p>
        <p v-text="num">123</p> <!--v-text是原样输出渲染内容，渲染控制的标签自身内容会被替换掉即不会出现123-->

        <p v-text="info"></p>
        <p v-html="info"></p> <!--v-html可以解析渲染html语法的内容-->

        <!--js基本数据类型：字符串，数字，布尔，undefined-->
        <p v-text="'abc' + num + 10"></p>
        <p>{{'abc' + num + 10}}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    /**
     * 1)v-*是vue指令，会被vue解析，v-text="num"中的num是变量（指令是有限的 不可以自己去定义）
     * 2）v-text是原样输出渲染内容，渲染控制的标签自身内容会被替换掉（<p v-text="num">123</p>会被num替换）
     * v-html可以解析渲染html语法的内容
     */
    new Vue({
        el: '#app',
        data:{
            num:100,
            info:'<i style="color: red">info内容</i>',
            a:10
        },
        filters: {
            add:function (a,b) {
                return a + b;
            }
        }
    })
</script>
</html>

　　2、事件指令

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件指令</title>
</head>
<body>
    <div id="app">
        <button v-on:click="btnClick">{{btn1}}</button>
        <button v-on:click="btnClick">{{btn2}}</button>
        <hr>  <!--分割线-->

        <!--直接绑定事件名：系统会在触发事件时（比如点击时）调用事件方法， 传给事件方法一个参数（事件对象）-->
        <button v-on:click="fn1">按钮3</button>

        <!--绑定事件名后跟着(),不是主动调用事件方法，而是表示在触发事件调用时，传入的参数全部由用户自己决定-->
        <button v-on:click="fn2($event, 10, 20)">按钮4</button>

        <hr>
        <button v-on:click="fn(btn1)">{{btn1}}</button>
        <button v-on:click="fn(btn2)">{{btn2}}</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    //对比DOM驱动：1）js选择器获取目标标签 2）为目标标签绑定事件 3）在事件中完成相应逻辑
    // var btn = document.getElementsByTagName('button')[0];
    // btn.onclick = function () {
    //     console.log(111111111111);
    // };

    /**
     * 一、数据驱动
     * 1）操作是有个功能，使用需要一个方法来控制 2）方法名是变量，所以控制变量就可以控制该方法
     *
     * 二、事件指令
     * 1）在实例成员methods中声明事件方法
     * 2）标签通过事件指令绑定声明的方法： v-on:事件名="事件方法名"
     * eg:<button v-on:click="btnClick">按钮</button>
     * 3)标签通过事件指令绑定声明的方法，且自定义传参：v-on:事件名="事件方法名()"
     *      eg: <button v-on:click="btnClick()">按钮</button>  不传任何参数
     *      eg: <button v-on:click="btnClick($event)">按钮</button>  传入事件对象，同不写()
     *      eg: <button v-on:click="btnClick(10)">按钮</button>  只传入自定义参数，当然也可以传入事件对象
     */
    new Vue({
        el: '#app',
        data: {
            btn1: '按钮1',
            btn2: '按钮2',
        },
        methods: {
            btnClick () {
                console.log(666)
            },
            fn1 (ev) {
                console.log(ev.clientX, ev.clientY);
            },
            fn2 (ev, n1, n2) {
                console.log(ev, n1, n2);
                console.log(ev.clientX, ev.clientY);
            },
            fn (msg) {
                console.log(msg);
            }
        }
    })
</script>
</html>

五、js对象补充

　　1、普通对象与对象简写

1）js中没有字典类型，只有对象类型，对象可以完全替代字典来使用

2）js中对象的属性名，都采用字符串类型，所有就可以省略字符串的引号标识

3）对象中属性值为函数时，称之为方法，方法建议简写为：方法名（）{}

4）如果对象的属性值是一个变量，且变量名与属性名相同，还可以简写{属性，}

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>js对象补充</title>
</head>
<body>

</body>
<script src="js/vue.js"></script>
<script>
    // 1）js没有字典类型，只有对象类型，对象可以完全替代字典来使用
    // 2）js中对象的属性名，都采用字符串类型，所以就可以省略字符串的引号标识
    // 3）对象中属性值为函数时，称之为方法，方法建议简写: 方法名(){}
    // 4）如果对象的属性值是一个变量，且变量名与属性名相同，还可以简写：{属性,}
   var dic_obj = {
       //属性：值（值可以为数值，也可以为函数）
       'name': 'Alen',
       'eat': function () {
           console.log('在吃饭')
       }
   };

   console.log(dic_obj.name, dic_obj['name']);
   dic_obj.eat(); dic_obj['eat']();  //所以说js中对象可以替代字典，字典有的方法它也可以使用

    //属性省略简写，方法简写
    var obj = {
        name: 'Alen',
        eat () {
            console.log('在吃饭...')
        }
    };

    console.log(dic_obj.name, dic_obj['name']);
    dic_obj.eat(); dic_obj['eat']();

    //属性变量简写
    var height = 180;
    var p = {
        height,  //height : 180 == height : height == height,
        name: 'Alen',
        eat() {}
    };

    console.log(p.name, p.height);

    //js 中的类（了解）
    // 第一种声明类的方法
    class People {
        constructor (name) {
            this.name = name
        }
        eat () {
            console.log(this.name + '在吃饭')
        }
    }

    let p1 = new People('Alen');
    let p2 = new People('Tom');
    console.log(p1.name, p2.name);
    p1.eat();

    //第二种声明类的方法（难点）：在函数内部出现了this语法，该函数就是类，否则就是普通函数
    function Teacher(name) {
        this.name = name;
        this.eat = function () {
            console.log(this.name + '在吃饭')
        }
    }

    let t1 = new Teacher('Bob');
    t1.eat();

    //类属性：给类属性赋值，所有对象都能访问（掌握）
    function Fn() {}
    let f1 = new Fn();
    let f2 = new Fn();


    //赋值类属性
    Fn.prototype.num = 100;

    console.log(f1.num);
    console.log(f1.num);


    //类似于单例
    Vue.prototype.num = 1888;
    let v1 = new Vue();
    let v2 = new Vue();

    console.log(v1.num);
    console.log(v2.num);


</script>
</html>

初识vue
一、vue简介
二、vue环境简单搭建
三、vue实例成员
四、vue指令
五、js对象补充
六、js函数的补充
七、总结

六、js函数的补充

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>js函数的补充</title>
</head>
<body>
</body>
<script>
    /**1）函数的形参与调用时传入的实参的关系（并没有强制要求，你传你的，我收我的）
     * 传入和接收的参数个数不需要一致
     * 但是一定得按照位置进行赋值（没有关键字参数）
     * 没有接收的实参会被遗弃，没有被赋值的形参会被赋值为undefined
     */
    function fn1(a,b) {
        console.log(a,b);
        return a + b;
    }

    let res = fn1(10, 20, 30);
    console.log(res);

    // 2）函数定义的演变
    let fn2 = function (a, b) {
        return a + b;
    };

    //3)省略关键字的箭头函数
    let fn3 = (a, b) => {
        return a + b;
    };

    //4)没有函数体，只有返回值的函数，可以省略作用域{}，由于只有返回值，所以return也可省略
    let fn4 = (a, b) => a + b;
    console.log(fn4(11, 22));

    //5)如果形参只有一个时，声明参数的()也可以省略
    let fn5 = num => num * num;
    console.log(fn5(3));

    //弱语言
    console.log(10 + '5');   //105
    console.log(10 - '5');  // 5
    console.log(+'5555') ;   //当只有一个类型时，用+可以变成5555
</script>
</html>

初识vue
一、vue简介
二、vue环境简单搭建
三、vue实例成员
四、vue指令
五、js对象补充
六、js函数的补充
七、总结

七、总结

1、Vue框架的介绍
    what：渐进式 javascript 框架
    where：前后台分离项目的前台开发（pc、移动端）
    why：有其他框架的优点、轻量、中文API（低学习成本）
    how：在页面中导入vue环境，用变量控制挂载点，各种指令与实例成员配合
    
2、基础实例成员
    1）挂载点el：id选择器唯一绑定
    2）插值表达式：{{ 内部可以写基本类型与变量，还可以完成简单运算与逻辑 }}
    3、标识符：delimiters修改插值表达式符号(了解)
    4、过滤器：filters自定义过滤器，可以串联使用，可以一次性过滤多个变量
    5、方法：methods自定义vue控制的方法，给事件指令绑定的

3、基础指令
    1）v-text：基本同{{}}
    2）v-html：可以解析html语法的内容
    3）v-on：
        v-on:事件="方法"   =>  系统传参，只默认传$event
        v-on:事件="方法($event, ...)"  => 完全自定义传参，可以手动传入$event
        
4、js对象补充：
    1）对象就可以作为字典，属性名都是字符串，可以省略引号
    2）属性值时变量同属性名，可以简写
    3）{}中的属性值为函数，称之为方法，也可以简写
    
    4）定义的函数，函数名大写，且函数内部有this，代表类
    5）可以通过 类.prototype.类属性 实现所以对象共享

初识vue 一、vue简介 二、vue环境简单搭建 三、vue实例成员 四、vue指令 五、js对象补充 六、js函数的补充 七、总结

1、定义：vue是JavaScript渐进式框架

2、优点：

3、为什么要学习vue?

二、vue环境简单搭建

1、通过cdn搭建

2、本地导入

三、vue实例成员

1、挂载点el

2、插值表达式

3、过滤器

四、vue指令

1、文本指令

2、事件指令

五、js对象补充

1、普通对象与对象简写

六、js函数的补充

七、总结

相关推荐

初识vue 一、vue简介二、vue环境简单搭建三、vue实例成员四、vue指令五、js对象补充六、js函数的补充七、总结

　　1、定义：vue是JavaScript渐进式框架

　　2、优点：

　　3、为什么要学习vue?

　　1、通过cdn搭建

　　2、本地导入

　　1、挂载点el

　　2、插值表达式

　　3、过滤器

　　1、文本指令

　　2、事件指令

　　1、普通对象与对象简写