快速入门Vue

刚进公司做的第一个项目,刚好前端人手不足,需要我们后端同时兼顾前后端的工作,采用的iview UI框架,基于vue.js。

先给大家科普一下:

前端JS框架和前端UI框架的区别

前端JS框架:基于js进行一定封装与一些独立设计的框架
比如:jQuery,Vue,React,angular等等

前端UI框架:基于某种js框架进行设计的UI组件库,就是一些写好的UI组件,拿来就能用,不需要自己写css

比如:
基于JQuery的Bootstrap,jQuery Smart UI 等
基于Vue的iView,Element等
基于React的Material-UI,React Desktop等

对于刚接触的Vue框架的我来说,vue最大的特性,莫过于双向绑定

单向绑定和双向绑定

Model:数据模型
View:视图

单向绑定:把Model绑定到View,当我们用JavaScript代码更新Model时,View就会自动更新。因此,我们不需要进行额外的DOM操作,只需要进行Model的操作就可以实现视图的联动更新。
例如,我们定义好一个JavaScript对象作为Model,并且把这个Model的两个属性绑定到DOM节点上:

image

双向绑定:把Model绑定到View的同时也将View绑定到Model上,这样就既可以通过更新Model来实现View的自动更新,也可以通过更新View来实现Model数据的更新。

所以,当我们用JavaScript代码更新Model时,View就会自动更新,反之,如果用户更新

### Vue3 快速入门教程 #### 创建 Vue 应用程序实例 在 Vue 3 中,创建应用程序的方式有所变化。不再使用 `new Vue()` 的方式来初始化应用,而是采用更简洁的 API 来实现相同的功能[^3]。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app'); ``` 这段代码展示了如何导入必要的模块并挂载根组件到指定 DOM 节点上。 #### 使用指令简化事件绑定 为了使模板更加易读和简洁,Vue 官方建议使用简写的语法形式。例如,`v-on` 可以被缩写成 `@` 符号,这不仅让代码看起来更为紧凑而且提高了可维护性[^1]。 ```html <button @click="add">Message: {{ msg }}</button> ``` 此按钮元素绑定了点击事件处理器函数 `add`,当用户单击该按钮时会触发相应的逻辑处理。 #### 组件化开发模式 构建大型项目时,通常需要将界面拆分为多个独立的小部件即组件来进行管理。每个组件都可以有自己的数据、方法以及生命周期钩子等特性[^2]。 ```javascript export default { data() { return { message: 'Hello Vue!', }; }, methods: { add() { console.log('Button clicked!'); } } }; ``` 上述定义了一个简单的 Vue 组件,其中包含了初始状态 (`data`) 和行为 (`methods`)。 #### 实现条件渲染 对于想要基于某些条件显示或隐藏部分内容的情况,在 Vue 中可以通过内置的条件语句如 `v-if`, `v-else-if`, 或者 `v-show` 来完成这一需求。 ```html <div v-if="isVisible"> This content is visible. </div> <div v-else> Alternative content here. </div> ``` 这里展示了一种根据变量 `isVisible` 的布尔值决定是否呈现特定 HTML 片段的方法。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值