vue:

vue:一个mvvm框架(库),和angular类似
比较容易上手
指令以v=xxx
一片html代码配合接送,在new一个vue实例

适合:移动端,小巧

vue基本雏形
v-model 一般表单元素(input) 双向数据绑定

循环 v-for="name in arr"
{{$index}} 数组编号

v-for="name in arr"
{{$index}} 数组编号 {{$key}}

v-for="(k,v) in json"

事件:
v-on:click="函数"

v-on:click/mouseout/mouseover/dblclick/mousedown.....

显示隐藏:v-show="true/false"

简写:@click=""
事件对象:
@click="show($event)"
事件冒泡:
阻止冒泡: ev.cancelBubble=true;
@click.stop="" 推荐
默认事件:
阻止默认事件:
ev.preventDefault();
@contextmenu.prevent 推荐
键盘类事件:
@keydown $event.keyCode
@keyup

常用键简写:@keyup.13 = "show()" 回车
@keyup.enter
上下左右
案例,简易留言板(todolist)

属性:
v-bind:src=url"" 简写: :src=url"":

class和style:
:class=""
:style=""

:class="[red]" red是数据
:class="[red,b,c,d]"

:class="{red:a,blue:false}"
:class="json"
data:{
json:{red:a,blue:false}
}
注意:复合样式,采用驼峰命名法

模板:
{{msg}} 数据更新模板更新 {{*msg}}数据值绑定一次
{{{msg}}} 转义标签
过滤器: 过滤模板的数据
{{msg|filterA}} uppercase(大写) lowercase(小写) capitalize (首字母大写)
currency (钱) {{12|currency $}}

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

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

     <script>

         window.onload=function(){

             var c = new Vue({

                 el:"#box",

                 data: {

                     a:true

                 },

                 methods:{

                 }

             });

         }

     </script>

 </head>

 <body>

       <div id="box">

           <input type="button" value="按钮" v-on:click="a=false">

       <br>

           <div style="background: red ;width: 100px;height: 100px" v-show="a"></div>

       </div>

 </body>

 </html>

交互:
如果vue想做交互 必须引入包
get:
获取;this.$http.get(a.txt).then(function(res){
alert(res.date);
),function(res){
alert(res.status);
});
给服务器发送数据:

post:

jsonp:

