Vue入门和一些指令

Posted chanyuli

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue入门和一些指令相关的知识,希望对你有一定的参考价值。

Vue框架:官网

vue框架:渐进式javascript框架
    vue一个环境:可以只控制页面中一个标签、可以控制一组标签、可以控制整个页面、可以控制整个项目
    vue可以根据实际需求,选择控制前端项目的区域范围
为什么学习vue
"""
1、html、css、js直接开发项目,项目杂乱,不方便管理,要才有前端框架进行开发,规范项目
2、Angular、React、Vue三个前端框架,吸取前两个框架的所有优点,摒弃缺点,一手文档是中文
3、Vue框架优点:
    轻量级
    数据驱动
    数据的双向绑定
    虚拟DOM(嵌套页面架构的缓存)
    组件化开发
    由全球社区维护
    
    单页面应用、MVVM设计模式
"""

vue模板

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app'
    })
</script>
</html>

首先总得知道vue的样子是什么

vue导入-挂载点

在html页面中用script标签导入vue环境

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>vue导入</title>
</head>
<body>
    <div id="app">
        <hr>
        <p class="p1">{{ }}</p>
        <hr>
        <p class="p2">{{ }}</p>
        <hr>
        <p id="p">
            <b>{{ }}</b>
            <i>{{ }}</i>
        </p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    console.log(Vue);
    new Vue({
        el: '#app',
    })
</script>
</html>

el为挂载点,才有css3选择器语法与页面标签进行绑定,决定该vue对象控制的页面范围

1.挂载点只检索页面中第一个匹配到的结果,所以挂载点一般都才有id选择器

2.html与body标签不可以作为挂载点(组件中解释)

和django 的模板语法类似,在vue中想要表示变量也要用 {{ }} 来,而且中间一定要有个空格,不然就会被当成是普通文本内容,把你给渲染到前端页面上了。

vue变量

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>变量</title>
</head>
<body>
    <div id="app">
        <p>{{ msg }}</p>
        <p>{{ info }}</p>
        <h3>{{ msg }}</h3>
    </div>

    <div id="main">
        <p>{{ msg }}</p>
        <p>{{ info }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>

    // 实例成员中的data是为vue页面模板通过数据变量的
    let app = new Vue({
        el: '#app',
        data: {
            msg: 'message',
            info: 'vue变量信息'
        }
    });

    let main = new Vue({
        el: '#main',
        data: {
            msg: 'msg',
            info: 'info'
        }
    });

    console.log(app.info);
    console.log(main.info);

    // 创建vue实例(new Vue)传进去的字典(对象)的key,称之为vue实例成员(变量)
    // 访问实例成员,用 vue实例.$成员名, eg:app.$el,意思就是,vue下面的一层变量都是成员变量,像data里面的msg和info,就不是成员变量,所以可以直接用app.msg这种方式访问,但是其实在内部有一层优化,是 app.msg || app.$data.msg || app.$methods.msg这样的查找方式。 
    console.log(app.$el);
    console.log(app.$data);

    console.log(app.$data.info);
</script>
</html>

什么东西其实都在vue对象的options里面,他也是一个成员变量,其他所有的成员变量都在他里面。

vue 事件

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        body {
            /*页面内容不允许被选中*/
            user-select: none;
        }
        .p1:hover {
            cursor: pointer;
            color: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <p class="p1" v-on:click="fn">这是一个段落,被点击了{{ count }}下</p>
        <p class="p2" v-on:mouseover="overAction" v-on:mouseout="outAction" >该便签被{{ action }}</p>

        <div v-on:mouseover="overAction" v-on:mouseout="outAction">div被{{ action }}</div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            count: 0,
            action: '渲染',
            // fn: function () {
            //     // console.log(app.count);
            //     // app.count ++
            //     console.log(this);  // this不是该vue实例对象,是顶级Window对象
            // }
        },
        // methods就是为vue实例提供事件函数的
        methods: {
            fn: function () {
                // console.log(app.count);
                // app.count ++;
                // console.log(this);  // this代表当前该vue实例对象
                this.count ++
            },
            overAction: function () {
                this.action = '悬浮'
            },
            outAction: function () {
                this.action = '离开'
            }
        }
    });

</script>
</html>

在后面的事件指令会再讲。

js的对象

