vue学习笔记-one
学习vue基础以来,看各种教程,练习,随手写写,有错误请大家指导, 目前vue已经升级到2.0的版本,学习也最好是2.0的版本开始。
先看vue的几个特点:1,简单,2,轻量,3,模块友好 4, 组件化 5,数据驱动,
第一:先看一个实例: 这是一个简单的vue实例 for循环
<div id="app">
<ul>
<li v-for="item in arr">{{item}}</li>
</ul>
</div>
<script>
var nm=new Vue({
el:"#app",
data:{
arr:["banner","orange","appele","yellow"]
},
})
</script>
主要看js里边代码 实例化vue 代码 new Vue({}) el:”#app“ 挂载元素dom节点 data:初始化数据 最大的一点在也不用像jq一样去拼接字符串html模板了,直接去html渲染 数据 即可 。 入门很快。
第二: 指令 v-on vue-text v-html v-for v-bind v-if v-else v-model 1: v-on : 绑定我们html的事件为主,可以简写为@click 例子 :
<div id="app">
<div v-on:click="dianwo">{{arr}}</div>
<button @click="jia">+</button>
<span>{{num}}</span>
<button @click="jian">-</button>
</div>
<script>
var nm=new Vue({
el:"#app",
data:{
arr:"nihao vue",
num:0
},
methods:{
dianwo:function(){
this.arr="你点击我了,我好伤心";
},
jia:function(){
this.num++;
},
jian:function(){
if (this.num==0) {return false}
this.num--;
}
}
})
</script>
2:v-text和v-html 和jq的的的text和html基本是一样的使用方法,太简单, 3:v-for 上面实例已经介绍 4:v-bind 可以绑定我们的任何自定义类,有点和jq的attr一样 例子:
<div id="test">
<img v-bind:src="src">
<a v-bind:href="url">百度一下</a>
<a :href="url">百度一下</a>
<a v-on:click="update()" href="#">更改图片</a>
<a @click="update()" href="#">更改图片</a>
</div>
<script type="text/javascript">
new Vue({
el: '#test',
data: {
url: "https://www.baidu.com",
src: "img/sum.jpg"
},
methods: {
update: function(){
this.src = "img/top.jpg";
}
}
})
</script>:
5:v-if v-else 和v-show 区别 v-if 是不让html直接干掉,html隐藏的,v-show 就是css的 display:none ,block 的转化 , 例子:
<div id="app">
<div v-if="ok">我是v-if</div>
<div v-else>我是v-else</div>
<div v-show="ok1">我是v-show</div>
</div>
<script>
var nm=new Vue({
el:"#app",
data:{
ok:true,
ok1:true
},
})
</script>
6: v-model 主要是使用在表单上 我们数据的驱动,js获取表单的值 都需要绑定 v-model来获取 例子 :
<div id="app">
<input type="text" v-model="arr">
<span>{{arr}}</span>
<hr/>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<button @click="adddata">提交</button>
</div>
<script>
var nm=new Vue({
el:"#app",
data:{
arr:"nihao vue",
checked:true,
checkedNames:[],
picked:'',
selected:''
},
methods:{
adddata:function(){
if (this.checked==false) {
console.log("你需要同意注册");
}else{
console.log(this.checked+'---'+this.picked+'---'+this.selected)
console.log("你已经注册成功");
}
}
}
})
</script>
先介绍到这里 下面在更新
vue学习笔记-one的更多相关文章
- Vue学习笔记-2
前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- vue学习笔记之:为何data是一个方法
vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...
- vue学习笔记(八)组件校验&通信
前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...
- vue学习笔记(九)vue-cli中的组件通信
前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...
- vue学习笔记(十)路由
前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...
- AntDesign vue学习笔记(七)Form 读写与图片上传
AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...
- Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
- vue学习笔记(三)class和style绑定
前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...
随机推荐
- 求int型正整数在内存中存储时1的个数
题目描述: 输入一个int型的正整数,计算出该int型数据在内存中存储时1的个数. 输入描述: 输入一个整数(int类型) 输出描述: 这个数转换成2进制后,输出1的个数 输入例子: 5 输出例子: ...
- .NET的HTTP辅助类:RestSharp
示例: var client = new RestClient("http://example.com");// client.Authenticator = new HttpBa ...
- java构造函数使用方法总结
使用构造器时需要记住: 1.构造器必须与类同名(如果一个源文件中有多个类,那么构造器必须与公共类同名) 2.每个类可以有一个以上的构造器 3.构造器可以有0个.1个或1个以上的参数 4.构造器没有返回 ...
- ubuntu auto mount自动挂载硬盘
Ubuntu 挂载的文章在网上也不少,推荐一个: http://wenku.baidu.com/link?url=N2c7axijp_KYaYkt2CrZFNZPzzS8xBHLQSTUcI2F85I ...
- 20144306《网络对抗》MAL_逆向与Bof基础
实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,getShe ...
- Java引领新生活
阅读邹欣老师的博客,谈谈你期望的师生关系是什么样的? 我觉得师生关系应当是亲密无间,课上老师讲解学生配合,课下师生交流启发思考. 你有什么技能(学习,棋类,球类,乐器,艺术,游戏,......)比大多 ...
- ipconfig显示IP地址情况
1.以太网适配器 Local Area Connection 若电脑是本地连接,则ipv4地址是本机的ip地址,默认网关一般为本机所连接路由器的地址. 2.无线局域网适配器 Wireless Netw ...
- oracle学习 笔记(2)
题记:在使用Oracle数据库的时候,发现Oracle是没有自动增长列来实现主键的,所以在此记录学习.(PS:如果哪里有错误或者不足的地方还请大家帮忙指出来) 二.序列(自动增长列) 为此问题博主也是 ...
- CSS.04 -- 浮动float、overflow、定位position、CSS初始化
标准流:行内/行内块元素横向有序排列 : 块元素纵向有序排列. 浮动:Float 语法:float:left/right : 设置浮动的元素,脱离标准流 浮动的框可以向左或向右移动,直到它的外边缘碰 ...
- PRINCE2学习
今天对PRINCE2中提及的7大主题进行学习,主要的内容是通过概述和PMBOK之间的对比做一些总结,每个主题所包含的过程和方法并没有太多涉及,没有对整个体系有全面深入的学习,有些断章取义的地方也请博友 ...