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

Vue框架简介，实例成员，事件，过滤器，文本、事件和属性指令

时间：2019-11-12 00:34:17      阅读：89      评论：0      收藏：0      [点我收藏+]

标签：直接   use   method   细节   如何   dom   指令   price   代码复用   

目录

Vue框架简介，实例成员，事件，过滤器，文本、事件和属性指令

什么是Vue

vue框架：渐进式JavaScript框架

? vue一个环境：可以只控制页面中一个标签，可以控制一组标签，可以控制整个页面，可以控制整个项目。

? vue可以根据实际需求，选择控制前端项目的区域范围。

为什么要学Vue

"""
1、html、css、js直接开发项目，项目杂乱，不方便管理，要才有前端框架进行开发，规范项目
2、Angular、React、Vue三个前端框架，吸取前两个框架的所有优点，摒弃缺点，一手文档是中文
3、Vue框架优点：
    轻量级
    数据驱动
    数据的双向绑定
    虚拟DOM（嵌套页面架构的缓存）
    组件化开发：可以完全脱离服务器端，以前端代码复用的方式渲染整个页面
    由全球社区维护
    
    单页面web应用、MVVM设计模式
"""

如何使用Vue

开发版本：vue.js

生产版本：vue.min.js

先到官网把vue.js下载下来，在自己的项目中新建一个js文件夹，把vue.js放到js文件夹中，在html文件中导入即可

vue模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    {{ msg }}  <!-- 插值表达式{{ }}可以完成变量渲染，变量基础运算，变量方法调用，不能完成复杂运算(一步解决不了的，不能出现；) -->
</div>
</body>
<script src="/js/vue.js"></script>  <!--导入vue.js文件-->
<script>
    // 需要实例化一个vue对象
    // el为挂载点，采用css3选择器语法与页面标签进行绑定，决定该vue对象控制的页面范围
    // 1.挂载点只检索页面中第一个匹配到的结果，所以挂载点一般都采用id选择器
    // 2.html与body标签不可以作为挂载点（组件中解释）
    new Vue({
        el: '#app',
        data: {
            msg: '数据',
        // data是Vue的实例成员，为插值表达式中的变量提供数据，data中的数据可以通过Vue实例直接或间接访问
        }
    })
</script>
</html>

Vue实例成员

1、el: 实例

new Vue({
    el: '#app',
})
// 实例'#app'与页面挂载点一一对应
// 一个页面中可以出现多个实例对应多个挂载点
// 实例只操作挂载点内部内容

2、data: 数据

<body>
<div id="app">
    {{ msg }}
</div>
</body>
<script src="/js/vue.js"></script> 
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '数据',
        // data是Vue的实例成员，为插值表达式中的变量提供数据
        // data中的数据可以通过Vue实例直接或间接访问
        }
    })
</script>

3、methods: 方法

<body>
<div id="app">
    <p class="box" v-on:click="pClick">测试</p>   <!-- v-on:为事件绑定的指令-->
</div>
</body>
<script src="/js/vue.js"></script> 
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '数据',
        }
        // methods为vue实例提供事件函数的
        methods: {
            pClick () {
                //点击测试
            }
        }
    })
</script>

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 ++  // this可以直接点数据变量
            },
            overAction: function () {
                this.action = '悬浮'
            },
            outAction: function () {
                this.action = '离开'
            }
        }
    });

</script>
</html>

面向对象js

面向对象js：{ 变量, } | function Fn(值){ this.属性 = 值 } | obj = { 方法(){} }

<!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,
        // 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);  // 声明类People实例化对象名为p1
    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>

总结：

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

Vue过滤器

插值表达式{{ 变量 | 过滤器 }}的过滤器由实例成员 filters 来提供

<!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>`;
            },
            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>

Vue指令

文本指令

<!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>


        <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>

------------------------------------------------------------------------------------------------
前端页面展示结果是：
文本信息

文本信息拼接内容

本

信息

文本信息拼接内容

<b>文本信息</b>

文本信息

<b>文本信息</b>

文本信息

事件指令

<!--事件指令：v-on:事件名="事件函数"  -->
<!--简写：@事件名="事件函数"  -->
<p v-on:click="f1"></p>
<hr>
<p @click="f1"></p>

<!--绑定的事件函数可以添加()，添加括号就代表要传递参数-->
<p @click="f2(100)"></p>

<!--绑定的事件函数如果没有传递参数，默认传入 事件对象 -->
<div class="box" @click="f3"></div>

<!--事件函数一旦添加传参()，系统就不再传递任何参数，需要事件对象时，可以手动传入 $event -->
<div class="box" @click="f4(10, $event)"></div>

eg:

<!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(ev, b) {
                console.log(ev);
                console.log(b);
            },
            f6(num, ev) {
                console.log(num);
                console.log(ev);
            }
        },
    })

</script>
</html>

属性指令

<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>

</body>
<script src="js/vue.js"></script>
<script>
    let app = new Vue({  // 声明Vue实例化对象变量名为app
        el: '#app',
        data: {
            title: '12345',
            xyz: 'opq',
            mys1: {
                width: '200px',
                height: '200px',
                // 'background-color': 'greenyellow'
                backgroundColor: 'pink',  // js中-要用驼峰体代替
            },
            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>

Vue框架简介，实例成员，事件，过滤器，文本、事件和属性指令

标签：直接   use   method   细节   如何   dom   指令   price   代码复用   

原文地址：https://www.cnblogs.com/zhuangyl23/p/11839290.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
迷上了代码！