1、什么是Vue
vue就是一个js库,并且无依赖别的js库,跟jquery差不多。它是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。vue的核心库只关注视图层,非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。
前端框架三巨头:Vue.js、React.js、AngularJS,vue.js以其轻量易用著称,vue.js和React.js发展速度最快,AngularJS还是老大。
1.1 特点;MVVM
Vue
是一个遵循MVVM模式的渐进式框架。Vue
比较易学,体积更小,灵活,高效。Vue
的本身只关注UI视图,可以更简单的导入Vue插件和第三方库。Vue
通过Vue
对象把数据和视图完全分离开来,对视图的改变无需在操作DOM元素,只需要操作对应的数据,即可改变对应的视图结构,也就是通过双向数据绑定把View层和Model层连接了起来,通过对数据的操作就可以完成对页面视图的渲染。
- MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式。
- M:即Model,模型,包括数据和一些基本操作,指代的就是vue对象的data属性里面的数据。这里的数据要显示到页面中。
- V:即View,视图,页面渲染结果,指代的就是vue中数据要显示的HTML页面,在vue中,也称之为“视图模板”
- VM:即View-Model,模型与视图间的双向操作,指代的是vue.js中我们编写代码时的vm对象了,它是vue.js的核心,负责连接 View 和 Model,保证视图和数据的一致性。
1.2 数据渲染
1.2.1 Vue.js的引入
- CDN
对于制作原型或学习,你可以这样使用最新版本:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
对于生产环境,我们推荐链接到一个明确的版本号和构建文件,以避免新版本造成的不可预期的破坏:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
- NPM
在用Vue
构建大型项目时推荐使用NPM
安装,NPM
能够很好的和诸如webpack
或Browserify
模块打包器配合使用,同时 Vue 也提供配套工具来开发单文件组件。
# 最新稳定版
$ npm install vue
1.2.2 数据绑定
上面我们说了如何导入Vue
的js
文件,下面我们来看一下我们如何在Vue
中绑定数据,并把数据显示到页面上呢?
Vue.js
的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM
的系统:
<div id="app">
<h3>{
{message}}</h3>
</div>
new Vue({
el: "#app",
data:{
message: "Hello World"
}
})
页面显示效果如下
这样的话我们已经创建了一个Vue的应用,看起来像是渲染模版字符串一样,但是Vue在背后做了大量的工作,这样的话DOM和数据就建立绑定关系。
1.2.3 语法
上面的案例中我们把Hello World
渲染到页面上,看一下这个语法是如何构成的。
数据渲染
<div id="app">
<h3>{
{message}}</h3>
</div>
数据渲染到页面上,首先我们需要提供一个标签用于填充数据,这个标签我们定义了一个id属性为app
,在标签中我们用插值表达式进行数据的填充。
Vue对象定义
- 定义完页面结构,我们需要在js中通过
new Vue()
创建一个Vue
的实例化对象。 - 在构造函数中以对象的形式做一些配置,这些配置中比较重要的有el、data两个属性。
el
定义可以渲染数据的DOM结构。data
定义可以渲染到页面上的数据,跟DOM结构建立关联关系。
通过上述语法结构,我们就简单完成用Vue
打印Hello World
的应用
1.3 基本指令
Vue
的指令是带有特殊前缀v-
的HTML特性,他可以绑定一个表达式,并且把一些特性作用到DOM结构上去。
1.3.1 v-text
v-text
指令用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题- 如果数据中有HTML标签会将html标签一并输出
- 注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值
<div id="app">
<!--
注意:在指令中不要写插值语法,直接写对应的变量名称
在 v-text 中赋值的时候不要在写插值语法
一般属性中不加 {
{}} 直接写对应的数据名
-->
<p v-text="msg"></p>
<p>
<!-- Vue 中只有在标签的 内容中 才用插值语法 -->
{
{msg}}
</p>