0贰、Vue-基础学习

0贰、Vue-基础学习

是因为作者今天随处的厂商使用的zk框架,境遇了二个须求frozen on top。 一句话来讲就是滚动超越限定后,希望有一块东西停留在滚动窗口的最上部。

1、模版指令

由此沙盘指令(写在html中的),正是html和vue对象的粘合剂。

  • 数据渲染 v-text、v-html、{{}}

  <div id="app">
    {{ message }}
  </div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

v-text更新成分的 textContentv-html立异成分的
innerHTML,内容按一般 HTML 插入,不会作为 Vue
模板实行编写翻译。若是想要title: 'TOMVC <sub>2.0</sub>'不以字符串方式显得,就足以应用v-html,
<h2 v-html='title'></h2>

  • 操纵模块突显隐藏 v-if、v-show

  <div id="view">
    <p v-if='isShow'></p>
    <p v-show='isShow'></p>
</div>

new Vue({
    el: '#view',
    data: {
      isShow: true
    }
 });

v-if是直接不渲染该因素; v-show是透过display: none举行隐蔽;

  • 渲染循环列表 v-for
    模板引擎都会提供循环的支持。Vue也不例外,Vue是提供了三个v-for指令。基本的用法类似于foreach的用法。

    <ul class="view">
        // 遍历数组,取出每个元素
        <li v-for='item in list'>
            {{item.text}}
        </li>
    </ul>

<script>
    var app = new Vue({
        el: '.view',
        data: {
            list: [  // 数组
                {text: '01、HTML'},
                {text: '02、CSS'},
                {text: '03、JavaScript'}
            ]
        }
    });
</script>
  • 事件绑定 v-on

<div id="view4">
    <input type="button" value="按钮" v-on:click='doThis' />
    // 简写
    <input type="button" value="按钮" @click='doThis' />
</div>

<script>
  new Vue({
    el: '#view4',
    methods: {
      doThis: function(){
        alert('hello');
      }
    }
});
</script>
  • 性子绑定 v-bind
    Vue中不能够一直动用{{ expression}}
    语法进行绑定html的竹签,而是用它特有的v-bind指令,语法<标签 v-bind:属性名="要绑定的Vue对象的data里的属性名"></标签>
    鉴于v-bind
    使用10分频仍,所以Vue提供了简易的写法,能够去掉v-bind直接利用:即可。

<div id="view">
    ![](imgSrc)
    ![](imgSrc)
    <p :class='InfoClass'></p>
</div>

<script>
new Vue({
  el: '#view',
  data: {
    imgSrc: 'm_3_100.png',
    InfoClass: 'infoRed'
  }
});
</script>
  • 体制绑定 v-bind
    对于普通的性质的绑定,只好用地点的讲的绑定属性的不二等秘书技。而Vue特地抓实了class和style的个性的绑定。能够有盘根错节的对象绑定、数组绑定样式和类。
    时常大家供给对体制实行切换,举个例子:div的展现和隐形,某些标签active等。Vue提供的对象绑定样式的措施就很容做这几个业务。

  <style>
      .view{
          width: 300px;
          height: 30px;
          border: 1px solid gray;
          line-height: 30px;
          text-align: center;
        }
       .active{  // 使能样式
          color: red;
        }
</style>

// 当isActive为true时,这个div就会添加类名active;当isActive为false时,这个div就会移出类名active;
<div class="view" :class='{active:isActive}'>
    {{message}}
</div>

   var app = new Vue({
      el: '.view', 
      data: {     
           message: 'hello Vue.',
           isActive: false 
       }
   });
  • 双向数据绑定 v-model
    上边的例证基本都以单向的js对象向
    HTML数据开始展览绑定,那HTML怎么样向js进行反馈数据吧?
    Vue提供了三个新的命令:v-model举行双向数据的绑定,注意不是v-bind。

<div id="app">
    <p>{{ message }}</p>
     // 双向数据绑定
    <input v-model="message">
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

Vue.js(读音 /vjuː/, 类似于 view)
是1套创设用户分界面包车型的士渐进式框架。MVVM框架

一. 零件介绍

零件(component),vue.js最强劲的作用之1

  • 作用:封装可采纳的代码,日常贰个零件正是一个功用体,便于在多少个地点都能调用该成效体
  • 根组件:我们实例化的Vue对象正是2个零部件,且是怀有组件的根组件
  • 分类:全局组件,局地组件
  • 不足:跳转时,不恐怕传递参数,则无从落到实处同一个页面遵照不一样的参数字展现示不一样内容

注:各类组件都是Vue的实例对象

