(第三季)Vue2.0-选项

propsData Option 全局扩展的数据传递

扩展标签已经做好了,这时我们要在挂载时传递一个数字过去,我们就用到了propsData。 我们用propsData三步解决传值: 1、在全局扩展里加入props进行接收。propsData:{a:1} 2、传递时用propsData进行传递。props:[‘a’] 3、用插值的形式写入模板。{{ a }}

    <header></header>
    <script type="text/javascript">
        var header=Vue.extend({
            template:`<p>{{message}}-{{a}}</p>`,
            data:function(){
                return{
                    message:'Hello'
                }
            },
            props: ['a']
        });
        new header({propsData:{a:1}}).$mount('header');
    </script>

computed Option 计算选项

computed 的作用主要是对原数据进行改造输出。改造输出:包括格式的编辑,大小写转换,顺序重排,添加符号……。

    <div id="app">
        金额:{{newPrice}}
        <ul>
            <li v-for="newList in newLists">
                标题:{{newList.title}} 时间:{{newList.date}}
            </li>
        </ul>
    </div>
    
    <script type="text/javascript">
        var list=[
            {title:'文章1',date:'2018/1/10'},
            {title:'文章2',date:'2018/1/12'},
            {title:'文章3',date:'2018/1/22'}
        ]
        var app=new Vue({
            el:'#app',
            data:{
                price:10,
                list:list
            },
            computed: {
                newPrice:function(){
                    //返回新的格式
                    return this.price="¥"+this.price+"元"
                },
                newLists:function(){
                    //反转数组顺序
                    return this.list.reverse();
                }
            }
        })
    </script>

Methods Option 方法选项

methods中参数的传递

 <div id="app">
        {{a}}
        <button @click="add(2)">增加</button>
    </div>

    <script type="text/javascript">
        var app =new Vue({
            el:"#app",
            data:{
                a:1
            },
            methods: {
                add:function(num){
                    if(num!=''){
                        this.a=this.a+num;
                    }
                    else{
                        this.a++;
                    }
                }
            }
        })
    
    </script>

methods中的$event参数

    <div id="app">
        {{a}}
        <button @click="add(2,$event)">增加</button>
    </div>

    <script type="text/javascript">
        var app =new Vue({
            el:"#app",
            data:{
                a:1
            },
            methods: {
                add:function(num,event){
                    if(num!=''){
                        this.a=this.a+num;
                    }
                    else{
                        this.a++;
                    }
                    console.log(event);
                }
            }
        })
    
    </script>

我们这时候可以打印一下,看看event到底是个怎样的对象。你会发现,它包含了大部分鼠标事件的属性。

event.png

native 给组件绑定构造器里的原生事件。

在实际开发中经常需要把某个按钮封装成组件,然后反复使用,如何让组件调用构造器里的方法,而不是组件里的方法。就需要用到我们的.native修饰器了。

     <div id="app">
        {{a}}
        <btn @click.native="add(2,$event)"></btn>
    </div>
        <button>外部调用内部构造器里面的方法</button>
    <script type="text/javascript">
        var btn={
            template:`<button>增加</button>`
        }
        var app =new Vue({
            el:"#app",
            data:{
                a:1
            },
            components: {
                "btn":btn
            },
            methods: {
                add:function(num,event){
                    if(num!=''){
                        this.a=this.a+num;
                    }
                    else{
                        this.a++;
                    }
                    console.log(event);
                }
            }
        })
    
    </script>

作用域外部调用构造器里的方法

 <div id="app">
        {{a}}
    </div>
        <button onclick="app.add(2)">外部调用内部构造器里面的方法</button>
    <script type="text/javascript">
     
        var app =new Vue({
            el:"#app",
            data:{
                a:1
            },
            methods: {
                add:function(num,event){
                    if(num!=''){
                        this.a=this.a+num;
                    }
                    else{
                        this.a++;
                    }
                    console.log(event);
                }
            }
        })
    
    </script>

Watch 选项 监控数据

看一个监控变化的案例

<div id="app">
       <p>今日温度:{{wendu}}°C</p> 
       <p>穿衣建议:{{chuanyi}}</p>
       <button @click="add">增加温度</button>
       <button @click="reduce">增加温度</button>
    </div>

    <script type="text/javascript">
        var  suggestion=['短袖','长衣','羽绒服'];
        var app = new Vue({
            el:'#app',
            data:{
                wendu:14,
                chuanyi:'长衣'
            },
            methods: {
                add:function(){
                    this.wendu+=5;
                },
                reduce:function(){
                    this.wendu-=5;
                }
            },
            watch: {
                //wendu表示需要监控的数据,newVla是变化之后的数据oldVal是变化之前的数据
                wendu:function(newVal,oldVal){
                    if(newVal>=26){
                        this.chuanyi=suggestion[0];
                    }else if(newVal<26 && newVal >=0)
                    {
                        this.chuanyi=suggestion[1];
                    }else{
                        this.chuanyi=suggestion[2];
                    }

                }
            }
        })
    </script>

