前端_VUE的使用教程

目录

Vue的使用教程

 (1)什么是VUE

 (2)模板语法

 (3)双向绑定(v-model和属性的双绑)

 (4)VUE事件用法

 (5)watch作用和用法

 (6)filter的作用和用法

 (7)vue的动画


Vue的使用教程

 (1)什么是VUE

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

  vue的基本框架

 

说明:

  • el: '#app':绑定元素的ID
  • data:{message:'hello Duang!'}:数据对象中有一个名为message的属性,并设置了初始值 hello Duang!

 (2)模板语法

​ 1)、插值表达式

​ 2)、指令

​ 3)、事件绑定(处理)

​ 4)、属性绑定

​ 5)、样式绑定

​ 6)、分支循环结构

 (3)双向绑定(v-model和属性的双绑)

 什么是双向数据绑定?

​   修改了vm中的属性其相应到页面,这叫数据的相应,如果修改了页面上的属性也可以修改vm中的数据,此时就是双向的数据绑定,即修改了任意一方就会影响另一方的数据。

 使用v-model指令可以实现双向的数据绑定,将数据绑定到页面元素

 

 

 (4)VUE事件用法

  

  

 (5)watch作用和用法

   在Vue中,watch又为监听属性,使用watch来响应数据的变化。

引用vue

body内容

 (6)filter的作用和用法

   Vue中的filter(过滤器)的作用: 对值进行筛选加工

 

 (7)vue的动画

引用vue

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值