一.zk框架

  1. ### 查看了zk的八.x版本,开采组件的帮助的事件(伊夫nt)最大的父类如下:

    • Events:

      • onClick, onDoubleClick, onRightClick, onDrop,
      • onMouseOver, onMouseOut, onOK, onCacnel, onCtrlKey and onSwipe.
        *
        abstract public class HtmlBasedComponent extends AbstractComponent {

        static {
        addClientEvent(HtmlBasedComponent.class, Events.ON_CLICK, 0);
        addClientEvent(HtmlBasedComponent.class, Events.ON_DOUBLE_CLICK, 0);
        addClientEvent(HtmlBasedComponent.class, Events.ON_RIGHT_CLICK, 0);
        addClientEvent(HtmlBasedComponent.class, Events.ON_OK, 0);
        addClientEvent(HtmlBasedComponent.class, Events.ON_CANCEL, 0);
        addClientEvent(HtmlBasedComponent.class, Events.ON_CTRL_KEY, 0);
        addClientEvent(HtmlBasedComponent.class, Events.ON_DROP, 0);
        addClientEvent(HtmlBasedComponent.class, Events.ON_MOUSE_OVER, 0); //not to use CE_DUPLICATE_IGNORE since there is an order issue
        addClientEvent(HtmlBasedComponent.class, Events.ON_MOUSE_OUT, 0);
        addClientEvent(HtmlBasedComponent.class, Events.ON_SWIPE, CE_DUPLICATE_IGNORE);
        addClientEvent(HtmlBasedComponent.class, Events.ON_AFTER_SIZE, CE_DUPLICATE_IGNORE);
        }

        }

发掘最大的组件所支撑的轩然大波并从未大家想要的onScroll事件。然后查一下你想要滚动的对象组件,举例说div
component:

div未有属于自个儿的风浪注册。所以div所支持的轩然大波都以父类的所注册的轩然大波。

如若说大家想要在div监听到滚动事件吧?

贰、Vue组件中重视选项

Vue的实例是Vue框架的输入,其实也正是前者的ViewModel,它含有了页面中的业务逻辑管理、数据模型等,当然它也可能有投机的壹多样的生命周期的事件钩子,协理大家开始展览对整个Vue实例生成、编写翻译、挂载、销毁等经过进行js调节。

  • data数据选项,代表vue对象的数码
    创办的Vue对象中的data属性正是用来绑定数据到HTML的,Vue框架会自行监视data里面包车型大巴数额变动,自动更新数据到HTML标签上去。本质原理是:Vue会自动将data里面包车型客车多寡实行递归抓换到getter和setter,然后就足以自动更新HTML标签了,当然用getter和setter所以老的浏览器Vue支持的不够好。

<div id="app">
    {{ message }}
</div>

var app = new Vue({
    el: '#app',
    data: {  // data数据选项
      message: 'Hello Vue!'
    }
 })
  • methods方法选项,代表vue对象的不二等秘书籍
    方法中的 this 自动绑定为 Vue 实例。

<div id="view">
  <input type="button" value="按钮" @click='doThis' />
</div>

<script>
new Vue({
  el: '#view',
  methods: {  // methods方法选项
    doThis: function(){
      alert('hello');
    }
  }
});
</script>
  • computed计算属性
    在做多少的绑定的时候,数据要开始展览处理以往技能显获得html页面上,纵然vue提供了那多少个好的表达式绑定的艺术,不过只好应对低强度的急需,其它放入太多的逻辑会让模板过重且难以保证。而算算属性,即属性能够是3个主意。
    负有 getter 和 setter 的 this 上下文自动地绑定为 Vue
    实例。那就很强劲了,在图谋属性中定义的函数里面能够直接选择指向了vue实例的this。

<div class="view">
   // 计算属性,好处在于会自动根据totalPrice显示不同内容
   {{showStr}}
</div>

var app = new Vue({
  el: '.view', 
  data: {
    totalPrice: 18
  },
  computed: {  // Vue对象的computed属性
    // 计算属性,但该属性是一个方法
    showStr: function(){  
       // this指向vue实例 
      if(this.totalPrice < 20){
        return '金额小于20,没有优惠喔!'
      } else {
        return '金额大于20,免配送费!'
      }
    }
  }
 });
  • watch监听选项,设置了对象的监听方法
    二个目的,键是须要观看的表明式,值是对应回调函数。值也得以是方法名,恐怕隐含选项的靶子。

  var view2 = new Vue({
    el: '#view2',
    data: {
      a: 1
    },
    methods: {
      doSomething: function(){
        this.a++;
      }
    },
    watch: {
      a: function(newvalue, oldvalue){
        console.log(newvalue, oldvalue);
      }
    }
 });

Vue.js的指标:壹、消除数量绑定的主题素材 二、开辟Single Page
Application(SPA)大型单页面应用。首要援助移动端,也支撑PC端。
三、援救组件化,那样复开销高

二. 大局组件

