Vue内置指令的使用

v-model&＃xff08;数据绑定&＃xff09;

v-model常用于表单数据的双向绑定&＃xff0c;它本质上是一个语法糖。它主要的有两种应用&＃xff1a;

• 在文本框、多行文本、input的下拉框、单选按钮、复选框中的应用
  
  
  
  
  

  {{ test}}

  
  
  


  下拉框&＃xff1a;
  PhtotshopprogrammingIllustrationSelected: {{ selected }}

  


  单选按钮&＃xff1a;
  

男



女



其他


Picked: {{ picked }}

  


  复选框&＃xff1a;
  

选项一

选项二

选项三


Checked names: {{ checkedNames }}

  



• 也可以和.lazy、.trim、.number这些修饰符一起使用

  .lazy

  


  .number&＃xff0c;自动将用户的输入值转为数值类型

  


  .trim&＃xff0c;自动过滤用户输入的首尾空白字符

  


for&＃xff08;循环&＃xff09;

格式&＃xff1a; v-for&＃61;“字段名 in(of) 数组 or json

v-show 和 v-if&＃xff08;显示与隐藏&＃xff09;、v-else-if、v-else

v-show 通过值来判断是否加载并显示&＃xff1b;

v-if 通过值来判断是否加载&＃xff1b;

v-else-if &＃xff0c;充当 v-if 的“else-if 块”&＃xff0c;可以连续使用&＃xff1b;

v-else &＃xff0c;表示 v-if 的“else 块” &＃xff0c;必须连用&＃xff0c;否则无效不会识别。

v-show 和 v-if两者区别在于&＃xff1a;

• v-if 控制元素隐藏的时候&＃xff0c;它会删除dom节点&＃xff0c;而v-show并不会&＃xff0c;v-if还可以和v-else-if 和 v-else&＃xff0c;这两者是必须和v-if连用&＃xff0c;不能单独使用。
• 一般来说&＃xff0c; v-if 有更高的切换开销&＃xff0c;而 v-show 有更高的初始渲染开销。
  如果需要非常频繁地切换&＃xff0c;则使用 v-show 较好&＃xff1b;如果在运行时条件不太可能改变&＃xff0c;则使用 v-if 较好。

v-show&＃xff1a;

v-if&＃xff1a;

v-else-if&＃xff1a;

v-else&＃xff1a;

v-bind&＃xff08;动态绑定&＃xff09;

及时对页面的数据进行更新修改。

• v-bind:id 简写为 :id
• v-bind:disabled 简写为 :disabled
• v-bind:href 简写为 :href
• v-on:click 简写为 &＃64;click

v-on&＃xff08;绑定事件&＃xff09;

指令绑定事件后&＃xff0c;就会监听相应的事件。

v-on:click&＃xff1a;

v-on:keyup&＃xff1a;先显示值&＃xff0c;再弹出层

v-on:keydown&＃xff1a;在框中输入先弹出层&＃xff0c;再显示输入的值

v-text 和 v-html&＃xff08;解析文本&＃xff09;

v-text&＃xff1a;

dangerHTML: &＃39;123&＃39;


不管是什么&＃xff0c;全都解析成文本&＃xff0c;里面的HTML标签也全部转义掉&＃xff1a;

v-html&＃xff1a;

dangerHTML: &＃39;123&＃39;


v-bind:class

• 对象&＃xff1a;{ red:ifAbledRed }
  
• 三目运算符&＃xff1a;ifAbledRed ? “red” : “blue”
• 数组&＃xff1a;[{red:“ifAbledRed”},{blue:“ifAbledBlue”}]

v-once

只渲染一次&＃xff0c;不再进行渲染。

{{ message }}

v-cloak&＃xff08;防止闪烁&＃xff09;

v-cloak一般是配合 [v-cloak] {display: none; }css 一起使用的。

{{ message }}

下面是一个闪烁的截图代码&＃xff0c;当我们给如下红色代码块外加一个setTimeout时间延迟时&＃xff0c;然后再去执行我们会发现在网页上什么都没有&＃xff0c;会有一个时间的停留&＃xff0c;因此提供了一个v-cloak的方法来解决这个问题。

v-pre

原位输出标签内部的元素。