当前位置： 首页 > Web前端 > vue.js

Vue指令

时间：2023-03-31 16:05:41 vue.js

内容处理v-oncev-textv-htmlv-once：让元素内部的插值表达式只生效一次{{xxxxx}}

v-text:用指定的纯文本数据替换元素的全部内容。插值表达式的区别：插值表达式用于动态设置元素，而v-text直接将纯文本内容设置为指定数据，会覆盖旧元素只会显示纯文本，添加标签元素不会生成标签元素这个内容会被覆盖

newVue({el:"#app",data:{content:"我是新内容"//纯文本内容:"spancontent"//非纯文本不会生成span标签}})v-html:将元素的整体内容替换为类似的指定HTML文本为v-text，但非纯文本可以转换成对应的元素这部分的内容会被覆盖

newVue({el:"#app",data:{content:"我是新内容"//纯文本okcontent:"spancontent"//非纯文本生成spantags}})属性绑定v-bind指令：v-bindinstruction用于动态绑定HTML属性ClassbindingStylebindingcontentbindingmethod只能处理content，如果Label属性通过bindingattributes处理content

content

//简写
newVue({el:"#app",data:{content_title:"我是title属性内容",demo:"hello"}})v-bind允许表达式，类似于插值表达式，不允许语句内容，错误Content

//ok如果需要一次性绑定多个属性，也可以绑定对象内容

newVue({el:"#app",data:{attrObj:{id:"box",//id属性t??itle:"我是title",//title属性class:"clsbox",//class属性'data-title':"Thisisthecontent"//自定义属性}}})类绑定类是一个HTML属性，可以通过v-bind绑定，可以和class属性共存content

newVue({el:"#app",data:{clsbox:"x"//此时添加了两个类，一个"a"，一个"x"，clsbox是动态绑定的}})注意element的错误方式绑定多个动态类名content

//错误content

//oknewVue({el:"#app",data:{clsbox:"xyz"//多动态名称不常用//clsbox1:"y"//clsbox2:"z"}})三个元素动态操作添加classcontent

//oknewVue({el:"#app",data:{bol:true,clsbox1:"y",clsbox2:"z"}})如果类名既有条件判断又同时有多个类名，组合起来比较复杂。对于类绑定，Vue.js中也提供了特殊处理。对象表示，key代表类名，value代表key是否有效。对于带有横线的类名，用引号括起来content

newVue({el:"#app",data:{isB:true,isC:false}})数组符号，对象符号的扩展Content

newVue({el:"#app",data:{isB:false,//此时有一个class的三个属性-dzc:"z"}})样式绑定style是一个HTML属性，可以通过v-bind绑定，可以和style属性共存。不建议写在行内，不易维护。建议从数据中获取，注意加上单位px等，对于同一个属性，框架会优先取绑定属性的值content

newVue({el:"#app",data:{styleObj:{width:'100px',//覆盖之前设置的50px宽度height:'100px',border:'1pxsolid#ccc',backgroundColor:'red',//驼峰式'font-size':'30px'//非驼峰式}}})当我们想给一个元素绑定多个样式对象时，我们可以将其设置为数组content

newVue({el:"#app",data:{styleObj1:{...},styleObj2:{...}}})常用于公共样式和个别样式的组合渲染指令v-forv-showv-ifv-for指令用于遍历数据渲染结构，常用的数组和对象都可以遍历。需要多次创建哪个元素，在遍历参数时向哪个元素添加指令：index为索引，key为key
    {{item}}//数组
    {{val}}//对象
newVue({el:"#app",data:{arr:["1","asd",2],obj:{content1:"inside1",content2:"内在2"}}})数值遍历：适合在没有基础数据的情况下凭空创建数值元素
    {{item}}//1,2,3,4,5
注意事项使用v-for时，应该始终指定唯一的key属性key属性被v-bind绑定了一个指定的属性，是标识每个项目的唯一值。for循环中的索引下标不能作为键，如果属性值不唯一（不能作为键）。您可以将数据更改为对象并添加唯一的键属性。为什么需要添加密钥？vue.js在渲染结构时，为了提高执行效率，只会对结构相同的内容进行修复操作，不会进行移除和替换。因此用户输入被保留而不是被删除。如图所示，最初文本1->输入框1一一对应。控制台执行vm.arr.reverse()时，vue修改而不是替换，会导致结构和内容不一致正确写法
    {{item}}
通过v-show命令用于控制元素的显示和隐藏，适用于频繁显示和隐藏元素切换显示和隐藏该元素显示

该元素隐藏

11">该元素隐藏

该元素可见bol值

注意：模板不能使用v-show命令，不是元素v-if命令用于根据条件控制元素的创建和删除。不适合频繁的显示和隐藏，因为它是移除和创建的，这是一个耗性能的操作。不会创建该元素

将创建该元素

Thiselementwillnotbecreated

//最后一个进入的这一个不会进入Thiselementwillnotbecreated

注意：如图所示使用v-if将不同的key绑定到相同类型的元素上，在bool=true时添加v-if和v-else，代码会运行到v-if，然后在其中输入123输入框。修改bool，当bool=false时，代码会执行v-else中的代码，输入框中的123也被第二个输入框等保留，样式一样，只是不同功能元素切换时和登录后，输入框里的判断逻辑肯定是不一样的。当vue修补相同的结构时也会出现问题，而不是删除旧的，创建一个新的正确方法，添加键绑定用户输入框：

邮箱输入框：

出于性能原因，您应该避免将v-if和v-for应用于同一标签。例如，如果有一个列表，它必须通过指定数据v-for循环来创建，而列表中的每一项v-for的创建和移除也取决于一定的条件。v-for的优先级会更高。如果此时v-if=false，v-for执行是没有意义的，会消耗不必要的性能。方法，创建列表循环的v-for操作赋值给子元素li，v-if条件判断赋值给父元素ul。这个函数的执行效率很低
    {{item}}
newVue({el:"#app",data:{items:{content1:"inside1",content2:"Inner2",content3:"Inner3",}}})修改后//放在父元素中，为false时，内部v-for不会执行{{item}}其他修改方法，既然遍历的循环对象有判断，那么我们把判断写在方法中，即对遍历的数据进行处理在遍历
    {{item}}
事件处理v-onv-on指令用于元素事件绑定当事件处理程序较少时，可以直接写在inline，尽量不要，不好维护，可以指定methods函数处理事件

{{content}}

Buttonbutton//简写button//methods功能设置newVue({el:"#app",data:{content:"defaultcontent"},methods:{fn(){this.content='newcontent'}}})一次设置了事件处理程序，可以从接收参数中的事件对象event访问它。newVue({el:"#app",data:{content:"defaultcontent"},methods:{fn(event){//接收事件对象console.log(event)}}})可以在视图中通过$event访问事件对象。如果传参的时候也想访问事件对象，可以在方法中传入$event

{{content}}

Button//当传参想访问事件对象时newVue({el:"#app",data:{content:"defaultcontent"},methods:{fn(content,event){console.log(content)console.log(event)}}})表单输入绑定v-modelv-model指令用于输入元素,单选按钮绑定单选按钮的双向数据绑定方法如下：

{{value3}}

选项一选项二newVue({el:"#app",data:{value3:""//选择哪一个，哪个input的值会赋值给value3}})checkBoxbinding复选框绑定分为单选项和多选项，写法不同单选框应用，可以勾选或者unchecked

单个复选框：{{value4}}

Options

多个复选框：{{value5}}

选项一Option2singlecheck和multiplecheck的区别在于点击singlecheck时，返回true/false表示是否勾选，value4的值不会返回但是value4还是需要设置的，如果处理是表单提交，提交的值为value4multi-check是一个数组，存储每个复选框的value5值，以及value5值必须不同newvue({el:"#app",data:{value4:"",//单选value5:[]//多选}})选择框绑定选择框绑定分为单选绑定和多选绑定这两种情况，写法是不一样的。

单选select:{{value6}}

//显示option的值//v-model绑定给selectPleasechoose//默认选项，无意义选项一选项二选项三

多选select:{{value7}}

选项1选项2选项3varvm=newVue({data:{value6:'',value7:[]},}).$mount("#app")按住ctrl选择多个v-modelSummaryinput输入框：绑定字符串值。textarea输入框：绑定字符串值。radio：绑定字符串值。复选框：单绑定布尔值，多绑定数组。select：单选绑定字符串，多选绑定数组。

Vue指令相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。