Vue基础以及指令, Vue组件

Vue基础篇一

Vue指令

Vue的指令directive很像我们所说的自定义属性,指令时Vue模板中最常用的功能,它带有v-前缀,功能是当表达式改变的时候,相应的行为作用在DOM上.

<div id="app">

    <p v-text="a"></p>

    <div v-html="b"></div>

</div>

<script>

    const app = new Vue({

        el: "#app",

        data: {

            a: "A",

            b: `<h1>B</h1>`

        }

    })

</script>

v-text, v-html

<div id="app">

    用户名：

    <input type="text" v-model.lazy.trim="name">

    手机号：

    <input type="text" v-model.number="phone">

    <pre>{{name}}</pre>

    {{typeof phone}}

    <textarea name="" id="" cols="30" rows="10" v-model="article"></textarea>

    {{article}}

    <select v-model="from">

        <option value="1">河北</option>

        <option value="2">山西</option>

    </select>

    <select v-model="where" multiple>

        <option value="1">上地</option>

        <option value="2">西二旗</option>

        <option value="3">三里屯</option>

    </select>

    {{from}}

    {{where}}

</div>

<script>

    // input

    // textarea

    // select

    const app = new Vue({

        el: "#app",

        data: {

            name: "",

            phone: "",

            article: "这是一大段文本~~~",

            from: null,

            where: []

        }

    })

</script>

v-model

<div id="app">

    <h1>展示你们的爱好</h1>

    <ul>

        <li v-for="hobby in hobby_list">{{hobby}}</li>

    </ul>

    <h1>展示你们喜欢吃的食物</h1>

    <ul>

        <li v-for="food in food_list">{{food.name}}它的价格是: {{food.price}}</li>

    </ul>

</div>

<script>

    const app = new Vue({

        el: "#app",

        data: {

            hobby_list: ["美女", "LOL", "吃鸡"],

            food_list: [

                {

                    name: "臭豆腐",

                    price: 6,

                },

                {

                    name: "榴莲",

                    price: 100,

                }

            ]

        }

    })

</script>