对vue的初步学习的更多相关文章

  1. vue.js 初步学习

    跟着b站上的视频来学 首先什么是vue.js? 跟着b站上视频来学:(oﾟvﾟ)ノ <!DOCTYPE html> <html lang="en"> < ...

  2. json2.js的初步学习与了解

    json2.js的初步学习与了解,想要学习json的朋友可以参考下. json2.js的初步学习与了解 1.)该js的下载地址是:http://www.json.org/json2.js 2.)在页面 ...

  3. 老周的ABP框架系列教程 -》　一、框架理论初步学习

    老周的ABP框架系列教程 -- 一.框架理论初步学习   1. ABP框架的来源与作用简介 1.1  简介 1.1.1       ABP框架全称为"ASP.NET Boilerplate ...

  4. 初步学习nodejs，业余用node写个一个自动创建目录和文件的小脚本，希望对需要的人有所帮助

    初步学习nodejs,业余用node写个一个自动创建目录和文件的小脚本,希望对需要的人有所帮助,如果有bug或者更好的优化方案,也请批评与指正,谢谢,代码如下: var fs = require('f ...

  5. EF Codefirst 初步学习（二）—— 程序管理命令 更新数据库

    前提:搭建成功codefirst相关代码,参见EF Codefirst  初步学习(一)--设置codefirst开发模式 具体需要注意点如下: 1.确保实体类库程序生成成功 2.确保实体表类库不缺少 ...

  6. vue 和 react 学习 异同点

    vue 和 react 学习 异同点 本文不做两个框架比较,只对比了两个框架的语法对比,不代表任何观点,盗版必究,本人唯一qq:421217189 欢迎大家一起来学习探讨,壮我大前端(本文markdo ...

  7. 初步学习python

    自计算机诞生以来,也伴随着计算机语言的诞生,现在,全世界的编程语言有600多种,但流行的编程语言也就20多种. Java和C一直占据着前两名.但是近年来伴随着人工智能的发展,Python发展迅猛,以其 ...

  8. Git的初步学习

    前言 感谢! 承蒙关照~ Git的初步学习 为什么要用Git和Github呢?它们的出现是为了用于提交项目和存储项目的,是一种很方便的项目管理软件和网址地址. 接下来看看,一家公司的基本流程图: 集中 ...

  9. Vue 超快速学习

    Vue 超快速学习 基础知识: 1.vue的生命周期: beforeCreate/created. beforeMount/mounted. beforeUpdate/updated. beforeD ...

随机推荐

  1. 手把手教你在win10下搭建pytorch GPU环境（Anaconda+Pycharm）

    Anaconda指的是一个开源的Python发行版本,其主要优点如下: Anaconda默认安装了常见的科学计算包,用它搭建起Python环境后不用再费时费力安装这些包: Anaconda可以创建互相 ...

  2. Istio Routing 实践掌握virtualservice/gateway/destinationrule/AB版本发布/金丝雀发布

    原文 在学习像 Istio 这样的新技术时,看一下示例应用程序总是一个好主意. Istio repo 有一些示例应用程序,但它们似乎有各种不足. 文档中的 BookInfo 是一个很好的示例. 但是, ...

  3. idea工程在maven projects中显示灰色的解决办法

    原文链接:https://blog.csdn.net/qq_30507287/article/details/83515461 在Mac上使用idea进行开发的过程中,一般在MavenProject中 ...

  4. SpringCloude简记_part3

    18. SpringCloud Alibaba Sentinel实现熔断与限流 18.1 Sentiel 官网 https://github.com/alibaba/Sentinel 中文 https ...

  5. 为什么LinkedList不建议使用for循环遍历，而使用iterator方式进行遍历，但ArrayList建议使用for循环进行遍历呢？

    如果使用for循环方式遍历链表,由于链表中元素是通过指针连接彼此的,不存在索引的概念,如果使用for循环方式遍历LinkedList,依次传入索引值,则就相当于每次都要将链表撸一遍. 如:在下面的这个 ...

  6. html+css知识点以及常见的坑

    float 与 绝对定位 共同点:都脱离文档流,不占用原来的位置,后面的内容占有位置 不同点: float后者居上,补齐,且只能在父级盒子内活动,且不能浮动在照片上. 绝对定位脱离文档流后,直接漂浮到 ...

  7. Datanode 怎么与 Namenode 通信？

    在分析DataNode时, 因为DataNode上保存的是数据块, 因此DataNode主要是对数据块进行操作. A. DataNode的主要工作流程 客户端和DataNode的通信: 客户端向Dat ...

  8. CKA认证经验贴（认证日期：20200817）

    一.背景 由于年初疫情影响,身处传统IT行业且兼职出差全国各地“救火”的我有幸被领导选中调研私有云平台,这就给我后来的认证之路做下了铺垫.之前调研kubernetes的v1.17版本自带kubeadm ...

  9. 高可用集群之corosync+pacemaker

    1.概念 在传统Linux集群种类,主要分了三类,一类是LB集群,这类集群主要作用是对用户的流量做负载均衡,让其后端每个server都能均衡的处理一部分请求:这类集群有一个特点就是前端调度器通常是单点 ...

  10. 用Python发一封图文并茂的邮件

    最近使用了不少通讯工具的接口, 比如企业微信机器人,钉钉,微信公众号的接口(未认证的订阅公众号),相对于邮件来说,它们的表现形式太弱.比如没有更丰富的版本方式.当然了,并不是说表现形式越棒就是约好的通 ...