vue学习笔记(一)
一、MVC 和 MVVM 的区别
MVC:
- Model(模型)应用程序中用于处理应用程序数据逻辑的部分(通常模型对象负责在数据库中存取数据)。
- View(视图)显示数据(通常视图是依据模型数据创建的)。
- Controller(控制器)应用程序中处理用户交互的部分(通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据)
在该模型中最核心部分是Controller,很大一部分是对DOM进行操作。即MVC是面向DOM进行开发
- M:Model 数据/模块,
- V:View 视图,
- VM:ViewModel 二者连接器(vue)
View通过DOM事件监控来操作改变Model,Model通过动态数据绑定来改变视图View
MVVM只需要关注M层的变化即可,数据改变后View会跟着改变。即MVVM是面向数据进行开发
把页面中的某一部分单独拿出来进行封装,有两个特点:组件的封装,组件的复用
合理的拆分组建将大型项目拆分成一个个组件,易于维护
三、Vue中的组件化
- 局部组件:
//局部组件
var TodoItem = {
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function(){
this.$emit('delete',this.index);
}
}
} var app = new Vue({
el:'#app',
components:{
TodoItem:TodoItem
},
data:{
list:[],
inputValue:''
},
methods:{
handleBtnClick:function(){
this.list.push(this.inputValue);
this.inputValue = '';
},
handleItemDelete:function(index){
this.list.splice(index,1);
}
}
});
- 全局组件
//全局组件
Vue.component('TodoItem',{
props:['content'],
template:'<li>{{content}}</li>'
});
- 组件调用
<div id="app">
<input type="text" v-model='inputValue'/>
<button v-on:click='handleBtnClick'>提交</button>
<ul>
<todo-item v-bind:content='item'
v-bind:index='index'
v-for='(item,index) in list'
@delete='handleItemDelete'>
</todo-item>
</ul>
</div>
四、Vue中父子组件相互传值
- 父组件向子组件传递值:
组件中使用v-bind:item="item"
子组件中通过 props:["item"]接收参数
- 子组件向父组件传递值:
//通过监听事件
this.$emit('delete',this.index);
五、用到的命令
v-bind:item="item" ==> :item="item"
v-on:click="handleBtnClick" ==> @click="handleBtnClick"
v-for="item in list" v-for="(item,index) in list"
jQuery数组方法:splice()
splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
注释:该方法会改变原始数组。
参数 | 描述 |
---|---|
index | 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。 |
howmany | 必需。要删除的项目数量。如果设置为 0,则不会删除项目。 |
item1, ..., itemX | 可选。向数组添加的新项目。 |
vue学习笔记(一)的更多相关文章
- 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绑定,关 ...
随机推荐
- 复制订阅服务器和 AlwaysOn 可用性组 (SQL Server)
https://docs.microsoft.com/zh-cn/sql/database-engine/availability-groups/windows/replication-subscri ...
- java中锁
s锁的作用是就是保证线程安全,但是从另外成都讲影响了效率: 1 synchronized关键字 这个是虚拟机底层实现的, java中的关键字,内部实现为监视器锁,主要是通过对象监视器在对象头中的字段来 ...
- Vue.js 的精髓——组件
开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...
- C# 连接Oracle 11g 无需安装Oracle客户端
1.首先到Oracle网站上下载ODAC 下载地址1:http://download.csdn.net/detail/easyboot/9456476 下载地址2:http://www.oracle. ...
- 2.7 Go channel
channel简单示例 package main import ( "fmt" "time" ) //channel的创建,发送,接收 func channe1 ...
- grunt 实例构建(四)
相关插件的引用: grunt-usemin 对页面的操作 grunt-contrib-cssmin 压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...
- java.utils.UUID类介绍
1 UUID介绍 UUID (Universally Unique Identifier)缩写,即通用唯一识别码,也是被开源软件基金会 (Open Software Foundation, OSF) ...
- ztree树样式的设计
ztree的功能虽然很是强大,但是唯一有一点就是样式有点普通,所以如果我们需要修改样式,那么就只能进行样式重新覆盖了 样式代码,这些都是根据实际样式进行覆盖 /** * tree的选中样式 */ .c ...
- TOJ 1836 Play on Words
描述 Some of the secret doors contain a very interesting word puzzle. The team of archaeologists has t ...
- document.frames与window.frames在不同浏览器中的使用
问题: document.frames 只有 IE Opera 支持.等同于 window.frames.用来取得当前页面内 window 对象的集合. 在 Firefox Chorome Safar ...