码迷，mamicode.com
首页 > 其他好文 > 详细

Vue入门和一些指令

时间：2019-11-12 21:59:11      阅读：109      评论：0      收藏：0      [点我收藏+]

标签：导入   lang   OLE   charset   出现   price   none   option   方便   

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入门和一些指令

标签：导入   lang   OLE   charset   出现   price   none   option   方便   

原文地址：https://www.cnblogs.com/chanyuli/p/11845450.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！