用实例属性写watch监控

    <div id="app">
       <p>今日温度:{{wendu}}°C</p> 
       <p>穿衣建议:{{chuanyi}}</p>
       <button @click="add">增加温度</button>
       <button @click="reduce">增加温度</button>
    </div>

    <script type="text/javascript">
        var  suggestion=['短袖','长衣','羽绒服'];
        var app = new Vue({
            el:'#app',
            data:{
                wendu:14,
                chuanyi:'长衣'
            },
            methods: {
                add:function(){
                    this.wendu+=5;
                },
                reduce:function(){
                    this.wendu-=5;
                }
            }
        })
        app.$watch("wendu",function(newVal,oldVal){
            if(newVal>=26){
                        this.chuanyi=suggestion[0];
                    }else if(newVal<26 && newVal >=0)
                    {
                        this.chuanyi=suggestion[1];
                    }else{
                        this.chuanyi=suggestion[2];
                    }
        })

Mixins 混入选项操作

Mixins一般有两种用途: 1、在你已经写好了构造器后,需要增加方法或者临时的活动时使用的方法,这时用混入会减少源代码的污染。 2、很多地方都会用到的公用方法,用混入的方法可以减少代码量,实现代码重用。 我们现在有个数字点击递增的程序,假设已经完成了,这时我们希望每次数据变化时都能够在控制台打印出提示:“数据发生变化”.

    <div id="app">
        {{num}}
        <p><button @click="add">增加</button></p>
    </div>
    <script type="text/javascript">
        var addLog={
            updated:function(){
                console.log("数据发生变化,变化成了"+this.num);
            }
        }
        //全局API混入方式
        Vue.mixin({
            updated:function(){
                console.log("全局混入");
            }
        })

        var app = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods: {
                add:function(){
                    this.num++;
                }
            },
            //把添加的额外功能加到minxins
            mixins:[addLog]
        })
    </script>

mixins的调用顺序

从执行的先后顺序来说,都是混入的先执行,然后构造器里的再执行,混入的全局混入先执行

Extends Option 扩展选项

当原生的方法与扩展的方法重名时只执行原生的方法混入同样如此

    <div id="app">
        {{num}}
        <p><button @click="add">增加</button></p>
    </div>
    <script type="text/javascript">
        var addLog={
            created:function(){
                console.log("我是被扩展出来的");
            },
            methods: {
                add:function(){
                    console.log('我是被扩展出来的方法!');
                }
            }
        }

        var app = new Vue({
            el:"#app",
            data:{
                num:1
            },
            methods: {
                add:function(){
                    console.log("我是原生的方法");
                }
            },
           extends:addLog
        })
    </script>

delimiters 选项

delimiters的作用是改变我们插值的符号。Vue默认的插值是双大括号{{ }}。但有时我们会有需求更改这个插值的形式。

    <div id="app">
        ${num}
    </div>

    <script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                num:1
            },
            delimiters:['${','}']
        })
    </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏ASP.NET MVC5 后台权限管理系统

ASP.NET MVC5+EF6+EasyUI 后台管理系统(83)-Easyui Datagrid 行内编辑扩展

这次我们要从复杂的交互入手来说明一些用法,这才能让系统做出更加复杂的业务,上一节讲述了Datagird的批量编辑和提交 本节主要演示扩展Datagrid行内...

4579
来自专栏柠檬先生

Angularjs基础(六)

AngularJS HTML DOM     AngularJS为HTML DOM 元素的属性提供了绑定应用数据的指令。 ng-disabled指令    ...

2058
来自专栏IMWeb前端团队

谁说你只是"会用"jQuery?

前言 套用上篇文章向zepto.js学习如何手动触发DOM事件 的开头??? 前端在最近几年实在火爆异常,vue、react、angular各路框架层出不穷,...

2206
来自专栏Django中文社区

Django模板标签regroup的妙用

在使用 Django 开发时,有时候我们需要在模板中按对象的某个属性分组显示一系列数据。例如博客文章按照时间归档分组显示文章列表(示例效果请看我的博客的归档页面...

3146
来自专栏软件开发

前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)

一、Vue的实例 1.1、创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue...

5027
来自专栏听雨堂

.Net中使用带UI的OCX的方法

方法一:在工具箱中插入COM控件,当把控件拖到界面上后,将会自动产生两个封装的dll,并在引用中添加。 问题:当ocx需要不断升级时,这种方法很痛苦,需要重新...

1887
来自专栏我的小碗汤

go语言path/filepath包之Walk源码解析

go语言的path/filepath包包提供了很多兼容各个操作系统的文件路径实用操作方法,今天只来看看Walk方法:

642
来自专栏Golang语言社区

【Go 语言社区】并发性

并发性 并发的特点是需要锁Lock和互斥Mutex。在Java中加锁和解锁是一个复杂过程代码如下: try { mutex.acquire(); try...

36411
来自专栏Golang语言社区

Go语言-base64使用

什么是base64? Base64是网络上最常见的用于传输8Bit字节代码的编码方式之一,大家可以查看RFC2045~RFC2049,上面有MIME的详细规范。...

45313
来自专栏逸鹏说道

Python3 与 C# 并发编程之~ 进程篇中

接着上面继续拓展,补充说说获取函数返回值。 上面是通过成功后的回调函数来获取返回值,这次说说自带的方法:

1273

扫码关注云+社区