Vue基础介绍
一、Vue基本介绍
1、Vue.js目前最火的的一个前端框架,三大主流前端框架之一。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层。2、Vue.js是一套构建用户界面的框架(一套完整的解决方案,对项目侵入性大,中途需要跟换框架则需要重构整个项目),只关注视图层,易上手,有配套的第三方类库。
3、提高开发效率,帮助减少不必要的dom操作;双向数据绑定,通过框架提供的指令,前端只需要关注业务逻辑,不再关心dom如何渲染。
vue是用来构建用户界面的渐进式框架,可谓是后起之秀,生态完善。
特点:采用组件化模式,提高代码复用率,让代码更好的维护。
声明式编码,让编码人员不需操作dom,提高开发效率。(心有灵犀)
使用虚拟DOM(内存里的数据)+优秀的Diff算法,尽量复用DOM节点。
二、Vue下载和引入
下载
下载Vue.js文件到本地
https://cdn.jsdelivr.net/npm/vue/dist/vue.js
安装引入
<script>引入vue.js文件后,
Vue被注册为一个全局的变量,是一个构造函数
三、Vue数据驱动模型
轻量级的以数据驱动的前端JS框架
js通过操作DOM来改变页面的显示,而Vue通过操作数据来实现页面的更新与展示。
虚拟的DOM
核心思想是:对复杂的文档DOM结构,提供一种方便的工具,进行最小化地DOM操作。
MVVM模式
M:即Model,模型,包括数据和一些基本操作
V:即View,视图,页面渲染结果
VM:即View-Model,模型与视图问的双向操作(无需开发人员干涉)
Vue实例
- 实例中,可以包含挂在元素(el),数据(data),模板(template),方法(methods)与生命周期钩子(created等)等选项
- app.$el === document.getElementById(‘app’)
-
<body> <!-- 将来的Vue实例会控制这个元素中所有内容 --> <!-- V(View),Vue实例所控制的这个元素区域 --> <div id="app"> <!-- 通过Vue提供的指令,很方便就能把data里的数据渲染到页面,不用手动操作dom了 (前端Vue之类的框架,不提倡去手动操作dom) --> <p>{{ msg }}</p> </div> <script> //导入包,就有Vue的构造函数 //VM,这个new出来的vm对象,就是调度者 var vm = new Vue({ //{}配置对象 el:'#app', //element,这个Vue实例要控制页面上的哪个区域 data:{ //M,data就是用来保存当前页面数据的 msg:'欢迎学习Vue' } }) </script> </body>
-
{undefined{}}插值表达式
- 插值,不仅可以插变量,还可以进行运算
-
{{'helloworld'.split('').reverse().join('')}}
Vue指令
- v-model:用于双向绑定
- v-text:用于更新绑定元素中的内容
- v-html:用于更新绑定元素中的html内容
- v-show:用于根据表达式的值的真假条件显示隐藏元素,切换元素的display CSS属性
- v-if:用于根据表达式的值的真假条件渲染元素
- v-for:用于遍历数据渲染元素或模板
- v-on:用于在元素上绑定事件
- v-bind:用于在元素属性上绑定数据 v-bind:可以简写成 :
本文来自博客园,作者:攻城狮-tester,转载请注明原文链接:https://www.cnblogs.com/zcjbky/p/15593743.html