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#生命 ...

随机推荐

当导用模块与包的import与from的问题（模块与包的调用）
当在views.py里写impor models会不会报错呢? 1.Python里面的py文件都是每一行的代码. 2.Python解释器去找一个模块的时候,只去sys.path的路径里找 3.djan ...
python之random库
random库是用于产生并运用随机数的标准库 1. random库函数 (1)random.seed(a) 设置随机种子数,可以是浮点数或整数,如果不设置的话,则random库默认以系统时间产生当作随 ...
SQL—数据分析
留存分析——左连接矩阵分析——group by 结构分析:分析每种产品占据总销售量的比例排序分析
RabbitMQ学习系列三-C#代码接收处理消息
RabbitMQ学习系列三:.net 环境下 C#代码订阅 RabbitMQ 消息并处理 http://www.80iter.com/blog/1438251320680361 http://www. ...
ActionContext介绍（在Struts2中）
一种属性的有序序列,它们为驻留在环境内的对象定义环境.在对象的激活过程中创建上下文,对象被配置为要求某些自动服务,如同步.事务.实时激活.安全性等等.多个对象可以存留在一个上下文内.也有根据上下文理解 ...
Spring 实现发送电子邮件的两种方法
1.通过xml文件配置主要属性: xml文件:test.xml <bean id="mailSender" class="org.springframewor ...
LeetCode Split Concatenated Strings
原题链接在这里:https://leetcode.com/problems/split-concatenated-strings/description/ 题目: Given a list of st ...
Free Online SQL Formatter
SQL Formatter Web Service Free Online SQL Formatter SQL Parser engine used by SQL formatter 今日找了几个在线 ...
database - 数据库设计/使用容易忽略的细节
一.设计 1,数据类型尽量使用数字型,数字型的比较比字符型的快很多 2,数据类型尽量小,预测可以满足未来需求的前提 3,尽量建表时字段不允许为null,除非必要,可以用NOT NULL+DEFAULT ...
在web.config中配置httpHandlers节点是的说明
<system.web> <httpHandlers> <add verb="*" path="*.lcj" type=" ...

Vue基础以及指令, Vue组件

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

随机推荐

热门专题