Vue学习第一天

vue的基本代码:

    var vm = new Vue({

      el: '#app',  //选择器,用来控制vue操作的范围,一般就是全局的,就是根节点

      data: { 

//Vue中不建议操作dom,所有要用到的数据都放在data对象中,要用的时候就直接拿到页面中去用,可以用

{{值的属性名}},

v-cloak="值的属性名"

v-text="值的属性名"

v-show="值的属性名"

      },

methods:{

//所有的事件控制函数都写在这个对象中,处理数据的逻辑,如果要用到页面引用的数据,就用this.值的属性名,就可以获取

//Vue中,只要data中的值发生了改变就会自动进行页面刷新

}

)}



vue指令集:

v-cloak:防止闪烁,

v-text:获取文本内容

v-html:会解析HTML标签

v-model:实现数据的双向绑定

v-bind:实现属性的绑定

v-on:实现事件机制

<input type="button" value="提交" v-on:click="事件处理函数名"> 

v-for:实现数组或者对象的遍历

<p v-for="(item, i) in list">索引值:{{i}} --- 每一项:{{item}}</p>

v-if:进行判断,决定显示还是隐藏,判断后决定是否删除该节点

<h3 v-if="flag">这是用v-if控制的元素</h3>

v-show:进行判断,决定显示还是隐藏,判断后决定是否在样式中加dispaly:none

    <h3 v-show="flag">这是用v-show控制的元素</h3>


事件修饰符:

.stop 阻止冒泡

.prevent 阻止默认行为

.capture 实现捕获触发事件的机制

.once 只触发一次事件处理函数 

.self 实现只有点击当前元素时候,才会触发事件处理函数,他只会处理自己身上的冒泡,并不会阻止真正的冒泡

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

推荐阅读更多精彩内容

  • VUE 下载和安装vue官网npm下载vue模块:npm install vue下载完后使用里面的vue.js文件...
    果木山阅读 1,639评论 0 0
  • vue概述 在官方文档中,有一句话对Vue的定位说的很明确:Vue.js 的核心是一个允许采用简洁的模板语法来声明...
    li4065阅读 12,071评论 0 25
  • 这篇文章是借鉴的主要是练习Markdown编辑 一 : vue简介 1. 什么是vue vue一词是法语,同英语中...
    shikern阅读 1,832评论 0 0
  • 三个指令 v-cloak 使用v-cloak能解决插值表达式闪烁的问题,也就是在网络不好的时候并没有完全加载该界面...
    coderymy阅读 803评论 0 0
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,472评论 0 29

友情链接更多精彩内容