vue总结

1、设计模式(代码组织形式):mvvm

m:model 既数据,数据源模型,界面所有的数据负责提供及管理

v:view 视图既静态页面

vm:数据和试图绑定

2、vue基本使用方法

1)、引入js文件

2)在页面放置一个div容器#app

3)创建vue对象,

4)在界面div中使用vue对象中的数据

3、vue指令

1)、{{ }}  差值表达式,可以直接使用data属性中的属性

2)、v-on:也可以简写为@

v-on提供的修饰符:

.stop   阻止冒泡,阻止默认行为

.prevent   阻止默认行为

3)v-text与v-html的区别:被插入的内容都会被当做 HTML,但是对于没有HTML标签的数据绑定时作用同v-text和{{}}

4)v-cloak:解决表达式闪烁问题,配合display: none使用


5)v-model双向数据绑定

6)v-bind,可以简写为:

作用:可以给html元素或者组件动态地绑定一个或多个特性,例如动态绑定style和class

7)v-for:循环遍历

为数组索引指定别名(或者用于对象的键)

track-by="$index"用来标记dom对象的唯一性这是vue1.0中的写法,2.0中改为:key="index";

8)v-if和v-show的总结:

v-if 和v-show 都能够实现对一个元素的隐藏和显示操作,但是v-if 是将这个元素添加或者移除到dom中,而v-show是在这个元素上添加 style="display:none"和移除它来控制元素的显示和隐藏的

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,468评论 0 29
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 13,797评论 4 129
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,678评论 0 6
  • 下载安装搭建环境 可以选npm安装,或者简单下载一个开发版的vue.js文件 浏览器打开加载有vue的文档时,控制...
    冥冥2017阅读 11,269评论 0 42
  • vue.js官网教程学习笔记和学习摘要 起步 安装 一个简单的方法,直接把一个vue.js引入你的HTML页面中,...
    恰皮阅读 8,651评论 2 22