透过Vue的静态方法(component)定义,全可在颇具组件中采纳。语法如下:

<div id="app">
    <!-- 使用组件 -->
    <my-header></my-header>
</div>
<script type="text/javascript">
   //定义全局组件
   Vue.component("my-header",{
       template:"<div>我是全局组件</div>"
   })
   let app = new Vue({
        el:"#app"
  })
</script>

二.创设属于自个儿系统的component

ZK框架的扩张性非常强。zk允许用户定义属于本身的组件,所以在本次消除难题的时候小编创立了和睦的机件cbxDiv。

我们供给做的有以下几点:

  1. 布局lang-addon.xml
    : 这是zk的安插文件,平时大家把所急需和煦的零部件音信都定义到那个布局文件,那样zk就能够自动识别。



    cul
    zul,ckez
    xul/html
    ….

    <component-name>cbxdiv</component-name>
    <component-class>com.core.cbx.ui.zk.cul.CbxDiv</component-class>
    <widget-class>cul.wgt.CbxDiv</widget-class>
    <extends>div</extends>
    


此间的component-class便是你组件class的具体地点,widget-class是投机定义的js文件的所在地点。extend当然正是父类。

贰.安排zk.wpd:那个是计划你组件的名字,以至于zk能够找到对应关系。

<?xml version="1.0" encoding="UTF-8"?>


<package name="cul.wgt" language="xul/html" depends="zul.wgt">
    <widget name="CbxDiv"/>
</package>

三.成立对应的component class

public class CbxDiv extends Div {

    static {
        addClientEvent(CbxDiv.class, Events.ON_SCROLL, CE_IMPORTANT);
        addClientEvent(CbxDiv.class, Events.ON_SCROLLING, CE_IMPORTANT);
    }

    public CbxDiv() {
        super();
    }

    /*
     * (non-Javadoc)
     * @see org.zkoss.zk.ui.AbstractComponent#service(org.zkoss.zk.ui.event.Event, org.zkoss.zk.ui.ext.Scope)
     */
    @Override
    public void service(final AuRequest request, final boolean everError) {
        final String cmd = request.getCommand();
        if (Events.ON_SCROLL.equals(cmd)) {
            final ScrollEvent evt = ScrollEventExt.getScrollEventExt(request);
            Events.postEvent(evt);
        } else if (Events.ON_SCROLLING.equals(cmd)) {
            final ScrollEvent evt = ScrollEvent.getScrollEvent(request);
            Events.postEvent(evt);
        } else {
            super.service(request, everError);
        }
    }
}

addClientEvent()这个方法是注册你自己想要的事件的。重写service是为了具体到的事件对应的处理类。并且数据的绑定。
注意:这个class创建的位置要跟lang-addon.xml配置的位置对应

4.创建自己的js

cul.wgt.CbxDiv = zk.$extends(zul.wgt.Div, {

    bind_: function() {
        this.$supers(cul.wgt.CbxDiv, 'bind_', arguments);
        this.domListen_(this.$n(), "onScroll", 'doScroll_');
    },

    unbind_: function() {
        this.domUnlisten_(this.$n(), "onScroll", 'doScroll_');
        this.$supers(cul.wgt.CbxDiv, 'unbind_', arguments);
    },

    doScroll_: function() {
        this.fire('onScroll',{'x':this.$n().scrollLeft,'y':this.$n().scrollTop},{toServer:true});
    }

});

一言九鼎的措施是对大家的component绑定一个事件,然后触发这一个事件的时候发送数据到后台。数据是以map的花样传递。

 

到这里差不离能够开始展览测试了。测试步骤便是开创三个cbxDiv,然后中间塞些东西。。在我们后台就足以动态的去加这几个监听

