看完了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 修改为输入的内容。

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

vue.js 知识点(四)的更多相关文章

  1. 从零开始学 Web 之 Vue.js(四)Vue的Ajax请求和跨域

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

  2. vue.js 第四课

    (1).插值:在view层上显示model的资料. (2).绑定表达式:在view层上 执行js命令. (3).指令:在view层上 执行写好的功能. (4).缩写:v-bind 绑定 特性 v-on ...

  3. Vue.js随笔四(方法的声明和使用)

    1.首先你需要新建路由,这个就不多说了 2.然后在你的新的.vue里面需要如下所示的添加methods:{方法},然后按钮的里面你会看到v-on:click,这就是点击这个按钮会触发的动作,这个就是触 ...

  4. Vue.js知识点总结

    1. Vue.js简介 1.1 Vue.js简介 1.2 创建一个vue实例 2. Vue.js基础 2.1 模板语法 2.2 环境搭建 2.3 生命周期钩子

  5. vue.js 知识点(二)

    关于vue看到有很多的知识点和react有很多相近的地方,比如说路由还有一些简单的运用,但是又有一些不同,比如格式.还有写法的一些不同! 所以在这里我总结一下关于vue 关于路由的一些运用: 路由: ...

  6. vue.js(四)

    由于组件内容太多又特别关键,我决定在官网教程的基础上,加上自己的理解,针对每个内容详细记录一下  1.注册组件 ①全局注册 //首先创建组件 Vue.component('blog-post', { ...

  7. vue.js 知识点(三)

    ---恢复内容开始--- vue和react相同,都是单项数据流,也就是只能从父组件流向子组件,但是因为根据引用的不同,子组件也是可以经过函数处理流向父组件的!这点跟react十分相似,但是也有不同: ...

  8. Vue.js中前端知识点总结笔记

    1.框架和库的区别: 框架:framework 有着自己的语法特点.都有对应的各个模块库 library 专注于一点 框架的好处: 1.提到代码的质量,开发速度 2.提高代码的复用率 3.降低模块之间 ...

  9. Web前端-Vue.js必备框架(四)

    Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...

随机推荐

  1. cocos2d-js反射

    如何在android平台上使用js直接调用Java方法 在cocos2d-js 3.0beta中加入了一个新特性,在android平台上我们可以通过反射直接在js中调用java的静态方法.它的使用方法 ...

  2. iOS 10 适配 ATS(app支持https通过App Store审核)

    iOS 10 适配 ATS 一. HTTPS 其实HTTPS从最终的数据解析的角度,与HTTP没有任何的区别,HTTPS就是将HTTP协议数据包放到SSL/TSL层加密后,在TCP/IP层组成IP数据 ...

  3. Linux系统中当前路径不加入PATH的原因

    主要是出于安全的考虑,由于系统默认是允许所有人在/tmp下写入任何文件的,万一有居心不良的用户或者黑客入侵到计算机,并在/tmp下面埋下木马,名字为ls,当用户用root身份登录后,到/tmp目录执行 ...

  4. p2598 [ZJOI2009]狼和羊的故事

    传送门 分析 起点向狼连边,羊向终点连边,边权均为inf 每个点向它四联通的点连边权萎1的边 跑最小割即可 代码 #include<iostream> #include<cstdio ...

  5. ubuntu如何安装samba

    1.samba安装sudo apt-get install samba2.修改smb.confsudo gedit /etc/samba/smb.conf 文件最后增加如下代码:[share] pat ...

  6. pcl文档库

    http://docs.pointclouds.org/trunk/structpcl_1_1_polygon_mesh.html

  7. $.ajax()函数

    一般在前端html和服务器交互,又要异步提交表单时,我们通常会用到$.ajax(){}函数,这是封装到ajax里的一个函数,相比于XMLHTTPRequest做页面局部刷新更方便,但最终还是使用的XM ...

  8. Anaconda 安装和配置

    Anaconda 安装和配置 1. Anaconda 安装 Anaconda说明及安装过程:Anaconda详细安装使用教程 2. Anaconda和Pip源修改 Anaconda源修改:打开Anac ...

  9. combotree 满足条件的节点不可选中

    combotree: $("#Parent").treegrid("unselect");

  10. hdu 4946 Area of Mushroom (凸包,去重点,水平排序,留共线点)

    题意: 在二维平面上,给定n个人 每个人的坐标和移动速度v 若对于某个点,只有 x 能最先到达(即没有人能比x先到这个点或者同时到这个点) 则这个点称作被x占有,若有人能占有无穷大的面积 则输出1 , ...