v-for

    <style>

        .active{

            background-color: red;

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

<div id="app">

    <a :href="path">@陈润</a>

    <a v-bind:href="path">@陈润</a>

    <div v-bind:class="{active: show}">盒子</div>

</div>

<script>

    const app = new Vue({

        el: "#app",

        data: {

            path: "http://www.baidu.com",

            show: false

        }

    })

</script>

v-bind

    <style>

        .active{

            background: red;

            width: 100px;

            height: 100px;

        }

    </style>

</head>

<body>

<div id="app">

    <a :href="path">@chenrun</a>

    <button @click="on_click">点我显示盒子的样式</button>

    <div :class="{active: show}">盒子</div>

    <div v-on="{mouseenter: onMouseenter, mouseleave: onMouseleave}">鼠标事件</div>

</div>

<script>

    const app = new Vue({

        el: "#app",

        data: {

            path: "http://www.baidu.com",

            show: false

        },

        methods: {

            on_click: function() {

                this.show = ! this.show

            },

            onMouseenter: function() {

                console.log("鼠标移入了")

            },

            onMouseleave: function() {

                console.log("鼠标移除")

            }

        }

    })

</script>

v-on

<div id="app">

    <div v-if="role == 'vip'">

        <h1>欢迎会员登陆</h1>

    </div>

    <div v-else-if="role == 'vvip'">

        <h1>您的专属秘书为您服务</h1>

    </div>

    <div v-else>

        <p>gun~~~~</p>

    </div>

</div>

<script>

    const app = new Vue({

        el: "#app",

        data: {

            role: "vip",

        }

    })

</script>

v-if

<div id="app">

    <button @click="on_click">点我</button>

    <p v-show="show">Alex DSX</p>

    <p v-if="a == 'if_show'">DSX</p>

    <p v-else>Alex</p>

</div>

<script>

    const app = new Vue({

        el: "#app",

        data: {

            show: false,

            a: "if_show"

        },

        methods:{

            on_click: function() {

                this.show = ! this.show

            }

        }

    })

    //if appendChild

    //show display

</script>

v-show

<div id="app">

    用户名: <input type="text" v-model.lazy.trim="username"><br>

    {{username}}

    手机号: <input type="text" v-model.number="phone"><br>

    {{phone}}

</div>

<!--//main.js-->

<script>

    var app = new Vue({

        el: '#app',

        data: {

            username: "",

            phone: "",

        }

    })

</script>

修饰符

    <style>

        .active{

            width: 100px;

            height: 100px;

            border: solid 1px red;

            background: #eeeeee;

        }

    </style>

</head>

<body>

<div id="app">

    <div class="active" v-pin.right.bottom="show"></div>

</div>

<script>

    Vue.directive("pin", function(el, binding){

        console.log(el);

        console.log(binding);

        let val = binding.value;

        let positions = binding.modifiers;

        if(val){

            for(let key in positions){

                el.style.position = "fixed";

                console.log(key);

                el.style[key]=0;

            }

        }else{

            el.style.position = "static";

        }

    });

    const app = new Vue({

        el : "#app",

        data: {

            show: true,

        }

    })

</script>

自定义指令

<div id="app">

    <table border="1">

        <thead>

            <th>学科</th>

            <th>分数</th>

        </thead>

        <tbody>

            <tr>

                <td>数学</td>

                <td><input type="text" v-model.number="math"></td>

            </tr>

            <tr>

                <td>英语</td>

                <td><input type="text" v-model.number="english"></td>

            </tr>

            <tr>

                <td>物理</td>

                <td><input type="text" v-model.number="physics"></td>

            </tr>

            <tr>

                <td>总分</td>

                <td>{{sum_num}}</td>

            </tr>

            <tr>

                <td>平均分</td>

                <td>{{average}}</td>

            </tr>

        </tbody>

    </table>

</div>

<script>

    const app = new Vue({

        el: "#app",

        data: {

            math: 95,

            english: 55,

            physics: 100,

        },

        computed: {

            sum_num: function(){

                let total = this.math + this.english + this.physics;

                return total

            },

            average: function(){

                let ret = Math.round(this.sum_num/3);

                return ret

            }

        }

    })

</script>

计算属性

Vue计算属性

我们的模板表达式非常遍历,但是逻辑复杂的时候,模板会难以维护,vue提供了计算机属性.

我们用方法也能达到效果,那么我们为什么要计算属性呢~

其实在vue中方法和计算属性达到的效果是一样的,但是计算属性时基于依赖进行缓存的.

只有依赖的数据发生改变的时候,才会重新执行计算属性的函数, 每次调用都会从缓存中拿之前算好的数据.

而方法时没调用一次,执行一次.

Vue过滤器

过滤器时在数据到达用户的最后异步进行简单的过滤处理,复杂的还要用计算属性或者方法.

<div id="app">

    <div>

        <p>价格展示</p>

        <input type="text" v-model="price">

        {{price | currency('USD')}}

    </div>

    <div>

        <p>换算</p>

        <input type="text" v-model="meters">

        {{meters | meter}}

    </div>

</div>

<script>

    Vue.filter('currency', function (val, unit){

        console.log(val);

        console.log(unit);

        val = val || 0;

        var ret = val + unit;

        return ret

    });

    Vue.filter('meter', function(val){

        val = val || 0;

        return (val/1000).toFixed(2) + "米"

    });

    new Vue({

        el: "#app",

        data: {

            price: 10,

            meters: 10,

        }

    })

</script>

过滤器

Vue基础以及指令, Vue组件的更多相关文章

Vue基础以及指令
Vue 基础篇一一.Vue框架介绍之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
（day65、66）Vue基础、指令、实例成员、JS函数this补充、冒泡排序
目录一.Vue基础 (一)什么是Vue (二)为什么学习Vue (三)如何使用Vue 二.Vue指令 (一)文本指令 (二)事件指令v-on (三)属性指令v-bind (四)表单指令v-model ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页+指令(一)
缘起书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...
Vue基础-渲染函数-父子组件-传递数据
Vue 测试版本:Vue.js v2.5.13 做了个 demo,把父子组件的数据都绑定到 Vue 实例 app 上,注释中的 template 相对好理解些 <div id="app ...
Vue基础-作用域插槽-列表组件
Vue 测试版本:Vue.js v2.5.13 Vue 官网介绍作用域插槽时, 在 2.5.0+,slot-scope 能被用在任意元素或组件中而不再局限于 <template>. 作用域 ...
Vue基础（三）---- 组件化开发
基本结构: ◆1.组件化开发思想 ◆2.组件注册 ◆3.Vue调试工具用法 ◆4.组件间数据交互 ◆5.组件插槽 ◆6.基于组件的案例 ◆1.组件化开发思想优点: 提高开发效率方便重复使用简 ...
前端-Vue基础3（父子组件交互）
1.子组件往父组件传值点击子组件的值,子组件自增,父组件的值也跟着自增通过:this.$emit('change')方法向父组件暴露事件,在子组件中引用,可以调用父组件的方法点击子组件触发cli ...
Vue基础之初识Vue
Vue特点及优点小巧,压缩后体积17KB: 渐进式,不需要一口吃成大胖子,一上来就用所有的东西,可以一步一步.有阶段的先吃成小胖子: 数据驱动,双向数据绑定,MVVM模式,详见下一段指令,例如v- ...
Vue基础进阶之 Vue生命周期与钩子函数
Vue生命周期 Vue生命周期:Vue实例从创建到销毁的过程,称为Vue的生命周期: Vue生命周期示意图:https://cn.vuejs.org/v2/guide/instance.html#生命 ...

随机推荐

Java并发编程之CountDownLatch
一.场景描述在多线程程序设计中,经常会遇到一个线程等待一个或多个线程的场景例如:百米赛跑,十名运动员同时起跑,由于速度的快慢,肯定有先到达和后到达的,而终点有个统计成绩的仪器,当所有选手到达终点时 ...
win7/8 关闭非正常关机的自动修复功能
win7/8 关闭非正常关机的自动修复功能 1.桌面右键新建一个文档文本,双击打开文件新建文本文档,复制以下命令到文本里面! bcdedit /set {default} bootstatuspoli ...
oracle的序列号（sequence）
oracle的自增列,要采用序列号(sequence). 初始化阶段要手动建立一个sequence,然后插入的时候,还要手动自己去读这个sequence的nextval赋给相关字段,如ID,麻烦的很. ...
Django实现微信公众号简单自动回复
在上篇博客阿里云部署django实现公网访问已经实现了了django在阿里云上的部署,接下来记录django实现微信公众号简单回复的开发过程,以方便日后查看内容概要: (1)微信公众号声请 (2)微 ...
CDlinux无线破解系统
cdlinux是一款功能非常强大的无线密码破解器,cdlinux兼容pin软件,不用抓取握手包.不用跑字典.不用客户端在线就能够破解无线路由器的密码,轻轻松松帮助用户达到蹭网的目的. 基本简介 cdl ...
WCF服务引用时错误: 无法导入 wsdl:portType详细信息
WCF服务发布到IIS后,在客户端或WCFTestClient添加引用的时候报错如下: 错误: 无法导入 wsdl:portType详细信息: 在运行 WSDL 导入扩展时引发异常: System.S ...
LA2218 Triathlon
题意 PDF 分析设出长度$x,y,1-x-y$,就是关于它们的二元一次不等式,判断有没有解. 可以用半平面交来解决. x/V[i]+y/U[i]+(1-x-y)/W[i] < x/V[j ...
Oracle中exp,imp(导入导出)数据迁移注意事项
这几天做开发库schema备份,出现些问题,记录一下.一,exp时,os语言环境和数据库不同时会自动发生转换. 如果操作系统的字符集小于数据库字符集,就可能出现乱码现象.imp时,同理,也是有可能 ...
java的内存管理对象的分配与释放
分配程序员通过new为每个对象申请内存空间(基本类型除外),所有对象都在堆中分配空间:释放:对象的释放是由垃圾回收机制决定和执行的. Java内存分为两种:栈内存和堆内存 (1)在函数中定义的基本类 ...
解决安装Weblogic domain卡住问题（Primeton BPS）
这两天一直有一个问题困扰我,在suse10+weblogic(920,923,100,103)上安装bpm产品失败.有些版本是创建domain的时候卡在create security informat ...

Vue基础以及指令, Vue组件

Vue基础以及指令, Vue组件的更多相关文章

随机推荐

热门专题