搜索
您的当前位置:首页使用vue.js实现编辑菜谱

使用vue.js实现编辑菜谱

时间:2023-11-30 来源:红星娱乐
这次给大家带来使用vue.js实现编辑菜谱,使用vue.js实现编辑菜谱的注意事项有哪些,下面就是实战案例,一起来看一下。

1、先获取门店下的所有菜品类型、菜品名称、菜品id(list),也就是最大数据量

this.$http.post(ceshiApi+'getCyFoodAndFoodTypeForShopId',{shopId:this.shopId},{emulateJSON:true,credentials: true}).then(function(res){ if(res.data.type=='success'){ this.foodList = res.data.data.cyFoodTypeList; }});

2、获取该菜谱已经拥有(勾选了哪些)的菜品id(list)

this.$http.post(ceshiApi+'getCyMenuFoodByMenuId',{'cyMenuId': id},{emulateJSON:true,credentials: true}).then(function(res){ if(res.data.type=='success'){ let data = res.data.data; let list = []; for(let i = 0; i < data.length; i++) { list.push(data[i].foodDefineId); } this.foodListId = list; }else { alertErrors(res.data.message); }});

3、在html页面使用vue对两数据进行对比,菜品id相同就打勾

<p class="modal-body"> <p class="scroll_name "> <p class="newRecipe" style="overflow-y: scroll;height: 410px;"> <p v-for="item in foodList" style="display: flex;flex-wrap: wrap;"> <label style="margin-right: 20px;">{{ item.name }}</label> <p class="food-list"> <p v-for="food in item.cyFoodDefineList"> <label> <input class="ace check_son" type="checkbox" :value="food.id" v-model="foodListId"> <span class="lbl">{{ food.name }}</span> </label> </p> </p> </p> </p> </p></p>

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

推荐阅读:

mpvue小程序markdown适配怎样实现

怎样高效的使用React服务器端渲染

小编还为您整理了以下内容,可能对您也有帮助:

Vue.js+Element-UI实现点击按钮控制左侧菜单折叠与展开

在element-ui中采用NavMenu导航菜单作为系统菜单的实现。

官方文档中NavMenu导航菜单有一个Menu Attributes属性collapse,是一个 bollean 类型,用于控制是否水平折叠菜单。

我们可以通过设置collapse属性的值为 true 或 false 来控制菜单的折叠与展开。

解决方案

1.实现一个按钮,

2.在data中定义一个数据collapse

3.实现方法toggleCollapse

4.在el-menu中动态绑定属性值collapse

问题:在左侧菜单的展开与折叠中,文本和图标折叠了,但是菜单的长度并没有折叠,发现原因是菜单的长度给了一个固定的值,而实际上我们需要动态给定长度。如果菜单是展开的,长度是等于文本的长度+图标的长度。如果菜单是折叠的,长度是等于图标的长度。我们可以根据isCollapse的值进行判断,通过它的值为true或者是false,来给定不同的长度:

Vue.js的特点和优势是什么?

Vue.js 是一个用于构建用户界面的渐进式框架,具有以下特点和优势:

1. 组件化:Vue.js 鼓励使用组件化开发方式,将页面拆分成多个可重用的组件,提高代码复用性和可维护性。

2. 数据驱动:Vue.js 采用数据驱动的方式,通过数据的变化来驱动页面的更新,而无需直接操作 DOM。

3. 轻量级:Vue.js 的核心库体积较小,只有几十 KB,并且可以按需加载其他功能模块,减少了项目的打包体积。

4. 可组合性:Vue.js 的插件系统允许将其他库和工具集成到 Vue 项目中,增强了项目的功能和扩展性。

5. 虚拟 DOM:Vue.js 使用虚拟 DOM 来操作真实 DOM,提高了渲染性能和开发效率。

6. 快速开发:Vue.js 提供了丰富的 API 和工具,例如指令、过滤器、计算属性等,可以快速构建复杂的用户界面。

7. 良好的社区支持:Vue.js 拥有庞大的社区和丰富的文档,开发者可以方便地获取帮助和解决问题。

总的来说,Vue.js 是一个简单易用、功能强大、性能优秀的前端框架,适用于各种规模的项目开发。

第二节:Vue实例化

1.创建一个Vue实例

通过vue函数创建一个新的vue实例

一个 Vue 应用由一个通过new Vue创建的 根 Vue 实例 ,以及可嵌套的、可复用的组件树组成的。

