Vue.js
文章平均质量分 78
Vue的应用
程序元单单
我是一个编程界的小学生,怀揣改变IT界的梦想
展开
-
Vue简介
Vue.js是一套用于构建整体用户界面的渐进式JavaScript 框架。Vue.js采用自底向上增量进行开发的设计。Vue.js提供了MVVM(Model-View-ViewModel())数据信息绑定。原创 2024-03-31 20:43:40 · 357 阅读 · 0 评论 -
Vue模板语法
在vue2.x版本中,需要通过new Vue()构造方法来创建一个新的Vue应用实例new Vue()构造方法将接收一个根组件选项对象作为参数,该对象可以包含指定dom元素、数据、方法、组件、生命周期钩子等,new Vue()构造方法返回应用程序实例本身。其中,需要通过el来指定一个dom元素,在该dom元素上装载Vue实例的根组件,代码如下这样该id = app的div dom元素中的所有数据变化会被Vue框架所监控,从而实现数据的双向绑定。原创 2024-04-02 20:33:43 · 377 阅读 · 0 评论 -
Vue2.x指令
Vue 对于一些常用的页面功能进行了指令封装,这些指令可以以Html元素属性的方式使用。原创 2024-04-02 22:17:15 · 672 阅读 · 0 评论 -
Vue2.x实现学校官网菜单栏
zhanshi属性用于控制子菜单是否展示,初始化时子菜单不显示,当鼠标移动到含有子菜单的一级菜单时,该属性变为true,子菜单被渲染出来;在caidan.html中创建Vue实例,实例中首先在data 选项中编写一个要显示的菜单信息,这些菜单按照一级菜单及其子菜单的关系进行编写,这样就可以在页面中使用指令动态地显示菜单。顶级菜单中定义了菜单的名字,菜单点击后跳转的url地址,show属性及其子菜单对象zicandans./* 一级菜单 :相对定位 *//* 二级菜单:绝对定位 *//* 子选择器 */原创 2024-04-03 11:27:35 · 895 阅读 · 0 评论 -
Vue2.x实现商城购物车
在id = app的div中使用v-for标签遍历输出商品信息,单项书籍价格使用shangpinJiage()方法进行更新,总价计算使用计算属性zongJia()进行更新,删除功能使用v-on指令通过监听按钮点击deleteShangpin()方法实现,在cart.html的vue实例中添加如下代码。为了使单项商品金额随购物车中商品数量动态变化,需要在Vue实例中编写方法shangpinJiage()来进行计算,并在方法中编写deleteShangpin()用以删除购物车中的商品。原创 2024-04-10 11:39:22 · 777 阅读 · 0 评论 -
Vue2.x计算属性
在以上代码中,声明了一个计算属性reverseMessage,可以像给绑定普通属性一样将数据绑定到模板的计算属性。Vue会监测到app.reverseMessage 依赖于app.message,因些当message属性发生变化时,所以依赖reverseMessage的绑定也会更新。计算属性一般在选项对象的computed中以函数的形式进行声明,然后再插值中写函数名进行调用,这样方便代码的修改与维护,也可以进行复用。在以上代码中,插值不再是简单的声明式逻辑,而是用了三个方法实现字符串的反转。原创 2024-04-09 22:50:22 · 467 阅读 · 0 评论