2018-09-10

今天我学习了vue.js这是我第一次接触vue这个东西,今天学了半天感觉不算难,下面谈谈自己的一点心得。

Vue.js是一套构建用户界面的渐进式框架,创始人是华人尤雨溪。

创建vue.js

<div class="dc">

{{msg}}  调用vue msg

<div>

<script src="vue.js"></script>  引入vue

<script>

new Vue{(

       el:".dc",   选择器 el的意思就是element

       data:{

           msg:"hellow world"

   }

)}


循环数组对象

v-for 循环可以遍历值和下标

v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:

v-for=“(value,index) in 对象名”


双向数据

v-model=“”



v-on指令用于给监听DOM事件,它的用语法和v-bind是类似的,例如监听元素的点击事件:

语法:V-on:click=“事件回调函数的名称”

定义事件的回调函数,在vue的实例化对象的methods属性中定义

Methods他的值是一个对象

对象是属性名称表示事件的回调函数名称

对象的属性值是一个函数,就是事件的回调函数

他的this指向的是vue实例化对象,因此通过它我们可以获取或者设置vue实例化对象上属性

它默认有个参数是事件对象,这个事件对象可以访问该事件的相关信息$event传递参数可以访问到事件对象

当我们在使用事件时候,可以传递一些参数,此时在vue的事件回调函数中它的参数与事件使用时候传入的参数是一致的


下面是一个点击事件

绑定事件 v-on:事件名=“函数(方法)”

简写@:事件名="函数(方法)"

<button v-on:click="alt"></button>{

                  alert(vm.msg)   vm变量




最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 2018-09-10 对于Vue的初次了解呢,也许很惶恐,也许很高大上,但是在学习中,我希望把枯燥的Vue...
    QAQ小明阅读 221评论 0 0
  • 小谷子课堂笔记之Vue. 国内CDN服务网址:https://www.bootcdn.cn/ Vue.js官网:h...
    我飞故我在_7d6c阅读 182评论 0 1
  • https://www.hcharts.cn/ 插件网址不会用。。。看不懂 在网上找到了 一个好心人这是他自己整...
    土豆丝炒洋芋丝阅读 435评论 0 1
  • 七夕节对于携手走过七年之痒的老夫老妻来讲,犹如鸡肋,过之浪费,不过又觉得可惜。于是我想在这个七夕送老公一份有新意的...
    余独不觉乐妈阅读 725评论 3 4

友情链接更多精彩内容