Vue入门基础

作者: xiaojun1017 | 来源:发表于2020-07-22 19:37 被阅读0次

一 Vue简介

Vue是一个渐进式的前端框架,什么是渐进式的呢?

 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中,或者如果你希望将更多的业务逻辑使用Vue实现,那么Vue的核心库以及其生态系统。比如Core+Vue-router+Vuex+axios,也可以满足你各种各样的需求。Vue的特点和Web开发中常见的高级功能:

 1、解耦视图和数据

 2、双向数据绑定

 3、可复用的组件

 4、前端路由技术

 5、状态管理

 6、虚拟DOM

二 Vue 安装使用

方式一:直接CDN引入

 开发环境版本,包含了有帮助的命令行警告

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产环境版本,优化了尺寸和速度 

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二:下载和引入

开发环境 https://vuejs.org/js/vue.js

 生产环境 https://vuejs.org/js/vue.min.js

方式三:NPM安装

三 体验Vue

先看js代码,会发现创建了一个Vue对象

创建Vue对象的时候,传入了一个对象:{}

大括号{}中的el属性:该属性决定了这个Vue对象挂载到哪一个元素上,很明显,我们这里挂载到了id为app的元素上。

大括号{}中包含了data属性:该属性中通常会存储一些数据,好像上面例子中的str1就是直接定义出来的数据

四、Vue常见的语法格式

4.1、模板语法的初步认识

4.2、v-bind控制标签属性

4.3、v-on事件格式

4.4、定义Vue对象基本格式总结

五、vue控制类名和style样式(动态控制类名)

六、选项卡案例

七、v-if和v-show指令

v-if 和v-show都是来控制标签是否显示,但是也有区别,v-show是对样式层面的控制,v-if是对dom节点的控制。

点击收藏按钮案例:

八、列表和对象的渲染(初步使用)

九、表单数据绑定(双向数据绑定)

v-model的值是,vue接收表单元素的值的变量名, 即v1的值就是用户填写的内容(甚至可以在data中设置v1的值,从而设置表单元素的默认值)

十、Vue中的MVVM

什么是MVVM?

1,View层:视图层,在前端里就是我们常说的DOM层,主要作用是给用户展示各种信息;

2,Model层:数据层,数据可能是我们自定定义的数据,或者是从网络请求下来的数据;

3,ViewModel层:视图模型层,是View层和Model层沟通的桥梁;一方面它实现了数据绑定(Data Binding),将Model的改变实时反应到View中;另一方面它实现了DOM监听,当DOM发生改变可以对应改变数据(Data)

相关文章

  • vue基础入门

    vue基础入门

  • Vue.js基础入门

    今天,给大家分享下Vue.js基础入门,我主要由了解Vue.js、开始起步、语法三个部分简单的写了基础入门知识,希...

  • Vue.js基础入门

    今天,给大家分享下Vue.js基础入门,我主要由了解Vue.js、开始起步、语法三个部分简单的写了基础入门知识,希...

  • VUE基础知识入门

    VUE基础知识入门 VUE官方文档教程链接:VUE 1.什么是Vue.js Vue.js(读音 /vjuː/, 类...

  • 渐进式框架 Vue.js 基础入门及简单编程演示

    渐进式框架 Vue.js 基础入门及简单编程演示 ---------------------- 概念基础 ----...

  • Vue的基础入门

    Vue的基础入门 一、Vue的基础入门 简介作者:尤雨溪 版本:2.X版本 预估4-5月份3.0版本会发布 官网...

  • Python 高端课程培训,CMDB自动化运维培训!

    1、入门小基础(8个课时): 1、沙盒环境,py环境安装使用 2、vue 基础语法与组件学习 3、vue + el...

  • 实例学习vue.js目录

    目录 入门篇 初识vue vue基础指令 vue实例:标语大作战 事件修饰符 双向数据绑定 使用v-for遍历数据...

  • Vue基础入门

    第一节(指令) 入门案例 if else else-if v-show v-show只是显示和隐藏,修改的是css...

  • vue入门基础

    1.安装git,通过npm install vue下载vue插件 2.通过script导入vue.js插件 3.然...

网友评论

    本文标题:Vue入门基础

    本文链接:https://www.haomeiwen.com/subject/skmvcxtx.html