Vue入门总结

mac2025-12-05 8

欢迎访问我的个人博客:www.ifueen.com

Vue入门

文章目录

Vue入门简述MVVM模式安装ECMAScript6语法常用语法 Vue常用语法Vue表达式Vue指令

简述

摘自百度百科

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动

MVVM模式

以前的MVC为

Model层—View层—Controller层

MVVM层分为

Model层----View层----ViewModel

Model：它是与应用程序的业务逻辑相关的数据的封装载体，它是业务领域的对象，Model并不关心会被如何显示或操作，所以模型也不会包含任何界面显示相关的逻辑。在web页面中，大部分Model都是来自Ajax的服务端返回数据或者是全局的配置对象。

View：它专注于界面的显示和渲染，在Vue中则是包含一堆声明式Directive和Component的视图模板。

ViewModel：它是View和Model的粘合体，负责View和Model的交互和协作，它负责给View提供显示的数据，以及提供了View中Command事件操作Model的途径；在vue中“Vue对象实例”充当了这个ViewModel的角色；

安装

首先安装Node.js

Node.js安装很简单

Node.js地址直接下载傻瓜式安装即可

然后创建好项目，以本人的Java项目为例

在终端里使用命令

npm install vue

这样就在此次项目中安装好了vue

也可以进行全局安装 npm install vue -g

ECMAScript6语法

常用语法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ES6语法</title> <script> for (var i = 0; i < 5; i++) { /*console.log(i);*/ } /*console.log("让我康康i有没有值"+i);*/ /* 块级元素let 相当于局部变量*/ for (let j=0;j<5;j++){ /*console.log(j);*/ } /*console.log("让我康康i有没有值"+j);*/ /* const代表常量*/ /*const s = 5; s = 78; //报错，因为const定义后就为常量*/ /* 解构表达式 */ /* 数组解构 */ let arr = [15,56,69]; const [a1,a2,a3] = arr; console.log(a1,a2,a3); /* 对象解构 */ let ars = {'name':'不想说',age:18} let {name,age} = ars; console.log(name,age); /* 箭头函数 */ let product = { name:'最爱', eat:function (food) { alert(this.name+"吃"+food); }, //箭头函数 eat1:food=>alert(this.name+"吃"+food), //简写 eat2(food){ alert(this.name+"吃"+food); } } /*product.eat('汉堡'); product.eat1('汉堡'); product.eat2('汉堡');*/ /* 箭头表达式 + 解构表达式 */ const person = { name:'山泥若', age:25, speak:['疼痒集团','火焰鼠','喂喂喂'] } function hello(person) { alert(person.name+"是"+person.speak[0]) } var hi = ({name,speak}) => alert(name+"是"+speak[0]); hi(person); /* Promise对象 */ /* Promise是异步编程的一种解决方案，比传统的解决方案（回调函数+事件）更加合理和强大 */ const p = new Promise((resolve, reject) => { //模拟定时任务的异步 setTimeout(()=>{ const num = Math.random(); //随机返回成功或者失败 if (num<0.5){ resolve('成功!'+num) }else { reject('失败!'+num) } },300) }); //成功后调用 p.then(function (msg) { alert(msg); }).catch(function (msg) { //失败后调用 alert(msg); }) </script> </head> <body> </body> </html>

Vue常用语法

数据绑定

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Hello Vue</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="con"> {{msg}} </div> <div class="con1"> {{user}} {{user.name}} {{user.age}} {{user.red}} </div> <script> var app = new Vue({ el:"#con", data:{ msg:'你看什么看？' } }); var app1 = new Vue({ el:'.con1', data: { user:{ name:'山泥若', age:25, color:'red' } } }); </script> </body> </html>

数据双向绑定

<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Hello Vue</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="con"> <input type="text" v-model="message" v-on:change="changeData"> </div> <script> var vue = new Vue({ el:'#con', data:{ message:'山泥若是大恶人' }, methods:{ changeData(){ this.message='山泥若biss'; } } }); </script> </body> </html>

Vue表达式

一般表达式都是写在{{}}

语法:{{表达式}}

例如：{{5+5}}

Vue指令

v-text指令： <标签名 v-text="表达式"></标签名> v-html指令： <标签名 v-html="表达式"></标签名> v-for指令： <标签 v-for="元素 in 数据源"></标签> v-bind指令： <标签 v-bind:标签属性名字="表达式"></标签> v-model指令： <标签 v-model="表达式"></标签> v-show指令： <标签名 v-show="表达式"></标签名> v-if指令： <标签名 v-if="表达式"></标签名> v-else指令： <标签名 v-if="表达式"></标签名> <标签名 v-else></标签名> v-else-if指令： <标签名 v-if="表达式"></标签名> <标签名 v-else-if="表达式"></标签名> <标签名 v-else-if="表达式"></标签名> <标签名 v-else></标签名>

最新回复(0)