<!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.key本质是属性名,所以都是字符串类型(可以出现1,true),其实都是省略引号的字符串

    let sex = '男';
    let dic = {
        'name': 'Owen',
        1: 100,
        true: 12345,
        age: 18,
        //就是说这里,前面可以写age也可以写'age',因为都是省略引号的。
        // sex: 'sex',
        sex,
        //因为sex和他的内容sex一样,而且sex是一个变量,所以可以直接写sex。必须满足前两个条件才行。
        
    };
    console.log(dic['name']);
    console.log(dic['1']);
    console.log(dic['true']);
    console.log(dic['age']);
    console.log(dic.sex);

    dic.price = 3.5;
    console.log(dic.price);

    // 声明类创建对象,类可以实例化n个对象,哪个对象调用,this就代表谁
    function People(name, age) {
        this.name = name;
        this.age = age;
        this.eat = function () {
            console.log(this.name + '在吃饭');
            return 123
        }
    }
    let p1 = new People('Owen', 17.5);
    console.log(p1.name);
    let res = p1.eat();
    console.log(res);

    // 直接声明对象,{}内的key都属于当前对象的
    // {}中的方法通常会简写
    let stu1 = {
        name: '张三',
        age: 18,
        // eat: function () {
        //     console.log(this.name + '在吃饭');
        // }
        eat () {
            console.log(this.name + '在吃饭');
        }
    };
    stu1.eat()

    // 总结:
    // 1.{}中直接写一个变量:key与value是同名,value有该名变量提供值
    // 2.es5下,所有的函数都可以作为类,类可以new声明对象,在函数中用 this.资源 为声明的对象提供资源
    // 3.{}中出现的函数叫方法,方法可以简写 { fn: function(){} } => { fn(){} }
</script>
</html>

文本指令

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>文本指令</title>
</head>
<body>
    <div id="app">
        <!-- 1、插值表达式,能完成变量渲染,变量基础运算,变量方法调用,不能完成复杂运算(一步解决不了的,不能出现;) -->
        <p>{{ msg }}</p>
        <p>{{ msg + '拼接内容' }}</p>
        <p>{{ msg[1] }}</p>
        <p>{{ msg.slice(2, 4) }}</p>

        <hr>

        <!--2、v-text:将所有内容做文本渲染 -->
        <p v-text="msg + '拼接内容'"></p>

        <!--3、v-html:可以解析html语法标签的文本 -->
        <p v-text="'<b>' + msg + '</b>'"></p>
        <p v-html="'<b>' + msg + '</b>'"></p>

        <!--只能把msg的内容渲染出来,<b>只会变成一个文本内容-->
        <p v-text="`<b>${msg}</b>`"></p> 
        
        <p v-html="`<b>${msg}</b>`"></p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '文本信息'
        }
    })
</script>
</html>

vue过滤器

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>过滤器</title>
</head>
<body>
    <div id="app">
        <!-- 默认将msg作为参数传给filterFn -->
        <p>{{ msg | filterFn }}</p>

        <!--过滤器串联-->
        <p>{{ num | f1 | f2 }}</p>

        <!--可以同时对多个变量进行过滤,变量用,分割,过滤器还可以额外传入参数辅助过滤-->
        <!--过滤器方法接收所有传入的参数,按传入的位置进行接收-->
        <p>{{ msg, num | f3(666, '好的') }}</p>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '文本内容',
            num: 1
        },
        filters: {
            filterFn(v1, v2) {
                // console.log(v1);
                // console.log(v2);
                return `<b>${v1}</b>`;//没办法通过过滤器来实现这个需求,还是得用v-html来写。
            },
            f1(v1) {
                return v1 * 100;
            },
            f2(v1) {
                return v1 * 100;
            },
            f3(v1, v2, v3, v4) {
                console.log(v1);
                console.log(v2);
                console.log(v3);
                console.log(v4);
            }
        }
    })
</script>
</html>

事件指令

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>事件指令</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--事件指令:v-on:事件名="事件函数"  -->
        <!--简写:@事件名="事件函数"  -->
        <p v-on:click="f1">被点击了{{ count }}下</p>
        <hr>
        <p @click="f2">{{ p2 }}</p>
        <hr>
        <!--绑定的事件函数可以添加(),添加括号就代表要传递参数-->
        <ul>
            <li @click="f3(100)">{{ arr[0] }}</li>
            <li @click="f3(200)">{{ arr[1] }}</li>
            <li @click="f3(300)">{{ arr[2] }}</li>
        </ul>
        <ul>
            <li @click="f4(0)">{{ arr[0] }}</li>
            <li @click="f4(1)">{{ arr[1] }}</li>
            <li @click="f4(2)">{{ arr[2] }}</li>
        </ul>
        <hr>
        <!--绑定的事件函数如果没有传递参数,默认传入 事件对象 -->
        <div class="box" @click="f5"></div>
        <hr>
        <!--事件函数一旦添加传参(),系统就不再传递任何参数,需要事件对象时,可以手动传入 $event -->
        <div class="box" @click="f6(10, $event)"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            count: 0,
            p2: '第二个p',
            arr: [1, 2, 3],
        },
        methods: {
            f1() {
                this.count ++
            },
            f2() {
                console.log(this.p2)
            },
            f3(num) {
                console.log(num);
            },
            f4(index) {
                console.log(this.arr[index]);
            },
            f5(b,ev) {
                console.log(ev);
                console.log(b);
            },
            f6(num, ev) {
                console.log(num);
                console.log(ev);
            }
        },
    })