test1Div.addEventListener(Events.ON_SCROLL, new EventListener<ScrollEventExt>() {
  @Override
  public void onEvent(final ScrollEventExt event) throws Exception {
    system.out.print("scroll event have been fired!");
  }
}

 

 

3、Vue实例的生命周期

Vue实例有二个完整的生命周期,也正是从开端创立、开始化数据、编写翻译模板、挂载Dom、渲染→更新→渲染、卸载等一名目许多进度,大家称那是Vue的生命周期。通俗说正是Vue实例从创造到销毁的长河,正是生命周期。

图片 1

Vue实例生命周期.png

Vue提供的能够注册的钩都在上航海用体育场地片的革命框标注:

  • beforeCreate: 在实例开端化之后,数据观测(data observer) 和
    event/watcher 事件配置在此之前被调用。
  • created:
    实例已经创办完毕今后被调用。在这一步,实例已到位以下的安顿:数据观测(data
    observer),属性和办法的演算, watch/event
    事件回调。然则,挂载阶段还没初始,$el 属性最近不可知。
  • beforeMount: 在挂载初叶在此之前被调用:相关的 render 函数第一遍被调用。
  • mounted: el 被新创造的 vm.$el
    替换,并挂载到实例上去之后调用该钩子。假若 root
    实例挂载了三个文书档案内元素,当 mounted 被调用时 vm.$el 也在文书档案内。
  • beforeUpdate: 数据更新时调用,发生在虚拟 DOM
    重新渲染和打补丁从前。
    你能够在这么些钩子中国和越南社会主义共和国来越地退换状态,那不会触发附加的重渲染进程。
  • updated: 由于数量变动导致的虚拟 DOM
    重新渲染和打补丁,在那事后会调用该钩子。当以此钩子被调用时,组件 DOM
    已经更新,所以你以后能够推行正视于 DOM
    的操作。可是在大部场所下,你应该制止在此时期改造状态,因为那或然会招致立异Infiniti循环。
  • beforeDestroy: 实例销毁从前调用,在这一步,实例照旧完全可用。
  • destroyed: Vue 实例销毁后调用。调用后,Vue
    实例提醒的装有东西都会解绑定,全部的轩然大波监听器会被移除,全数的种子例也会被灭绝。

MVVM模式:

三. 片段组件

在父组件的 components 属性中定义。

四、Vue的全局API

  • Vue.nextTick
    在下一次 DOM
    更新循环甘休未来施行延迟回调。在修改数据之后即刻利用那几个措施,获取更新后的
    DOM。即确认保障操作的DOM已经渲染。

Vue.nextTick(function () {
    // DOM 更新完成,可以操作
})
  • Vue.set
    安装对象的属性。假诺指标是响应式的,确定保证属性被创立后也是响应式的,同时触发视图更新。这些艺术重要用于避开
    Vue 不可能检查评定属性被增添的限量。

  Vue.set( object, key, value )
  • Vue.use
    加载插件

// 导入VueRouter
import VueRouter from 'vue-router';
// 加载插件(全局注册一样)  
Vue.use(VueRouter);
  • Vue. mount
    1经 Vue 实例在实例化时未尝收到 el
    选项,则它地处“未挂载”状态,未有涉嫌的 DOM
    成分。能够动用Vue. mount 手动地挂载1个未挂载的实例。

  var MyComponent = Vue.extend({
      template: '<div>Hello!</div>'
  });

  // 创建并挂载到 #app (会替换 #app)
  new MyComponent().$mount('#app')
  // 同上
  new MyComponent({ el: '#app' })

  M:model 业务模型,用处:管理数据,提供数据

3.壹 定义组件对象

  • 零件对象名,采纳驼峰法命名
  • 组件对象的配置项与Vue实例的配备项相似,data 数据项除此之外(组件对象中,data是3个情势)

五、组件

组件 (Component) 是 Vue.js 最精锐的功效之一。组件可以扩大 HTML
元素,封装可采纳的代码。在较高层面上,组件是自定义成分,Vue.js
的编译器为它助长特殊成效。组件其实正是一个存有样式、动画、js逻辑、HTML结构的综合块。

  • 怎么分割组件

  - 功能模块: select、pagenation...
  - 页面区域划分: header、footer、sidebar...
  • 大局扩张方法Vue.extend
    Vue提供了1个大局的API,Vue.extend可以帮忙大家对Vue实例进行扩展,扩大完通晓后,就足以用此扩充对象成立新的Vue实例了。
    类似于继续的点子。

<script>
// 创建构造器
var Profile = Vue.extend({
    // 新的对象的模板,所有子实例都会拥有此模板
    template: '<p>{{firstName}}  {{lastName}}</p>',
     // 创建的Vue实例时,data可以是Object 也可以是Function,但是在扩展的时候,data必须是一个函数,而且要返回值
    data: function () {  
        return {            
          firstName: '张三',
          lastName: '张二蛋',
       }  
    }
  });

  // 创建 Profile 实例,并挂载到一个元素上
  new Profile().$mount('#mount-point')
  // 或者下面这种写法
  new Profile({
    el: '#mount-point'
  });
</script>
  • 创办一个零部件并注册使用
    Vue提供了二个全局注册组件的方法:Vue.component。
    利用 Vue.component 来定义全局组件,紧接着用 new Vue({ el:
    ‘#container ‘}) 在种种页面内钦定一个器皿元素

<div id="view">
    <!--组件直接跟普通的标签一样的使用-->
    <my-title></my-title>
</div>

// 注册一个组件
Vue.component('my-title', {
    // 模板选项设置当前组件,最终输出的html模板。注意:有且只有一个根元素。
    template: '<div>A custom component!</div>'
})

  // 创建根实例
  new Vue({
     el: '#view'
  })
  • 有个别注册组件
    无须在全局注册每一个组件,不常必要注册多个某些模块。

   <div class="view">
        // 组件在注册之后,便可以在父实例的模块中以自定义元素
       <my-components></my-components>
   </div>

<script>
    var Child = {
        template: '<div>A custom component!</div>'
    }

    //  创建一个Vue实例
    var app = new Vue({
        el: '.view',
        components: {  // 局部注册组件(如果没有局部注册是不能使用的)
            'my-components' : Child
        }
    });
</script>
  • data必须是函数
    通过 Vue 构造器传入的各类选项大繁多都得以在组件里用。data
    是3个不及,它必须是函数。

   <div class="view">
       <my-title></my-title>
   </div>

<script>
    // 注册一个全局组件
    Vue.component('my-title', {
        template: '<h1> {{title}} </h1>',
        data: function(){
            return {
                title: 'hello Vue!'
            }
        }
    });

    //  创建一个Vue实例
    var app = new Vue({
        el: '.view'
    });
</script>
  • 单文件组件的运用格局介绍 【项目开拓都会是3个文件对应三个零件】
    透过上面我们定义组件的点子,就早已觉获得很不适了,特别是模板的定义,而且样式怎么管理也未曾很好的拓展整治。
    Vue可以透过Webpack品级三方工具达成单文件的开采的措施。

  // Hello.vue组件
    <template>
        <h3>
            标题: {{str}}
        </h3>
    </template>

    <script>
        export default {
            data: function(){
                return {
                    str: 'hello Vue!'
                }
            }
        }
    </script>

    <style>
        h3{
            text-align: center;
        }
    </style>

<script>
  // App.vue组件中使用Hello.vue组件
  // 导入Hello组件
  import Hello from './components/Hello';
  export default {
    // ...
    components: {  // 局部注册组件
      Hello
    }
  }
</script>

<template>
   // 使用自定义元素(Hello组件)
  <hello></hello>
</template>

经过vue-cli脚手架结构项目

  • 组件间调用 — components
    假诺要运用某些组件,单纯通过import导入是特其余,还要求通过components开展挂号能力应用。

  // App.vue中

  // 导入组件
  import Header from './header'  
  import Footer from './footer'  

  new Vue({
    // 组件需要注册之后才能使用
    components:{
      Header, Footer
    }
  })

  // 在App.vue中
  <header></header>
  <footer></footer>
  • 零件间通讯 — props (父组件给子组件传参)
    零件实例的作用域是孤立的。那意味着不可能 (也不应该)
    在子组件的沙盘内直接引用父组件的数码。要让子组件使用父组件的数码,大家必要通过子组件的
    props 选项。

  // header.vue 子组件
  new Vue({
    props: ['message'],  // 不同组件中的数据操作()
    methods: {
      doThis: function(){  // 子组件获取到父组件传递的参数this.message
        console.log(this.message);
      }
    }
  })

  // props可以其他写法
props:{
    seller:{  // 即是设置接收参数的数据类型
      type: Object,  // 参数的类型
      // default 是设置默认值的
    }
 }

  // app.vue 父组件
  // 将字符串内容'hello world!'传递给子组件
  <header message='hello world!'></header>

  // 绑定data属性值
  // <header :message='title'></header> 
  • 组件间通讯 — 自定义事件(子组件给父组件传参)

  // app.vue 父组件

  // 自定义事件v-on: child-tell-me, 事件名为'child-tell-me'
  <component-b v-on:child-tell-me='getMsg'></component-b>

  new Vue({
    // ...
    methods: {
      // 'child-tell-me'对应触发的方法,即父组件获取子组件传递的参数msg
      getMsg: function(msg){  
        console.log(msg)
      }
    }
})

  // footer.vue 子组件
    new Vue({
    // ...
    methods: {
      // 在sendMsg方法中,即触发'child-tell-me'方法,并传递参数
      sendMsg: function(msg){  
        this.$emit('child-tell-me', '你收到我发送的消息了吗?【componentB】')
      }
    }
})

  V: view 用户分界面、用户分界面

三.二 定义组件模板

零件模板中,必有1个根成分,无法一贯写h一、p、span、a等剧情

六、Vue路由

对于前端来讲,其实浏览器同盟一级连接就很好的兑现了路由成效。可是对于单页面应用来讲,浏览器和极品连接的跳转格局已经不能够适用,
所以各大框架纷繁给出了单页面应用的缓和路由跳转的方案。
Vue框架的包容性相当好,能够很好的跟其他第一方的路由框架实行组合。当然官方也付出了路由的方案:vue-router;
提出依然用官方的最棒,使用量也是最大,绝对来讲Vue框架的升迁路由组件升级也会立时跟上,所以为了未来的保卫安全定和睦进步有利于依然选择Vue自家的事物最好。

  • vue-router的装置使用
    壹.CDN老是格局

    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    

    2.npm 安装

    npm install vue-router
    
  • vue-router 入门
    壹.引进vue和vue-router(若是同盟npm和webpack的话能够直接当做贰个模块导入就可以)

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    

    2.定义路由跳转的零件(或导入组件)

    const Foo = { template: '<div>foo</div>' }
    const Bar = { template: '<div>bar</div>' }
    
  • 定义路由规则对象

  // 每个路由path应该映射一个组件
    const routes = [
        {path: '/foo', component: Foo},
        {path: '/Bar', component: Bar}
    ];
  • 创办路由器对象

    // 创建 router 实例,然后传 `routes` 配置
    const router = new VueRouter({  
        routes   // (缩写)相当于 routes: routes,es6的新语法
    });
  • 创建和挂载根实例

    const app = new Vue({
        router
    }).$mount('#app');
  • 模板中编辑路由跳转链接

<div id="app">
      <p>
          <!-- 使用 router-link 组件来导航. -->
          <!-- 通过传入 `to` 属性指定链接. -->
          <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
          <router-link to="/foo">Go to Foo</router-link>
          <router-link to="/bar">Go to Bar</router-link>
      </p>
      <!-- 路由出口 -->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
</div>

小心: vue-router@2.x 只适用于 Vue 贰.x 版本。 vue-router@1.x
对应于Vue一.x版本。
用 Vue.js + vue-router 创制单页应用,是特别轻松的。使用 Vue.js
,我们早已足以透过结合组件来组成应用程序,当您要把 vue-router
加多进来,我们供给做的是,将零件(components)映射到路由(routes),然后告诉
vue-router 在何地渲染它们。

M->V V->M

三.三 注册组件

登记组件,组件在哪个地方使用,就注册到哪个地方

柒、录制学习

若果想要对Vue做更加的上学,能够查阅摄像课程,后续还会有vue进级的实战摄像喔!
vue入门基础

Vue.js 使用了依照 HTML 的模板语法,允许开采者表明式地将 DOM 绑定至底层
Vue 实例的数目。

3.4 使用组件

概念组件时用的驼峰法,使用时将驼峰法转变为帕斯卡命名

<div id="app">
    <!-- 4.使用组件 -->
    <my-header></my-header>
</div>
<!-- 2.定义组件模板 -->
<template id="my-header">
    <div>
        <h3>我是头部局部组件</h3>
        <p>{{name}}</p>
    </div>
</template>
<script type="text/javascript">
    //1.定义局部组件
    let MyHeader = {
        template:'#my-header',//组件的模板,#my-header指id为my-header的模板
        data(){
            return {
                name:"局部组件"//数据项
            }
        }
    }
    let app = new Vue({
        el:"#app",
        //3.注册组件
        components:{
            MyHeader//将MyHeader 这个组件注册到app根组件中
        }
  })
</script>

图片 2

Vue.js 的核心是三个允许你使用轻便的沙盘语法来注解式的将数据渲染进 DOM
的系统。

四. template 语法规则

零件对象的template属性用来安装组件的模板内容,模板内容有3种写法:

  • 直接写在字符串中

    <my-header></my-header>
    

  • 将模板内容写在template标签中(例子)

  • 将模板内容写在script标签中

    <my-header></my-header>
    


整合响应系统,在采用状态改动时, Vue
能够智能地计算出重新渲染组件的细小代价并应用到 DOM 操作上。

伍. 组件间的互相通讯

零件实例是孤立的,不可在子组件中一贯用父组件中的数据(组件性格:高内聚、低耦合)

父组件通过 props 向下传递数据,子组件通过 emit
向上发射事件传递数据图片 3

 使用Vue.js步驟:1、引进Vue.js
二、创造五个Vue对象,在那之中el代表Vue管理对象的尽头。data是二个指标,用于存放展现在页面上的数额。

5.1 父传子

  • 先在父组件中定义数据

  • 在父组件的模版中,通过质量绑定把数量绑定在子组件上,语法:子组件
    :变量名=”数据项”

  • 在子组件中定义props属性,用来选用父组件传递的数量

  • 在子组件模板中采纳数据

  • 在子组件的函数中应用数据

    {{number}}
    <!-- 2. 把数据绑定在子组件上 -->
    <my-collapse :num="number"></my-collapse>
    

图片 4

  • props细节:每种数据项,都可有二性子情举行封锁

    • type:类型约束,约束父组件给子组件传递的数据类型。类型包罗:Object、Array、Number、String、Boolean
    • default:钦赐默许值,若父组件未传递数据,可钦命暗许值
    • required:钦赐该数据项是还是不是必须传递
<!DOCTYPE html>
<html>
  <head>
    <title>test01.html</title>
    <script type="text/javascript" src="vue.min.js"></script>
  </head>

  <body>
    <div id="app">
          <p>{{ message }}</p>
    </div>
    <script>
        var appT=new Vue({
              el: '#app',
              data: {
            message: 'Hello Vue.js123!'
          }
        })
    </script>
 </body>
</html>

5.2 子传父

  • 在子组件中丰盛事件监听,通过$emit从子组件向父组件发射二个轩然大波
  • 在父组件中接收子组件发射过来的事件,格式:<子组件
    @子组件事件名=”父组件要奉行的诀要”>
  • 在父组件中定义方法接收子组件传递的轩然大波及数据

注:子组件上的风云名@addmsg不能够动用驼峰法

<div id="app">
    <p>{{content}}</p>
    <!-- 3. 在父组件中接收子组件发射过来的事件 -->
    <my-collapse @addmsg="receive"></my-collapse>
</div>
<template id="my-collapse">
    <div>
        <input v-model="msg" type="" name="">
        <!-- 2. 在子组件中添加事件监听 -->
        <button @click="sendMsg">按钮</button>
    </div>    
</template>
<script type="text/javascript">
    let MyCollapse = {
        template:'#my-collapse',
        data(){
            return {
                msg:''
            }
        },
        methods:{
            //1.从子组件向父组件发射事件,参数1:事件名;参数2:传递的数据
            sendMsg(){
                this.$emit("addmsg",this.msg)
            }
        }
    }
    let app = new Vue({
        el:"#app",
        data:{
            content:''
        },
        components:{
            MyCollapse
        },
        methods:{
            //4. 在父组件中定义方法接收子组件传递的事件及数据,参数是子组件传递的数据
            receive(d){
                return this.content=d
            }
        }
  })
</script>

数量绑定最广大的样式正是应用 {{…}}(双大括号)的文本插值。

6. 插槽 slot

插槽,即3个占位符,能在差异情形下,传递区别的参数,并获得分裂的功力,在Vue中通过slot标签达成

思路:先在子组件中定义一个占位符(插槽),再利用真实的开始和结果替换那些插槽

要是后台改动message时,相应的页面也会随着变动。使用appT.message=“XXX”改换。每一种Vue 实例都会代理其 data 对象里有所的品质

陆.一 单个插槽

当子组件模板唯有贰个无属性的插槽时,父组件传入的百分百内容片段将插入到插槽所在的DOM地方,并替换掉插槽自身

    <div id="app">
        <son>
            <h3>只是标题</h3>
            <p>这是段落</p>
        </son>
    </div>
    <template id="son">
        <div>
            <slot></slot>
        </div>
    </template>
    <script type="text/javascript">
        let Son = {
            template:'#son'
        }
        let app = new Vue({
            el:'#app',
            components:{
                Son
            }
        })        
    </script>

图片 5

Vue指令,其实正是vue当中以v-发轫的自定义属性。

6.2 具名插槽

若有多少个插槽(占位符),通过name属性加以区分,这种插槽正是签订契约插槽(可更加灵敏的管制组件的内容)

  • 先定义插槽(占位符),将要内容不鲜明的地点选用插槽占个岗位
  • 再使用插槽,即利用真实内容替换占位符

      

        <son>
            <h3 slot="title">这是标题</h3>
            <p slot="content">这是段落</p>
        </son>
    </div>
    <template id="son">
        <div>
            <slot name="title"></slot>
            <slot name="content"></slot>
        </div>
    </template>
    

一、使用 v-html 指令用于出口 html 代码:

7. 深切通晓 Vue 实例

通过 new Vue() 得到三个对象,即 Vue实例,Vue实例提供如下属性、方法:

图片 6图片 7

7.一 Vue实例属性

  • $el,获取挂着 Vue 实例的要素
  • $data,获取 Vue 实例的多少项

图片 8

  • $refs,获取对DOM成分的引用

Vue 侧重于数据驱动,而jQuery侧重于dom,Vue提供了 $refs
属性对dom成分进行灵活的操作,具体使用:

    • 在要素上增加三个性情ref:<标签 ref=“keyword”
    • 在Vue实例中,通过this.$refs获取具备的dom引用
        <a href="" ref="oa">超链接</a>
        <button @click="setStyle">点击切换</button>
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el:"#app",
            methods:{
                setStyle(){
                    //找到DOM节点
                    console.log(this.$refs)
                    console.log(this.$refs.oa)
                    this.$refs.oa.style.textDecoration='none'
                    this.$refs.oa.style.color='red'
                }
            }
        })        
    </script>
    

图片 9

 <body>
    <div id="app" v-html="message"></div>
    <script>
        new Vue({
              el: '#app',
              data: {
            message: '<h1>使用V-html</h1>'
          }
        })
    </script>
 </body>

柒.二 Vue实例方法

  • $mount,手动设置挂载点

      

        {{name}}
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el:"#app",
            data:{
                name:"David"
            }
        })    
        app.$mount('#app')
    </script>
    
  • $watch,侦听器,监听数据项、总结属性值的更换,一旦值变化,则自动调用$watch方法

