• vue.js 知识点(四)


    看完了vue.js的官方文档,大概对这些知识有了那么一点的了解了,但是很多具体的运用还不太清楚,现在就总结一下,关于其中的一些知识点的运用:

    v-bind:  动态绑定指令,默认情况下,是给html 标签自带的属性绑定数据,比如input的value属性,a标签href属性等等。

        v-bind:value 可以简写为  :value

    v-model: 主要用于表单控件,比如input ,textarea 标签,主要用于双向数据绑定!

        双向绑定:data数据的参数,为msg,  假如msg变化,则input输入框中会变化;若是input输入框中的改变,msg也会变化!

    v-on :   监听事件,v-on:click 点击事件, v-on:blur  失去焦点   v-on:focus  得到焦点;

        可以简写为 @click    @blur   @focus  

    style样式: 在标签内添加属性

        <div v-bind:class="{basicStyle:basic}">hello world</div>

        第一个参数basicStyle,是标签的class属性,

        第二个参数basic,是判断是否显示出这个样式的数据;

    @click 和 @click.native  的区别:

        普通标签的点击事件,用@click 就可以,比如点击出现,点击消失,

        对于引用的组件上点击事件的时候,必须使用@click.native  才能触发点击事件;

    对于vue.js 也是可以进行css创建动画,不仅仅只有v-show

        

        <transition>这个过渡组件,包括3对状态,分别是:

        进入:

        v-enter:开始状态。

        v-enter-active:过渡中。(active就是激活、正在的意思)

        v-enter-to:结束状态。(to就是到达、结束的意思)

        离开:

        v-leave:开始状态。

        v-leave-active:过渡中。

        v-leave-to:结束状态。

      例如想使用fade属性,则就是fade-enter,fade-enter-active,fade-enter-to

      同理其他的也是一样的!

    怎么通过input来进行数据的更新改变呢?

       在react中,是统一通过setState()统一更新数据,其他地方才能拿到更新过的数据!

      但是在vue.js 中,我可以在点击事件中,通过监听事件的函数,直接更改数据

      例如:

      clickhandle:function(event){

         this.message = event.target.value;

      }

      message就是  数据,直接将this,message 修改为输入的内容。

      这样在其他地方拿到的数据,就是更新过的数据!

  • 相关阅读:
    什么是枚举?有什么作用?有什么好处?
    java获取某个范围内的一个随机数
    java中普通代码块,构造代码块,静态代码块的区别及代码示例
    Oracle数据库迁移
    linux下修改文件权限
    <%@ include file="">和<jsp:include file="">区别
    JAVA常见异常解析
    jdk环境变量配置
    jstl中fmt标签详解
    jsp脚本元素
  • 原文地址:https://www.cnblogs.com/liumcb/p/7773573.html
Copyright © 2020-2023  润新知