</script>
</html>

想要获取点击坐标,就要看点击事件,当你什么参数都不传,而且连括号都不写的时候,系统会自动给你传一个事件对象,也是一个大字典,东西都在里面。

属性指令

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>属性指令</title>
    <style>
        .b1 {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .box1 {
            width: 150px;
            height: 150px;
            background-color: darkturquoise;
            transition: .3s;
        }
        .box2 {
            width: 300px;
            height: 100px;
            background-color: darkgoldenrod;
            transition: .3s;
        }

        .circle {
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="app">
        <!--1.下方的class、id、title、abc等是div标签的属性,属性指令就是控制它们的-->
        <div class="b1" id="b1" v-bind:title="title" :abc="xyz"></div>
        <!--2.属性指令:v-bind:属性名="变量",简写方式 :属性名="变量" -->

        <!--3.属性指令操作 style 属性-->
        <div style="width: 200px;height: 200px;background-color: greenyellow"></div>
        <!-- 通常:变量值为字典 -->
        <div :style="mys1"></div>
        <!-- 了解:{中可以用多个变量控制多个属性细节} -->
        <div :style="{width: w,height: '200px',backgroundColor: 'deeppink'}"></div>


        <!--重点:一般vue都是结合原生css来完成样式控制 -->
        <!--<div :class="c1"></div>-->

        <!--class可以写两份,一份写死,一份有vue控制-->
        <div class="box1" :class="c2"></div>

        <!--{}控制类名,key为类名,key对应的值为bool类型,决定该类名是否起作用-->
        <div :class="{box2:true, circle:cable}" @mouseover="changeCable(1)" @mouseout="changeCable(0)"></div>


        <!--[]控制多个类名-->
        <div :class="[c3, c4]"></div>
    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({
        el: '#app',
        data: {
            title: '12345',
            xyz: 'opq',
            mys1: {
                width: '200px',
                height: '200px',
                // 'background-color': 'greenyellow'
                backgroundColor: 'pink',
            },
            w: '200px',
            c1: 'box1',
            c2: 'circle',
            cable: false,
            c3: 'box1',
            c4: 'circle'
        },
        methods: {
            changeCable(n) {
                this.cable = n;
            }
        }
    });

    setInterval(function () {
        // app.c1 = app.c1 === 'box1' ? 'box2' : 'box1';
        if (app.c1 === 'box1') {
            app.c1 = 'box2';
        } else {
            app.c1 = 'box1';
        }
    }, 300)


</script>
</html>

知识点总结

"""
1、在html页面中用script标签导入vue环境
2、vue Vue({ el: "#app" })挂载页面标签,建立关联后控制页面标签
3、插值表达式{{ }}可以完成基础运算
4、插值表达式中的变量有实例成员 data 来提供
5、v-on指令可以给标签绑定事件,事件函数由实例成员 methods 来提供
6、插值表达式{{ 变量 | 过滤器 }}的过滤器由实例成员 filters 来提供
7、面向对象js: { 变量, } | function Fn(值){ this.属性 = 值 } | obj = { 方法(){} }
8、文本指令:{{ }} | v-text=""  | v-html=""
9、事件指令: v-on:事件名="" | @事件名="" | :事件名="fn" | :事件名="fn($event, 自定义参数)"
10、属性指令:v-bind:属性名="" | :title="变量" | :style="字段变量" | 
            :class="变量" | :class="[变量1, 变量2]" | :class="{类1:真假, 类2:真假}"
"""

以上是关于Vue入门和一些指令的主要内容,如果未能解决你的问题,请参考以下文章

08《Vue 入门教程》Vue 事件处理

10《Vue 入门教程》Vue 双向绑定指令

10天从入门到精通Vue-vue的过滤器自定义指令Vue实例的生命周期

webpack+vue+vueRouter模块化构建小demo实例超详细步骤(附截图代码入门篇)

web框架之Vue渐进式框架-安装入门简介(python3入门)

vue从入门到进阶:指令与事件