学习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的更多相关文章

  1. Vue学习笔记-2

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变 ...

  2. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  3. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  4. vue学习笔记之:为何data是一个方法

    vue学习笔记之:为何data是一个方法 在vue开发中,我们可以发现,data中的属性值是在function中return出来的.可为何data必须是一个函数呢?我们先看官方的解释: 当一个组件被定 ...

  5. vue学习笔记(八)组件校验&通信

    前言 在上一章博客的内容中vue学习笔记(七)组件我们初步的认识了组件,并学会了如何定义局部组件和全局组件,上一篇内容仅仅只是对组件一个简单的入门,并没有深入的了解组件当中的其它机制,本篇博客将会带大 ...

  6. vue学习笔记(九)vue-cli中的组件通信

    前言 在上一篇博客vue学习笔记(八)组件校验&通信中,我们学会了vue中组件的校验和父组件向子组件传递信息以及子组件通知父组件(父子组件通信),上一篇博客也提到那是对组件内容的刚刚开始,而本 ...

  7. vue学习笔记(十)路由

    前言 在上一篇博客vue学习笔记(九)vue-cli中的组件通信内容中,我们学习组件通信的相关内容和进行了一些组件通信的小练习,相信大家已经掌握了vue-cli中的组件通信,而本篇博客将会带你更上一层 ...

  8. AntDesign vue学习笔记(七)Form 读写与图片上传

    AntDesign Form使用布局相比传统Jquery有点繁琐 (一)先读写一个简单的input为例 <a-form :form="form" layout="v ...

  9. Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

  10. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

随机推荐

  1. Host文件修改后无效的解决办法

    什么是hosts文件? 简单的说,hosts文件是用于本地dns服务(相关主题:什么是DNS缓存,如何清除DNS缓存?)的,采用ip 域名的格式写在一个文本文件当中,Hosts是一个没有扩展名的系统文 ...

  2. 基于requirejs+bluebird,50行代码实现轻巧实用的前端CMD加载器

    首先是github地址,可以用git克隆命令也可以直接在git页面下载 https://github.com/kazetotori/js-requireAsync 下载下来后目录结构是这样的 -pac ...

  3. 富文本NSAttributeString

    例子:http://www.jianshu.com/p/9ffcdc0003e0 下面研究下AttributedString究竟可以设置哪些属性,具体来说,有以下21个:   // NSFontAtt ...

  4. ubuntu 虚拟机vm virtualbox 不能打开 win7

    ubuntu某方面总有些不便,下载个虚拟机装个win7 但是第二次打开的时候就出现了安装是的场景: 原因很简单: 是因为安装了之后没有把win7的镜像文件移除,每次打开时会检测cd/dvd文件/(is ...

  5. Android在未来对 Java 8 特性的支持

    在谷歌, 我们总是努力做正确的事. 这意味着有时候我们会调整自己的计划. 我们深切地知道开发者社区是多少地关注 Android 能够对 Java 8 良好的支持, 并且我们正在改变自己对 Java 8 ...

  6. UI自动化测试表单重要代码

    public class frame { public static void main(String[] args) { // TODO Auto-generated method stub Sys ...

  7. Android使用Sugar ORM创建数据库报no such table:...的解决方法

    在学习使用Android开源框架Sugar ORM时,只是做了开始的创建数据库的操作就报出如下的异常信息 android.database.sqlite.SQLiteException: no suc ...

  8. 【Yii系列】Yii2.0基础框架

    缘起 因为一个月的短暂停留,我在给朋友搞事情,所以Yii系列的文章耽搁了很长时间,现在又重拾当时的知识,给大伙好好撸下这一系列的博客 提起Yii,虽然是国外的开发者搞的,但是它的作者是华人,这才是让我 ...

  9. 极客君教你破解隔壁妹子的wifi密码,成功率高达90%

    首先,给大家推荐一个我自己维护的网站: 开发者网址导航:http://www.dev666.com/ 破解wifi密码听起来很复杂,实际上也不是非常的复杂,极客君(微信公众帐号:极客峰)今天教大家如何 ...

  10. NumPy入门及基础

    1.1 NumPy 数组对象 NumPy中的ndarray是一个多维数组对象,该对象由两部分组成:  实际的数据;  描述这些数据的元数据. 大部分的数组操作仅仅修改元数据部分,而不改变底层的实际 ...