网站建设之vue.js常见命令及方法归纳总结

时间: 2018-11-20 17:34:09 分类: 网站代码浏览次数: 321

在网站建设，项目开发中，vue.js使用率越来越高，在网站制作人员实际工作中，vue技术的使用也成为衡量一个合格的前端工程师的重要标准，那么，在日常工作中，有哪些常用的vue操作...

在网站建设，项目开发中，vue.js使用率越来越高，在网站制作人员实际工作中，vue技术的使用也成为衡量一个合格的前端工程师的重要标准，那么，在日常工作中，有哪些常用的vue操作指令呢？

具体vue.js在使用中常用的命令及方法如下:
1.创建一个vue实例化对象：
想要使用vue，必须先声明一个新的vue对象，并创建对应的vue实例化对象区域，代码示例：var vm=new Vue({el:"#app"})

2.v-model数据双向绑定指令：
在日常表单，输入框等位置，想要获取数据及提交表单时，需要用到v-model进行对应html元素的数据监视，当数据框数据发生改变，绑定v-model之后，数据会动态传入设定的参数里。代码示例：

3.v-if数据真假判断方法：
v-if常用语判断表达式的真假，并根据真假结果决定显示或者隐藏该html元素，同时该隐藏是html元素将从代码中直接删除。代码示例：

如果是真，我就显示，

4.v-show数据真假判断方法：
v-show与v-if用法类似，都根据判断结果决定html元素是否显示，不过v-show为假时，不是将元素完全删除，而是通过display:none将元素隐藏。代码示例：

如果是真，我就显示，

5.v-for数据循序遍历方法：
v-for在日常工作使用中及其广泛，如常见的列表数据获取，写法规则为：

我是结果，我显示的是items里每一条item结果

6.v-text与v-html数据替换方法：
v-text及v-html方法同为对html元素及标签内容进行覆盖，不过v-text只覆盖文本内容，而v-html可以直接写入html标签。代码示例：

标签内原来内容

7.v-bind为html标签绑定新的属性，类名方法，url地址信息等(注：常用“：”简写)；

vue通过数据绑定，可以随时随地将任何从后台获取到的数据与html元素进行绑定，包括跳转地址，类型，属性样式等。且通常情况下,v-bind简写为":"(冒号)；代码示例：以及缩写

8.v-on标签事件绑定方法，如点击事件，鼠标滑动事件等（注：常用“@”简写）
v-on可以绑定任何属性，包括鼠标点击，鼠标划动，键盘按下及抬起等任何操作方法，同时v-on还可以添加事件修饰符，用来实现组合按键的效果。代码示例：

在日常网站建设，项目开发中，我们常用的vue指令也就是这些，最基础的才是最实用的知识，希望对大家有帮助。全栈网络专业从事郑州网站建设，欢迎大家随时来电咨询。

未经允许不得转载：郑州网站建设|郑州网站制作|荥阳网站建设|巩义网站建设|网站优化-全栈网络