将有着的异步操作,都写在watch里面实行落到实处

  <div id="app">
        出生年月:
        <input v-model="birthday" type="" name=""><br>
        年龄:<p>{{age}}</p>
    </div>
    <script type="text/javascript">
        let app = new Vue({
            el:'#app',
            data:{
                birthday:'',
                age:0
            },
            watch:{
                birthday(){
                    setTimeout(()=>{
                        this.age = new Date().getFullYear()-new Date(this.birthday).getFullYear();
                    },3000)
                }
            }
        })        
    </script>

V-HTML

八. Vue 实例的生命周期

实例化的Vue对象(根组件)以及自定义的零件对象都有生命周期,Vue 设计者为便宜调节和测试程序,提供了九个钩函数:

    <div id="app">
      {{name}}    
    </div>
    <script type="text/javascript">
        let app = new Vue({
            data:{
                name:'David'
            },
            beforeCreate(){
                alert('beforeCreate')
            },
            created(){
                alert('created')
            },
            beforeMount(){
                alert('beforeMount')
            },
            mounted(){
                alert('mounted')
            },
            beforeUpdate(){
                alert('beforeUpdate')
            },
            updated(){
                alert('updated')
            },
            beforeDestory(){
                alert('beforeDestory')
            },
            destroyed(){
                alert('destroyed')
            }
        })    
        app.$mount('#app')
        app.$destroy('name')    
    </script>