我们先看看Vue基本的使用,至于组件我们后面详细的在来探讨

<divid="app"><!-- {{ 插值表达式,可以赋值 取值 三元 }} -->{{ msg }}</div><scriptsrc="./node_moles\vue\dist\vue.js"></script><script>// 引入vue后 会白给你一个Vue构造函数letvm=newVue({// 配置对象el:'#app',// 告诉vue能管理那个部分,使用的是querySelectordata:{// data中的数据会被vm所代理msg:'hello world',// 可以通过vm.msg取到对应的内容 ,也可以赋值      }})</script>

2.声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:

2.1. 关于{{}} 插值表达式

插值表达式,表达式,赋值运算,计算,三元表达式,但是尽量少在这里写逻辑计算

插值:

<!-- HTML ---><divid="app">{{ message }}</div><!-- JS ---><script>newVue({el:'#app',data:{messgae:'hello Vue!'}})</script>

我们已经成功创建了第一个 Vue 应用!看起来这跟渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。我们要怎么确认呢?

如果需要确定现在的数据是否已经和DOM建立了关联,形成响应式.

可以将js中的new Vue复制给一个全局变量vm.此时vm就是Vue实例化对象,未来可能会用它来搞很多事情,但是最常用到它的时候,是通过this关键字来使用它

varvm=newVue({el:'#app',data:{messgae:'hello Vue!'}})

然后在浏览器的js控制台中修改vm.message值,同时页面也会发生改变

在控制台中输入

vm.messge="你好,Vue"

2.2.使用 JavaScript 表达式

迄今为止,在我们的模板中,我们一直都只绑定简单的属性键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<divv-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。

示例:

<divid="app"><!-- 数字操作 --><p>{{ number + 2 }}</p><!-- 三目运算 --><p>{{ ok ? 'YES' : 'NO' }}</p><!-- 字符串翻转 --><p>{{ message.split('').reverse().join('')  }}</p></div><script>constvm=newVue({el:"#app",data:{message:'Hello World',number:10,ok:true,}})</script>

显示结果:

1.png

但是有个就是,每个绑定双大括号(Mustache语法)里面都只能包含 单个表达式

2.3. 关于data数据

vue关注的是数据变化,不需要在像以前一样关注DOM的变化

比如我想在2秒之后让页面发生变化,我们只需要在2秒后更改数据就可以了

varvm=newVue({el:'#app',data:{msg:'hello world'}})setTimeout(function(){vm.$data.msg="bye world"},2000)

关于实例介绍:

示例中vm是Vue的实例对象,

实例对象上有$data属性,其值就是选项对象中data属性值

选项对象就是在实例化Vue时传入的对象

data属性值是一个对象,因此$data也就是这个对象

当通过$data修改msg的值时,也就等于改data中的值, 对应是引用类型

因此示例的结果就是:

2秒后data数据中msg的值改变了, 又因为Vue是始终在关注着msg这个数据,一旦数据发生变化,就会触发Vue的响应式, 继而改变视图显示

2.4 再次理解MVVM模式

在上一节讲Vue的mvvm模式的时候就有提到,

Vue实例对象就是vm,data数据就是model,  页面显示的结果就是view

再来看一下mvvm的图

mvvm.jpg

这张图在配合刚才的示例, 我们就能很好的理解,当数据Model发生变化以后, Vue就可以通过Data Bindings了解到,然后使用新的数据去改变页面显示

至于Vue如何通过DOM Listeners监听页面的改变,来改变数据,这个我们之后讲到在说

3.实例上的方法

除了数据属性,Vue 选项对象中还暴露了一些有用的属性与方法。在通过实例对象使用选项对象的属性时,属性前面都需要带上前缀$,以便与用户定义的属性区分开来。例如:

vardata={a:1}varvm=newVue({el:'#example',data:data})vm.$data===data// => truevm.$el===document.getElementById('example')// => true

3.1. 实例上常用的属性和方法

vm.$attrs// 用户获取父组件传递给子组件的属性,(除props,class,style外)vm.$data// vm 上的数据vm.$watch// 监听vm.$el// 当前el元素vm.$set// 后加的属性实现响应式vm.$options// vm 配置 上的 所有属性vm.$nextTick(()=>{})// 异步方法,等待渲染dom完成后来获取vmvm.$refs// 获取dom元素或者组件实例的引用

其实我们可以创建一个Vue实例,然后在控制台上打印这个实例对象,你会看到很多的属性和方法

