什么是Vue?为什么要学习Vue?如何使用Vue?
Vue基础介绍
什么是Vue.js
Vue.js 是前端的主流框架之一,和Angular.js、React.js 一起,并成为前端三大主流框架。它是一个构建数据驱动的 web 界面的库,目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它是基于 mvvm 模式的框架,只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。
MVC与MVVM有什么区别
MVC是什么?
M: Model 数据模型,专门用来操作数据,数据的CRUD。
V:View 视图,就是我们在浏览器中所看到的页面。
C:Controller 控制器,是视图和数据模型沟通的桥梁,处理业务逻辑都在控制器。
MVVM组成又是什么?
M:model数据模型,专门用来操作数据,数据的CRUD。
V:view视图,就是我们在浏览器中所看到的页面。
VM:ViewModel 视图模型,这个是数据的核心。
优势对比:
MVC模式,将应用程序划分为三大部分,实现了前后分离,就是把页面和数据分开。这种模式需要频繁的操作DOM,这样页面就有大量DOM绑定与监听类的操作。
MVVM模式通过数据双向绑定让数据自动地双向同步,V修改数据自动同步M、M修改数据自动同步到V。Vue就是这种MVVM模式的框架,无需开发人员手动操作DOM,开发人员只需要关注数据。
Vue基本使用
Vue.js 的引入方式有很多,这里我们使用最简单直接的一种:直接在官网BootCDN >> vue找到你需要的版本资源,复制< script>标签,然后导入到代码中即可 。
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
每个Vue应用都需要通过实例化Vue来实现,语法格式为:var vm = new Vue({ })
。先来通过一个案列认识一下吧。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body><div id="vue_det"><h1>{{msg}}</h1><h1>{{text()}}</h1></div><script type="text/javascript">var vm = new Vue({el: '#vue_det',data:{msg: "hello"},methods: {text(){return this.msg + "欢迎学习vue";}}})</script>
</body>
</html>
可以看到在Vue构造器中有一个 el
参数,它是DOM元素中的id。在以上实例中id是vue_det,在div元素中:<div id = "vue_det"></div>
,这表明接下来的改动全部在以上指定的div内,div外部不受印象。
这里的 data
就是 MVVM中的 M,专门用来保存每个页面的数据,data 属性中,存放的是 el
中要用到的数据。methods
用于定义函数,可以用return来返回函数值。{{}}
用于输出对象属性和函数返回值。
vue常用指令
1、{{…}}
在HTML页面中我们需要获取Vue中的数据,这时我们可以通过插值表达式{{…}}来获取。
<div id="app"><p>{{ msg }}</p>
</div>
<script>var vm = new Vue({el: '#app', data: {msg: '欢迎学习Vue' }})
</script>
2、v-text
和插值差不多,也可以从vue对象中获取信息。v-text 会覆盖掉原有的内容,但是插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空。
<div id="app"><p>----{{msg}}=====</p><p v-text="msg"></p><p v-text="msg">*******</p>
</div>
<script>var vm = new Vue({el:"#app",data:{msg:"hello vue"}})
</script>
3、v-html
默认我们从Vue对象中获取的信息如果含有HTML标签的话只会当做普通字符串显示,如果我们要显示标签的语义,就需要使用v-html指令。
<div id="app"><p>{{msg}}</p><p v-text="msg"></p><p v-html="msg"></p>
</div>
<script>var vm = new Vue({el:"#app",data:{msg:"<h3>hello vue</h3>"}})
</script>
4、v-bind
v-bind是Vue中提供的用于绑定属性的指令,可简写为“:”,属性中的内容写的是js表达式,可以做类似的处理。
<div id="app"><button title="提交按钮">提交</button><button v-bind:title="title">提交</button><button :title="title">提交</button><button :title="title + ' a'">提交</button>
</div>
<script>var vm = new Vue({el:"#app",data:{title:"提交按钮"}})
</script>
5、v-on
Vue 中提供了 v-on: 事件绑定机制,可以简写为@。
<div id="app"><button v-on:click="show">点击</button><button @click="show">点击</button>
</div>
<script>var vm = new Vue({el:"#app",methods:{show(){alert('hello')}}})
</script>
什么是Vue?为什么要学习Vue?如何使用Vue?相关推荐
- vue全套笔记,前端工程化+vue指令+脚手架
文章目录 一. 前端工程化 webpack 的基本使用 webpack 中的插件 webpack 中的 loader 打包发布 Source Map的使用 注意,实际开发不需要自己配置webpack ...
- vue调试工具如何使用_教你使用Vue.js的DevTools来调试vue项目
Vue DevTools项目的官方主页位于GitHub上:https://http://github.com/vuejs/vue-devtools.你可以找到安装说明,帮助解决一些问题等等.目前该扩展 ...
- 使用Tape和Vue Test Utils编写快速的Vue单元测试
by Edd Yerburgh 埃德·耶堡(Edd Yerburgh) 使用Tape和Vue Test Utils编写快速的Vue单元测试 (Write blazing fast Vue unit t ...
- 解决vue版本不匹配的问题 Vue packages version mismatch:
解决vue版本不匹配的问题 Vue packages version mismatch: 参考文章: (1)解决vue版本不匹配的问题 Vue packages version mismatch: ( ...
- vue 全局排序_搞定VUE [ 一 ]
击上方 蓝字 关注我 首先.以我个人的观点,不赞成把这些东西死记下来,会使用,能上手做,有不明白的及时的去浏览.翻阅,在实战中去快速的理解和掌握,之后水到渠成式的一步步去走向深入.当然,从自身的职 ...
- Vue 脚手架生成的项目结构分析||Vue 脚手架的自定义配置
Vue 脚手架生成的项目结构分析 Vue 脚手架的自定义配置
- 【vue.js开发】如何在vue里面优雅的解决跨域,路由冲突问题
[vue.js开发]如何在vue里面优雅的解决跨域,路由冲突问题 当我们在路由里面配置成以下代理可以解决跨域问题 proxyTable: {'/goods/*': {target: 'http://l ...
- vue实战记录(二)- vue实现购物车功能之创建vue实例
vue实战,一步步实现vue购物车功能的过程记录,课程与素材来自慕课网,自己搭建了express本地服务器来请求数据 作者:狐狸家的鱼 本文链接:vue实战-实现购物车功能(二) GitHub:sue ...
- vue 不识别svg_vue中引用svg,vue引入svg不显示,vue引用svg配置,vue3.0+ts如何配置svg...
注意: 如果按照下面配置正确发现svg依然无法显示可能s'v'g-sprite-loader的版本过高,重新指定版本下载npm i svg-sprite-loader@3.8.0 --save-dev ...
- vue生命周期图示中英文版Vue实例生命周期钩子
vue生命周期图示中英文版Vue实例生命周期钩子 知乎上近日有人发起了一个 "react 是不是比 vue 牛皮,为什么?" 的问题,Vue.js 作者尤雨溪12月4日正面回应了该 ...
最新文章
- www服务器提供的第一个信息页面,第14章WWW服务
- Java AOP研究之how is my aop2 method called
- 据说这是熟练掌握python的爷们_dongbei 是一门基于 Python 3 二次开发的东北方言编程语言...
- CSDN编程挑战——《-3+1》
- 《单线程的build hash table、write rows to chunks、hash join的步骤以及流程图》
- 安卓 原生okhttp使用get与post获取网络数据
- java中多态,instanceof关键字
- Redability
- php中几个操作函数参数的函数func_num_args() func_get_args() func_get_arg($i)php
- 【mybatis】基础环境搭建
- pillow python histogram_Python中的PIL库
- Linux下Sniffer程序的实现(PF_PACKET,SOCK_RAW,recvfrom,htons(ETH_P_IP),setsockopt(filter))
- Forbidden什么意思
- 使用cairo和freetype进行字体布局和渲染
- 江波龙入选国家级专精特新“小巨人”企业
- 如何使用VScode调试JS代码
- html在线翻译,HTML实现调用百度在线翻译API
- 如何用ChatGPT高效完成工作
- 【Proteus】PWM脉冲调制信号
- 2020软件下载站源码手机自适应
热门文章
- Linux下Elasticsearch-2.4.0的安装与简单配置(单节点)Head插件安装(已测试)
- 怎么把linux虚拟机硬盘扩容,Windows下虚拟机Linux(CentOS8)扩容设置 - 磁盘扩容中的坑和解决方法...
- 《只是为了好玩-Linux之父Linus自传》
- 一杯水怎么测试_每滴都是“芯”鲜好水,碧然德新款净水器实测
- Java概述标识符 、常量、关键字、数据类型
- MySQL报错this is incompatible with sql_mode=only_full_group_by
- xml转换为json格式时,如何将指定节点转换成数组 Json.NET
- Vue2.0 的漫长学习ing-2-6
- nyoj35——逆波兰表达式
- Social Network Analysis的Centrality总结,以及networkx实现EigenCentrality,PageRank和KatzCentrality的对比...