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绑定,关 ...
随机推荐
- Java垃圾回收学习笔记
通常来说,要写Java代码,你基本上都没必要听说垃圾回收这个概念的.这不,对于已经写了5年多Java代码的我来说,我还没有哪次经历说是需要使用垃圾回收方面的知识来解决问题的.但是,我依然督促自己花了几 ...
- oracle查看用户所占用的表空间
select * from (select owner || '.' || tablespace_name name, sum(b) g from (select owner, t.segment_n ...
- linux命令分块总结---多操作才是真理
ps:其实学习linux系统,多多联系我们现在使用的Windows系统,这样就可以事半功倍的学习: 一. 启动,关机,登入,登出相关命令 [login]: 登录 [logout] :登出 [shutd ...
- 【收集】sql查询统计,周,月,年
昨天 select * from tb where datediff(day, 时间字段 ,getdate()) = 1 今天 select * from tb where datediff(day, ...
- ###Intent的使用(活动中穿梭)
让活动切换有两种方式 显示意图和隐式意图 显示意图:只能在本应用中穿梭: 隐式意图:可以调用其他应用程序的活动,包括系统应用,但是需要配置清单文件 显式Intent 1) 创建一个新的活动 2) 确定 ...
- 一切app源于生活 用于生活 一个利于生活的app——利生活
现在的app软件可以说 各行各业都基本达到饱和阶段 因为智能手机时代让我们的世界缩小了十倍百倍甚至千倍,我们可以足不出户知天下可以足不出户的去购物. 既然app利于生活 那么今天我所要开发的一个app ...
- QT Creator 快速入门教程 读书笔记(一)
一 Qt简介 Qt 是一个跨平台的C++应用程序框架,支持Windows.Linux.Mac OS X.Android.iOS.Windows Phone.嵌入式系统等.也就是说,Qt 可以同时支持桌 ...
- SSH相关小应用
1.隐藏值:<s:hidden name="bbsTopic.id" value="%{bbsTopic.id}"></s:hidden> ...
- 浩哥解析MyBatis源码(三)——Transaction事务模块
原创作品,可以转载,但是请标注出处地址:http://www.cnblogs.com/V1haoge/p/6634151.html 1.回顾 之前介绍了Environment环境类,这其实是一个单例类 ...
- 解决Highcharts 5.0.7,IE8下bar类型图表无法显示的问题
引用如上, 当图标类型为bar时,IE8无法直接显示, 官网也一样, 但通过切换图例可以显示, 所以加入以下代码解决此问题 未经允许,严禁转载!!!