constvm=newVue({el:"#app",})

在控制台输入vm

显示结果:

实例属性.png

这里面很多属性,我们暂时不用去关心他,因为随着学习的深入,慢慢都会学习到的.

4.实例化多个vue

我们可以在页面上同时实例化多个Vue, 不同的实例接管页面上不同的区域.

看下如下的示例:

##  <h1>实例化多个Vue对象</h1><divid="app-one"><h2>{{ title }}</h2><p>{{ greet }}</p></div><divid="app-two"><h2>{{ title }}</h2><p>{{ greet }}</p><buttonv-on:click="changeTitle">点击改变app-one的h2的内容</button></div><script>//  Vue实例varone=newVue({el:'#app-one',data:{title:" vue-app-one的内容"},computed:{greet:function(){return"Hello App One"}}})//  Vue实例vartwo=newVue({el:'#app-two',data:{title:" vue-app-two的内容"},methods:{changeTitle:function(){one.title="app-one的内容发生改变了"}},computed:{greet:function(){return"Hello App two"}}})</script>

Vue事件和方法还没有讲到, 先做一个了解即可:

示例分析:

两个实例one和two接管了不同的DOM元素,

点击按钮是在two实例接管的DOM元素中,

所以,当你点击时,只会触发two实例中的方法, 也只会改变two实例中的数据

那么问题来了?

能否在two实例中修改one实例中的数据呢,?

答案当然是可以的啦, 因为变量one是全局变量,

在two实例化中,就可以通过one变量得到第一个Vue实例化对象,

然后就可以通过实例化对象修改数据,这个可以自己尝试写写.

5. Vue 操作DOM元素

虽然Vue是数据驱动的,但是有的时候我们就需要自己手动的获取到DOM元素,对DOM元素进行操作,那么该如何处理呢,

操作DOM元素:

在需要操作的DOM元素中使用ref属性,

ref属性的值是自己随便定义的名字

通过Vue实例的$refs属性获取操作dom元素