生命周期函数功效:在分裂的阶段,做相应的行事

  • created阶段,初始化数据,创立数量对象
  • mounted阶段,使用数据项替换模板,就要数据挂载到DOM元初秋点上
  • updated阶段,当DOM节点中的数据爆发改造,在此阶段实行更新

二、HTML 属性中的值应使用 v-bind 指令

玖. 动态组件

可定义四个零部件,再利用 :is 属性动态地在七个零件之间切换

语法:<component v-bind:is=”组件名”></component>

Component 相当于二个占位符,具体显示哪个组件,通过:is钦命

    <div id="app">
        第一个
        第二个
        <component :is="currentCom"></component>
    </div>
    <template id="com1">
        <div>第一个组件</div>
    </template>
    <template id="com2">
        <div>第二个组件</div>
    </template>
    <script type="text/javascript">
        let FirstCom={
            template:'#com1',
            mounted(){
                console.log("第一个被渲染")
            }
        }
        let SecondCom={
            template:'#com2',
             mounted(){
                console.log("第二个被渲染")
            }
        }
        let app = new Vue({
            el:"#app",
            data:{
                currentCom:''
            },
            components:{
                FirstCom,
                SecondCom
            }
        })
    </script>

图片 10

  • keep-alive 组件

无 keep-alive 组件时,每便切换组件都再次创造贰次组件,使用
keep-alive后,会将开创过的组件保存在内部存款和储蓄器中,未来接纳时一向利用,而不会每一次重复创造

    <div id="app">
        第一个
        第二个
        <keep-alive>
            <component :is="currentCom"></component>
        </keep-alive> 
    </div>
    <template id="com1">
        <div>第一个组件</div>
    </template>
    <template id="com2">
        <div>第二个组件</div>
    </template>
    <script type="text/javascript">
        let FirstCom={
            template:'#com1',
            mounted(){
                console.log("第一个被渲染")
            }
        }
        let SecondCom={
            template:'#com2',
             mounted(){
                console.log("第二个被渲染")
            }
        }
        let app = new Vue({
            el:"#app",
            data:{
                currentCom:''
            },
            components:{
                FirstCom,
                SecondCom
            }
        })
    </script>

图片 11

图片 12图片 13

<body>
    <div>
          <a  id="app" v-bind:href="url">{{text}}</a>
    </div>
    <script>
        new Vue({
              el: '#app',
              data: {
            url:'http://www.baidu.com',
            text:'点击'
          }
        })
    </script>
 </body>

v-bind:HTNL属性

 

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

3、v-if 指令将依照表达式 seen 的值(true 或 false )来决定是不是插入 p
成分。指令用于在表达式的值更动时,将有些行为选择到 DOM 上。

图片 14图片 15

 <body>
    <div>
          <P id="app" v-if="seen">你看见我了!</P>
    </div>
    <script>
        var appT=new Vue({
              el: '#app',
              data: {
            seen:true
          }
        })
    </script>
 </body>

v-if

该因素模块不设有了图片 16

 

四、v-show指令用来决定是还是不是出示成分

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图