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

Vue框架简介，实例成员，事件，过滤器，文本、事件和属性指令
- 什么是Vue
- 为什么要学Vue
- 如何使用Vue
- Vue实例成员
  - 1、el: 实例
  - 2、data: 数据
  - 3、methods: 方法
- Vue事件
- 面向对象js
- Vue过滤器
- Vue指令
  - 文本指令
  - 事件指令
  - 属性指令

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>

总结：

{}中直接写一个变量：key与value是同名，value由该变量提供值
es5下，所有的函数都可以作为类，类可以new声明对象，在函数中用 this.资源为声明的对象提供资源
{}中出现的函数叫方法，方法可以简写{ 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>

原文地址：https://www.cnblogs.com/zhuangyl23/p/11839290.html

时间： 2024-10-13 22:09:49

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

vue框架：框架简介，基础实例成员，基础指令，js对象方法补充

1.指令 2.实例成员 3.组件 4.项目开发 1)定义:JavaScript渐进式框架 ? 渐进式:可以控制一个页面的一个标签,也可以控制一系列的标签,也可以控制整个页面,甚至可以控制整个前台项目 2)优势: ? 有指令(分支结构,循环结构...) 复用页面结构等 ? 有实例成员(过滤器,监听), 可以对渲染的数据进行二次格式化 ? 有组件(模板的复用或组合),快速搭建页面 ? ? 虚拟dom:所有文件加载到内存中 ? 数据的双向绑定 ? 单页面应用 ? 数据驱动 3)为什么学习vue: ?

前端Vue框架 01

1.前言:路飞项目所有知识点概况(了解) Vue框架:前台界面,页面逻辑 1)指令 2)实例成员 3)组件 4)项目开发 DRF框架:数据(接口) 1)基础的模块:请求.响应.解析.渲染 2)序列化.三大认证 3)过滤.搜索.排序.分页 4)异常.第三方jwt.restful接口规范 Luffy项目:前后台分离项目 1)项目的登录认证.课程商机销售.项目完成 2)短信.支付宝.服务器.上线.redis.celery.git 2.Vue框架介绍 1)定义:javascript渐进式框架渐进式:可

Vue框架基础

Vue框架基础 1.什么是vue框架渐进式的JavaScript框架渐进式:可以控制一个页面的标签,也可以控制一系列标签,也可以控制整个页面,甚至可以控制整个前端项目 2.vue有什么优势通俗来讲: 有指令(分支结构,循环结构...),复用页面结构等有实例成员(过滤器,监听),可以对渲染的数据做二次格式化有组件(模块的复用与组合),快速搭建页面官方说法: 虚拟DOM,直接加载的到内存中,加载速度更快数据的双向绑定单页面应用数据驱动 3.为什么要学vue 前端框架主要有三种:An

Vue框架（一）——Vue导读、Vue实例（挂载点el、数据data、过滤器filters）、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定.MVVM设计模式.组件化开发.单页面应用 Vue环境:本地导入和cdn导入 2.Vue是渐进式js框架通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目.3.怎么使用vue 去官网下载然后导入 <div id="app">

五十三、初识vue，实例成员语法，指令，

vue 1.什么是vue? 可以独立完成前后端分离式web项目的JavaScript框架 2.为什么要学习vue? 三大主流框架:Angular(脸书).React(git公司).vue(中国人第三方) 先进的前端设计模式:MVVM 可以完全脱离服务器,以前端代码复用渲染整个页面:组件化开发 vue框架 vue是前端框架:Angular(脸书).React(git公司).vue(中国人第三方) vue:结合其他框架优点,轻量级,中文API,数据驱动,双向绑定,MVVM设计模式.组件化开发.单页面

Vue ---- vue的基本使用文本/事件/属性指令补充: js面向对象 js函数

目录日考题(知识点)??? 1.http 与 https 2.前端布局 3.orm 大概的大纲?? vue框架??? 1.创建vue实例 2.挂载点 3.data 变量 4.methods 方法 5.插值表达式 6.文本指令 7.事件指令 8.属性指令 9.补充:面向对象js 10.补充:js函数日考题(知识点)??? 1.http 与 https http 与 tcp : 一个是应用层, 传输层, http 协议传输层采用的是tcp http的特点: 无状态无连接先客户端发送请求, 服

实例成员：计算属性监听属性以及vue的项目开发

6)字符串补充双引号: "前缀" + 变量 + "后缀" 单引号: '前缀' + 变量 + '后缀' 反引号: `前缀$(变量)后缀` ps:在反引号中可以用$()来包裹变量,实现字符串的拼接 7)实例成员:计算属性监听属性计算属性: ? 1)计算属性其实就是vue中的方法属性,方法名可以作为属性来使用,属性值就是方法的返回值 ? 2) 在computed中声明的方法属性,不能在data中重复声明,比data中声明的属性要多出些逻辑的的地方 ? 3)方法属性自

第二篇：Vue实例成员

Vue实例 1.el:实例 new Vue({ el: '#app' }) // 实例与页面挂载点一一对应 // 一个页面中可以出现多个实例对应多个挂载点 // 实例只操作挂载点内部内容 2.data:数据 <div id='app'> {{ msg }} </div> <script> var app = new Vue({ el: '#app', data: { msg: '数据', } }) console.log(app.$data.msg); console.

实例成员，指令

vue导读 """ vue框架 vue是前台框架:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定.MVVM设计模式.组件化开发.单页面应用 vue环境:本地导入与cdn导入 """ ? # vue是js渐进式框架 # 根据开发需求,可以决定vue框架控制项目的具体方位:可以为一个标签,也可以为一个页面,甚至可以为整个项目实例成员 - 挂载点 """ 1.vue渐