当前位置：首页 > Web开发 > 正文

vue.js 入门案例

2024-03-31 Web开发

作者:故事我忘了￠
小我私家微信公家号:措施猿的月光宝盒

技术图片

1 vue.js 研究 1.1 vue.js 介绍 1.1.1、vue.js是什么？

Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架差此外是，Vue 被设计
为可以自底向上逐层应用。Vue 的核心库只存眷视图层，不只易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各类撑持类库结合使用时， Vue 也完全能够为庞大的单页应用供给驱动。
渐进式框架：Progressive，说明vue.js的轻量，是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用
vue.js。
自底向上逐层应用：作为渐进式框架要实现的方针就是便利项目增量开发。
参考：https://cn.vuejs.org/v2/guide/

1.1.2、Vue.js与ECMAScript

Vue 不撑持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。
什么是ECMAScript?

技术图片

ECMAScript（简称ES）是一种规范，，我们泛泛所说的Js/Javascript是ECMAScript的实现，早期主要应用的ES3，当前主流浏览器都撑持ES5、ES6，ES8已于2017年颁布。
ES6：
ES7 ：

1.2、Vue.js的使用

1）在html页面使用script引入vue.js的库即可使用。
2）使用Npm打点依赖，使用webpack打包工具对vue.js应用打包。
大型应用保举此方案。
3）Vue-CLI脚手架

使用 vue.js官方供给的CLI脚本架很便利去创建vue.js工程雏形。

1.3、vue.js有哪些成果？ 1）声明式衬着

Vue.js 的核心是一个允许给与简洁的模板语法来声明式地将数据衬着进 DOM 的系统。
好比：使用vue.js的插值表达式放在Dom的任意处所，差值表达式的值将被衬着在Dom中。

2）条件与循环

dom中可以使用vue.js供给的v-if、v-for等标签，便利对数据进行判断、循环。

3）双向数据绑定

Vue 供给v-model 指令，它可以轻松实现Dom元素和数据东西之间双向绑定，即改削Dom元素中的值自动改削绑
定的数据东西，改削数据东西的值自动改削Dom元素中的值。

4）措置惩罚惩罚用户输入

为了让用户和你的应用进行交互，我们可以用 v -on 指令添加一个事件监听器，通过它挪用在 Vue 实例中界说的
要领

5）组件化应用构建

vue.js可以界说一个一个的组件，在vue页面中引用组件，这个成果非常适合构建大型应用。

1.4 vue.js 根本 1.4.1 MVVM模式

vue.js是一个MVVM的框架，理解MVVM有利于学习vue.js。

MVVM 拆分化释为：

? Model: 卖力数据存储

? View: 卖力页面展示

? View Model: 卖力业务逻辑措置惩罚惩罚（好比Ajax请求等），对数据进行加工后交给视图展示

MVVM 要解决的问题是将业务逻辑代码与视图代码进行完全疏散，使各自的职责越发清晰，后期代码维护更
加简单

用图解的形式分析 Ajax请求回来数据后直接操纵Dom来到达视图的更新的错误谬误，以及使用MVVM模式是如何
来解决这个错误谬误的

Vue 中的 MVVM

技术图片

从上图看出，VM(ViewModel)可以把view视图和Model模型解耦合，VM的要做的事情就是vue.js所承当的。

1.5.简单入门 1.5.1简单显示name

代码编写法式：
1、界说html，引入vue.js
2、界说app div，此区域作为vue的接管区域
3、界说vue实例，接管app区域。
4、界说model（数据东西）
5、VM完成在app中展示数据

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MyFirstTest4VueJs01</title>  <script src=http://www.mamicode.com/"vue.min.js"></script> </head> <body>  <div id="test1"> {{name}} </div> </body> <script> var vm = new Vue({ el: "#test1",//vm接管了app区域的打点 data: {//model数据 name: "金圣聪" } }); </script> </html> 1.5.2计算器双向绑定等

页面效果

技术图片

<!DOCTYPE html> <html lang="en" xmlns:v-on=""> <head> <meta charset="UTF-8"> <title>MyFirstTest4VueJs02-4计算器</title> </head> <body>  <div id="test2">   <a :href="url">  <span v-text="name"></span> </a> <br/> <input type="number" v-model="num1">+ <input type="number" v-model="num2">=    <span v-text="result"></span>  <button v-on:click="change">计算</button> </div> </body>  <script src=http://www.mamicode.com/"vue.min.js"></script> <script> var vm = new Vue({ el: "#test2",//vm接管了app区域的打点 data: {//model数据 name: "金圣聪的计算器", num1: 0, num2: 0, result:0, url:"" }, //界说要领,要领名:function(){} methods:{ change:function () { //在vm中引用本身的变量要加this指定 this.result=Number.parseInt(this.num1)+Number.parseInt(this.num2); // alert("计算功效"+this.result) } } }); </script> </html> 1.5.3 常识点: 1、v-model="..."：

? 栗子:

? <input type="number" v-model="num1">

? 在表单控件或者组件上创建双向绑定

v-model仅能在如下元素中使用 input select textarea components（Vue中的组件） 2、v-text="..."

? 栗子:

? <span v-text="result"></span>

? v-text可以将一个变量的值衬着到指定的元素中,它可以解决插值表达式闪烁的问题

3、v-on:

? 栗子:

? <button v-on:click="change">计算</button>

温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/30855.html

上一篇：颜色）font-size:12px; （行高）line-height:1.6em; （字体） font-family:"
下一篇：0.1和0.2的数字实际上是无限循环的. 在加法计算时

vue.js 入门案例

推荐文章

热门文章

标签

友情链接

关于本站

联系我们

特别鸣谢