学习资料 来自台湾小凡!

vue.js是javascript的一个库,只专注于UI层面,核心价值永远是 API的简洁。
第一课:
不支持IE8.
1、声明式渲染:
el元素的简称 element ; el:元素名字
data放数据;

2、双向绑定:
用到一个指令 v-model ; 指定到一个数据上,这个数据与页面显示就双向绑定了。

这里写错了 ,不能加等号!!!
 

这样P标签 就可以随这个input的改变而改变。
3、列表渲染
v-for 循环数据 读取数据 渲染到标签;
v-for=" xxx in dataXXX" {{}}
注意数据的写法data:{里面是数据的命名空间:[里面是json数据 一条一条]}

4、处理函数:
new Vue({
el:"#box",
data:{
msg:'111',
},
methods:{
fnName:funxtion(){
alert(1);
}
}
})

5、综合案例

1、外面是 vue的作用范围 盒子。
newTodo是 data中的一个子的数据模型,todos是另一个数据模型。
input绑定到newTodo上;keyup.enter按enter世间触发 addtodo方法;
定义一个变量接受当前的input值:this.newTodo;
this.todo.push({text:当前值});
2、$index当前事件的下标。
 
总结:data就是建好数据,methods调用数据。html里用v-指令
 

vue.js学习(第一课)的更多相关文章

  1. Vue语法学习第一课——插值

    学习关于Vue的插值语法 ① 文本值 : "Mustache"语法,即双大括号 <span>Message:{{msg}}</span> 注:双大括号中的m ...

  2. vue.js学习第一节

    <div id="app" class="app"> <p>{{ message }}</p> <p>{{ in ...

  3. vue.js学习第一天,了解vue.js

    vue.js是一个前端框架,他与jquery不同,jquery是一个js库,而vue.js是js的前端框架. vue.js对我们前端页面入侵比较大,而jquery则不然.那我们还为什么要使用vue.j ...

  4. Vue.js入门第一课

    这个好像比ANGULAR.JS要轻量一些,看看. <!DOCTYPE html> <html> <head> <meta charset="utf- ...

  5. JS学习第一课

    1.js 按照编写顺序执行 2.输出使用document.write. 3.申明数组 var array = [1,2,3,5] ;  var arrStr = ["sgsg",& ...

  6. Magento学习第一课——目录结构介绍

    Magento学习第一课--目录结构介绍 一.Magento为何强大 Magento是在Zend框架基础上建立起来的,这点保证了代码的安全性及稳定性.选择Zend的原因有很多,但是最基本的是因为zen ...

  7. Vue.js开始第一个项目

    前端架构之路:使用Vue.js开始第一个项目   Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 使用 ...

  8. Vue.js学习笔记(2)vue-router

    vue中vue-router的使用:

  9. vue.js 学习笔记3——TypeScript

    目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...

  10. vue.js学习资料

    vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...

随机推荐

  1. C++进程间通信

    # C++进程间通信 # 进程间通讯的四种方式:剪贴板.匿名管道.命名管道和邮槽 ## 剪切板 ## //设置剪切板内容 CString str; this->GetDlgItemText(ID ...

  2. 简述9种社交概念 SNS究竟用来干嘛?

    1.QQ 必备型交流工具基本上每一个网民最少有一个QQ,QQ已经成为网民的标配,网络生活中已经离不开QQ了.虽然大家嘴上一直在骂 QQ这个不好,那个不对,但是很少有人能彻底离开QQ.QQ属于IM软件, ...

  3. C++_系列自学课程_第_12_课_结构体

    #include <iostream> #include <string> using namespace std; struct CDAccount { double bal ...

  4. org.apache.log4j.Logger详解

    org.apache.log4j.Logger 详解 1. 概述 1.1. 背景 在应用程序中添加日志记录总的来说基于三个目的 :监视代码中变量的变化情况,周期性的记录到文件中供其他应用进行统计分析工 ...

  5. Java微信公众平台接口封装源码分享

    前言:      这篇博客是在三月初动手项目的时候准备写的,但是为了完成项目只好拖延时间写这篇博客,顺便也可以在项目中应用我自己总结的的一些经验.今天看来,这些方法的应用还是可以的,至少实现了我之前的 ...

  6. HttpClient调用webApi时注意的小问题

    HttpClient client = new HttpClient(); client.BaseAddress = new Uri(thisUrl); client.GetAsync("a ...

  7. 共享Excel编辑的一些资源

    官方资料: 使用共享工作簿进行协作 相关介绍文章: http://www.ittribalwo.com/article/678.html http://www.wuji8.com/meta/85646 ...

  8. 【IOS开发笔记03-视图相关】简单计算器的实现

    UIView 经过前几天的快速学习,我们初步了解的IOS开发的一些知识,中间因为拉的太急,忽略了很多基础知识点,这些知识点单独拿出来学习太过枯燥,我们在今后的项目中再逐步补齐,今天我们来学习APP视图 ...

  9. 3.2 js六大数据类型

    js中有六种数据类型,包括五种基本数据类型(Number,String,Boolean,Null,Undefined),和一种混合数据类型(Object). 前面说到js中变量是松散类型的,因此有时候 ...

  10. IOS之Objective-C学习 代理设计模式

    鉴于Objective-C是不支持多继承的,所以需要用协议来代替实现其他类的方法,所以有了代理设计模式. 代理,又称委托,delegation. 代理模式可以让一个单继承的类实现父类以外其他类的方法. ...