<divid="app"><divref="wuwei">无为</div></div><script>varvm=newVue({// 根实例el:'#app',data:{},mounted(){//dom元素中有多个一样的ref,dom如果不是通过v-for循环出来的,只能获取一个// 如果是循环出来的,可以获取多个,获取的是一个数组console.log(this.$refs.wuwei)}});</script>

关于示例中$refs属性的解释:

因为可以在多个DOM元素上使用ref.

所以$refs属性获取的是所有具有ref属性的DOM元素的集.

因此要想操作确定的DOM元素就需要在通过当初的ref值获取.

简而言之: 就是ref在dom元素上通过this.$refs.自定义名字是获取dom元素

当获取到DOM元素后,然后就可以采用原生的JavaScript对DOM进行操作

注意:

Vue 接管的DOM元素之外的元素使用ref是获取不了的,值是undefined

Vue.JS的自定义指令应该如何使用

这次给大家带来Vue.JS的自定义指令应该如何使用,使用Vue.JS的自定义指令的注意事项有哪些,下面就是实战案例,一起来看一下。

Vue.js 允许你注册自定义指令,实质上是让你教 Vue 一些新技巧:怎样将数据的变化映射到 DOM 的行为。你可以使用Vue.directive(id, definition)的方法传入指令id和定义对象来注册一个全局自定义指令。定义对象需要提供一些钩子函数(全部可选):

bind: 仅调用一次,当指令第一次绑定元素的时候。

update: 第一次是紧跟在 bind 之后调用,获得的参数是绑定的初始值;以后每当绑定的值发生变化就会被调用,获得新值与旧值两个参数。

unbind:仅调用一次,当指令解绑元素的时候。

例子:

Vue.directive('my-directive', { bind: function () { // 做绑定的准备工作

// 比如添加事件,或是其他只需要执行一次的复杂操作

}, update: function (newValue, oldValue) { // 根据获得的新值执行对应的更新

// 对于初始值也会被调用一次

}, unbind: function () { // 做清理工作

// 比如移除在 bind() 中添加的事件

}

})一旦注册好自定义指令,你就可以在 Vue.js 模板中像这样来使用它(需要添加 Vue.js 的指令前缀,默认为 v-):

<div v-my-directive="someValue"></div>如果你只需要 update 函数,你可以只传入一个函数,而不用传定义对象:

Vue.directive('my-directive', function (value) { // 这个函数会被作为 update() 函数使用})所有的钩子函数会被复制到实际的指令对象中,而这个指令对象将会是所有钩子函数的this

上下文环境。指令对象上暴露了一些有用的公开属性:

el: 指令绑定的元素

vm: 拥有该指令的上下文 ViewModel

expression: 指令的表达式,不包括参数和过滤器

arg: 指令的参数

raw: 未被解析的原始表达式

name: 不带前缀的指令名

这些属性是只读的,不要修改它们。你也可以给指令对象附加自定义的属性,但是注意不要覆盖已有的内部属性。

使用指令对象属性的示例:

<!DOCTYPE html><html><head lang="en">

<meta charset="UTF-8">

<title></title>

<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.12.16/vue.min.js"></script></head><body><div id="demo" v-demo-directive="LightSlateGray : msg"></div><script>

Vue.directive('demoDirective', {

bind: function () { this.el.style.color = '#fff'

this.el.style.backgroundColor = this.arg

},

update: function (value) { this.el.innerHTML = 'name - ' + this.name + '<br>' + 'raw - ' + this.raw + '<br>' + 'expression - ' + this.expression + '<br>' + 'argument - ' + this.arg + '<br>' + 'value - ' + value

}

}); var demo = new Vue({

el: '#demo',

data: {

msg: 'hello!'

}

})</script></body></html>多重从句

同一个特性内部,逗号分隔的多个从句将被绑定为多个指令实例。在下面的例子中,指令会被创建和调用两次:

<div v-demo="color: 'white', text: 'hello!'"></div>如果想要用单个指令实例处理多个参数,可以利用字面量对象作为表达式:

<div v-demo="{color: 'white', text: 'hello!'}"></div>

Vue.directive('demo', function (value) { console.log(value) // Object {color: 'white', text: 'hello!'}})字面指令

如果在创建自定义指令的时候传入 isLiteral: true ,那么特性值就会被看成直接字符串,并被赋值给该指令的 expression。字面指令不会试图建立数据监视。

例子:

<div v-literal-dir="foo"></div>

Vue.directive('literal-dir', { isLiteral: true, bind: function () { console.log(this.expression) // 'foo'

}

})动态字面指令

然而,在字面指令含有 Mustache 标签的情形下,指令的行为如下:

指令实例会有一个属性,this._isDynamicLiteral被设为true;

如果没有提供update函数,Mustache 表达式只会被求值一次,并将该值赋给this.expression。不会对表达式进行数据监视。

如果提供了update函数,指令将会为表达式建立一个数据监视,并且在计算结果变化的时候调用update。

双向指令

如果你的指令想向 Vue 实例写回数据,你需要传入 twoWay: true 。该选项允许在指令中使用 this.set(value)。

Vue.directive('example', { twoWay: true, bind: function () { this.handler = function () { // 把数据写回 vm

// 如果指令这样绑定 v-example="a.b.c",

// 这里将会给 `vm.a.b.c` 赋值

this.set(this.el.value)

}.bind(this) this.el.addEventListener('input', this.handler)

}, unbind: function () { this.el.removeEventListener('input', this.handler)

}

})内联语句

传入 acceptStatement: true 可以让自定义指令像 v-on 一样接受内联语句:

<div v-my-directive="a++"></div>

Vue.directive('my-directive', { acceptStatement: true, update: function (fn) { // the passed in value is a function which when called,

// will execute the "a++" statement in the owner vm's

// scope.

}

})但是请明智地使用此功能,因为通常我们希望避免在模板中产生副作用。

深度数据观察

如果你希望在一个对象上使用自定义指令,并且当对象内部嵌套的属性发生变化时也能够触发指令的 update 函数,那么你就要在指令的定义中传入 deep: true。

<div v-my-directive="obj"></div>

Vue.directive('my-directive', { deep: true, update: function (obj) { // 当 obj 内部嵌套的属性变化时也会调用此函数

}

})指令优先级

你可以选择给指令提供一个优先级数(默认是0)。同一个元素上优先级越高的指令会比其他的指令处理得早一些。优先级一样的指令会按照其在元素特性列表中出现的顺序依次处理,但是不能保证这个顺序在不同的浏览器中是一致的。

通常来说作为用户,你并不需要关心内置指令的优先级,如果你感兴趣的话,可以参阅源码。逻辑控制指令 v-repeat, v-if 被视为 “终结性指令”,它们在编译过程中始终拥有最高的优先级。

元素指令

有时候,我们可能想要我们的指令可以以自定义元素的形式被使用,而不是作为一个特性。这与 Angular 的 E 类指令的概念非常相似。元素指令可以看做是一个轻量的自定义组件(后面会讲到)。你可以像下面这样注册一个自定义的元素指令:

Vue.elementDirective('my-directive', { // 和普通指令的 API 一致

bind: function () { // 对 this.el 进行操作...

}

})使用时我们不再用这样的写法:

<div v-my-directive></div>而是写成:

<my-directive></my-directive>元素指令不能接受参数或表达式,但是它可以读取元素的特性,来决定它的行为。与通常的指令有个很大的不同,元素指令是终结性的,这意味着,一旦 Vue 遇到一个元素指令,它将跳过对该元素和其子元素的编译 - 即只有该元素指令本身可以操作该元素及其子元素。

相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!

相关阅读:

怎样在Android开发中与js进行交互

一个用Vue.js 2.0+做出的石墨文档样式的富文本编辑器

用Video.js实现H5直播界面

红星娱乐还为您提供以下相关内容希望对您有帮助:

Vue.js怎样把递归组件构建为树形菜单

在Vue.js中一个递归组件调用的是其本身,如:Vue.component('recursive-component', { template: `&lt;!--Invoking myself!--&gt; &lt;recursive-component&gt;&lt;/recursive-component&gt; });递归组件常用于在blog上显示注释、嵌套的菜单...

Vue.js+Element-UI实现点击按钮控制左侧菜单折叠与展开

1.实现一个按钮,2.在data中定义一个数据collapse 3.实现方法toggleCollapse 4.在el-menu中动态绑定属性值collapse 问题:在左侧菜单的展开与折叠中,文本和图标折叠了,但是菜单的长度并没有折叠,发现原因是菜单的长度给了...

Vue.JS的自定义指令应该如何使用

unbind: function () { // 做清理工作 // 比如移除在 bind() 中添加的事件监听器 }})一旦注册好自定义指令,你就可以在 Vue.js 模板中像这样来使用它(需要添加 Vue.js 的指令前缀,默认为 v-):如果你只需要 ...

Vue.js起手式+Vue小作品实战

Vue.js是一种MVVM框架,其中html是view层,js是model层,通过vue.js(使用v-model这个指令)完成中间的底层逻辑,实现绑定的效果。改变其中的任何一层,另外一层都会改变;解读:【demo】【TIP】 Vue实例所代理data对象上...

vue.js如何将echarts封装为组件一键使用详解

前言本文主要给大家介绍了关于vue.js将echarts封装为组件一键使用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。说明做项目的时候为了让数据展示的更加直观,总会用到图表相关的控件,而说到...

认识Vue.js+Vue.js的优缺点+和与其他前端框架的区别

Vue.js在模板中提供了指令,过滤器等,可以非常方便,快捷地操作DOM。如何使用Vue.js?1.安装(1)script如果专案直接通过script载入CDN档案,程式码示例如下:(2)npm如果专案给予npm管理依赖,则可以使用npm来安装Vue,执行如下命令:$npmivue-...

超详细!Vuex手把手教程

先在模块 moduleB.js 中添加 namespaced: true 在 store 的 index.js 中 如果在组件中使用命名空间,需要带上空间名称, mapState , mapGetters , mapMutations , mapActions 用法一样。如果你希望使用全局的 state ...

Vue第一节:Vue.js框架是什么,为什么选择它

如果你还在用jquery频繁操作你的DOM来更新页面的话,那么,你可以用Vue.js来解放你的DOM操作了。如果你的专案中有多个部分是相同的,并可以封装成一个元件,那么,你可以试试用Vue.js。此外,Vue.js的核心实现中使用了ES5...

在vuejs中使用v-show不起作用的原因有哪些

这次给大家带来在vuejs中使用v-show不起作用的原因有哪些,在vuejs中使用v-show的注意事项有哪些,下面就是实战案例,一起来看一下。1.官网概念描述v-if 是'真正的'条件渲染,因为它会确保在切换过程中条件块内的事件监听...

visual studio为什么vue引入vue.js后不能实现效果?

1. 语法错误:Vue.js 是一个 JavaScript 框架,它使用特定的语法规则和指令。如果在 Vue.js 代码中存在语法错误,可能会导致无法实现预期的效果。2. 缺少依赖:Vue.js 依赖于其他一些库和插件,如 Vue Router、Vuex 等。

Top