Vue学习之常用指令实例详解

2023-08-03 14:36:14 65

本文实例讲述了Vue常用指令。分享给大家供大家参考，具体如下：

1、创建一个vue实例

vue的一个特点就是数据驱动界面，一旦对js中的数据进行修改，界面中用到数据的地方也会立马做出更改。为了对界面进行操纵，需要先获取到界面的标签元素，并实例化一个vue实例。

例如在HTML创建一个div：



	{{msg}}

在js中将其实例化为vue对象：

letapp=newVue({
el:'#app',//标签的类名、id，用于获取元素
//以键值对的形式存放用到的数据成员
data:{
msg:'显示的内容'
},
//包含要用到的函数方法
methods:{
}
});

这样js中msg的内容就会在p标签内显示出来。

2、vue常用指令

1、v-model:将组件与变量进行双向绑定，当组件数据修改时，变量会随之改变。它后面可加修饰符，例如.lazy，只有在标签中的值发生改变时才同步到变量，.trim过滤用户输入中的空格。

2、v-once:不允许修改数据，例如HTML中有如下三个标签：


{{msg}}

	





	{{msg}}

在input框内输入内容后，会传到msg变量中，第二个p标签内显示的信息会随着msg发生变化，而第一个带有v-once的p标签则只会显示msg的初始值，不会随之变化。

3、v-if="表达式"，根据表达式的结果来判断，是true则渲染元素，false则将元素注释掉

4、v-show与v-if类似，true就渲染，但是false并不是注释掉，而是通过display:none;来将元素隐藏，如果需要来回切换，使用v-show更好。例如：

显示内容

	



注释内容

	



v-show隐藏

令show:true,hide:false，结果如下：

5、v-else、v-else-if与v-if连在一起使用构成逻辑判断，根据返回值决定是否显示，不可以单独或者分开使用，例如：


	请输入分值：


90">优秀

	



80">良好

	



60">中等

	



不及格

测试结果为：

6、v-for用于遍历元素，使用格式为v-for=" data-ke-src="https:></p><p>6、v-for用于遍历元素，使用格式为v-for="(值,键)in遍历内容"，其遍历的内容可以是数组、对象、字符串，例如在js的data中有一个person对象，person:{name:'tony',age:15,sex:'男'}，将其内容在页面遍历输出：


{{key+':'+value}}

生成结果如下：

7、v-text：向标签内注入数据，并且覆盖标签内的其他内容

8、v-html：向标签内覆盖注入HTML内容作为其子元素。例如：

标签内原来内容

结果插入一个子div并将覆盖原内容：

9、v-bind：给标签绑定属性、类、样式等，可以缩写为冒号，例如：


... 
...

由于vue的界面元素都是由数据驱动的，js代码从服务器获得的属性、样式等数据需要通过绑定加到HTML界面元素上，通过绑定可以更为灵活地选择要添加属性的元素。Vue并不是直接操纵元素的class，而是通过绑定一个数据到class上，然后通过数据驱动class的有无，从而改变页面的显示，这充分显示了vue数据驱动的特点。

例如给上面person对象中key为'name'的那一行信息绑定一个active类使其高亮显示：



{{key+':'+value}}

结果：

也可以使用如下方法来绑定一个类名，页面会根据变量isActive与hasError的true或false来确定是否绑定active与text-danger类，甚至可以将active设为计算属性，运算后返回true/false。

注意：绑定的属性可以用驼峰命名法或使用短横线来连接，但使用短横线要用引号引起来

10、v-on:给标签绑定函数，可以缩写为@，例如绑定一个点击函数


	{{msg}}

change

在Vue的methods中实现changeContent函数：

letapp=newVue({
el:'#app',
data:{
msg:'第一次输入信息',
},
methods:{
changeContent(){
this.msg="修改后的输入信息";
}
}
});

原页面与点击后：

Vue.js为v-on提供了事件修饰符。修饰符是由.开头的指令后缀来表示的，用于对事件进行约束。例如：


 

 

...

...

除了点击事件外，还有按键事件，例如按下键盘码为13的按钮时触发：

为了方便使用vue将一些常用按键重命名，可以使用事件修饰符来使用，包括：.enter、.delete、.tab、.space、.esc、.up、.down、.right、.left等，也可以自定义：

Vue.config.keyCodes.f1=112;

希望本文所述对大家vue.js程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Vue学习之常用指令实例详解

1、创建一个vue实例

2、vue常用指令

热门推荐

随机推荐