文章目录
前言
概述:Vue是一款前端渐进式框架,可以提高前端开发效率。
特点:
Vue通过MVVM模式,能够实现视图与模型的双向绑定。
简单来说,就是数据变化的时候, 页面会自动刷新, 页面变化的时候,数据也会自动变化.
一、Vue是什么?
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用(SPA)提供驱动。
二、使用步骤
1.安装Vue
我们可以在Vue.js的官网上直接下载vue.js,并在.html中通过<script>标签中引用。-> <script src = ../vue.js> </script> 开发环境不要使用最小压缩版,不然会没有错误提示和警告!(页面中直接使用使用vue多页面开发:
1、引入vue.js
2、创建一个vue根实例 new Vue({选项})
2.实例化
1、把app里面的内容称为模板
2、v-开头的属性称为 模板的指令
3、通过指令把html模板和js联系在一起
3.内置指令
内置指令 v-开头的特殊属性,联系html模板与JavaScript数据类型
文本渲染:v-text 、v-html 、{{}}
属性渲染:v-bind:属性名='值' / :属性名='值'
条件渲染:v-if、v-else-if、v-else、v-show、v-if
注意:
1、v-show是通过css方法隐藏节点
2、v-if直接移除节点方式隐藏
3、如果频繁切换显示与隐藏 使用v-show
4、偶尔切换显示隐藏用 v-if
列表渲染:
v-for='(item,index) in list' :key='item'(item 变量的当前数据,index 当前的下标)
key属性为了让Vue内部给遍历的节点给一个唯一的标识,以便更好地去(排序过滤等操作)为了性能优化,key的值要唯一
遍历对象
v-for='(value,key) in obj'
v-for与v-if同时使用时,需要用template