vue.js最常用命令及方法归纳总结

以你之姓@ 2022-02-20 00:55 224阅读 0赞

1.创建一个vue实例化对象：想要使用vue，必须先声明一个新的vue对象，并创建对应的vue实例化对象区域，代码示例：  
![在这里插入图片描述][20190412101529809.png]  
2.v-model数据双向绑定指令：在日常表单，输入框等位置，想要获取数据及提交表单时，需要用到v-model进行对应html元素的数据监视，当数据框数据发生改变，绑定v-model之后，数据会动态传入设定的参数里。代码示例：

![在这里插入图片描述][20190412101603321.png]  
3.v-if数据真假判断方法：v-if常用语判断表达式的真假，并根据真假结果决定显示或者隐藏该html元素，同时该隐藏是html元素将从代码中直接删除。代码示例：  
![在这里插入图片描述][2019041210163352.png]  
4.v-show数据真假判断方法：v-show与v-if用法类似，都根据判断结果决定html元素是否显示，不过v-show为假时，不是将元素完全删除，而是通过display:none将元素隐藏。  
5.v-for数据循序遍历方法：v-for在日常工作使用中及其广泛，如常见的列表数据获取，写法规则为：  
![在这里插入图片描述][20190412101744503.png]  
6.v-text与v-html数据替换方法：v-text及v-html方法同为对html元素及标签内容进行覆盖，不过v-text只覆盖文本内容，而v-html可以直接写入html标签。代码示例：  
![在这里插入图片描述][20190412101815771.png]  
7.v-bind属性绑定方法：为html标签绑定新的属性，类名方法，url地址信息等(注：常用“：”简写)；  
![在这里插入图片描述][20190412101919686.png]  
8.v-on标签事件绑定方法，如点击事件，鼠标滑动事件等（注：常用“@”简写）。v-on可以绑定任何属性，包括鼠标点击，鼠标滑动，键盘按下及抬起等任何操作方法，同时v-on还可以添加事件修饰符，用来实现组合按键的效果。代码示例：  
![在这里插入图片描述][20190412101956750.png]

[20190412101529809.png]: /images/20220220/04e30ba635e743089b1634a8de33857e.png
[20190412101603321.png]: /images/20220220/7d4ef861a4da4c948a4dcf1db52d83ea.png
[2019041210163352.png]: /images/20220220/42e554d2bdf14f4a8abfdeb1ca9a92d0.png
[20190412101744503.png]: /images/20220220/993c2492c16e4252bbab492f722372d4.png
[20190412101815771.png]: /images/20220220/2db6a0fb277148a3924b59f30a350674.png
[20190412101919686.png]: /images/20220220/a8b200c6ff7a4b3caff69c6fe496f275.png
[20190412101956750.png]: /images/20220220/ba4f63fed39b42e18bd8cb32278de0d2.png