Vue语法和标签的入门使用教程

更新时间：2022年08月06日 08:25:48 作者：小威要向诸佬学习呀

Vue是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue语法和标签使用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

前言：

最近两周一直在忙于公司业务的学习，一直没有时间进行总结，作为后端开发人员来说，需要了解一些前端的知识，因此今天把最近复习的Vue的知识总结了一下，希望能加深总结的印象以及帮助到各位大佬。

设置代码片段

首先从比较基本的设置开始说起。

所谓的设置代码片段，就是可以方便我们的开发。具体的设置，点击文件，首选项，选择配置用户代码片段，新建全局代码片段文件，将下面的代码复制到大括号内即可使用。

{
 "vue html": {
 "scope": "html",
 "prefix": "vuehtml",
 "body": [
 "<!DOCTYPE html>",
 "<html lang=\"en\">",
 "",
 "<head>",
 "    <meta charset=\"UTF-8\">",
 "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
 "    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
 "    <title>Document</title>",
 "</head>",
 "",
 "<body>",
 "    <div id=\"app\">",
 "",
 "    </div>",
 "    <script src=\"vue.min.js\"></script>",
 "    <script>",
 "        new Vue({",
 "            el: '#app',",
 "            data: {",
 "                $1",
 "            }",
 "        })",
 "    </script>",
 "</body>",
 "",
 "</html>",
 ],
 "description": "my vue template in html"
 }
}

设置完成后，新建HTML文件，输入vuehtml即可使用

Vue的指令

v-bind指令

v-bind是单向数据绑定，这个指令一般用在标签属性里面，用来获取值，接下来用案例解释

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
      <h1 v-bind:title="message">
         {{question}}
      </h1>
      <!--简写-->
      <h2 :title="message">
      {{content}}
      </h2>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                question:"现在是几点来着?",
                message:"现在是:" + new Date().toLocaleString()
            }
        })
    </script>
</body>
</html>

输出

v-model指令

v-model指令是双向绑定，当一边发生比变化时，另一边也会发生变化。相应的测试代码如下，感兴趣的小伙伴儿们可以测试一些哦。

<body>
    <div id="app">
      <input type="text" v-bind:value="key.value"/>
      <input type="text" v-model="key.value"/>
      <p>{{key.value}}</p>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data:{
                key:{
                  value:"xiaowei"
                }
            }
        })
    </script>
</body>

v-on标签

v-on标签用于绑定事件，v-on:click表示处理鼠标点击的事件，事件调用的方法应写在methods节点中。案例如下:

<body>
    <div id="app">
      <button v-on:click="query1()">测试相貌</button>
      <!--第二种写法-->
      <button　＠click="query2()">测试相貌2</button>

    </div>
  
    <script>
        new Vue({
            el: '#app',
            data: {
               key:{
                 value:"xiaowei"
               }
           },
           methods:{
            query1(){
           alert("你是帅哥")
            },
            query2(){
               alert("你是靓仔")
               }
           }

            }
        )
    </script>
</body>

修饰符

修饰符 (Modifiers) 是以“.”指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

即阻止事件原本的默认行为，案例测试如下：

<body>
    <div id="app">
<form action="save" v-on:submit.prevent="Submit">
    <label for="username">
        <input type="text" id="username" v-model="user.username"/>
        <button type="submit">保存</button>
    </label>
</form>
    </div>
    <script>
        new Vue({
            el: '#app',
            data:{
               user:{}
            },
            methods: {
                     Submit() {
                    if (this.user.username) {
                      alert('提交表单')
                    } else {
                           alert('请输入用户名')
        }
    }
}
          }
        )
    </script>
</body>

v-if和v-show标签

首先根据小案例演示v-if和v-else的用法

<body>
   <div id="app">
      <input type="checkbox" v-model="ok">你长得帅吗</input>
      <h1 v-if="ok">帅!</h1>
      <h1 v-else>非常帅!</h1>
   </div>
    <script>
      new Vue({
         el:"#app",
      data:{
         ok:true
      }
      })
      
    </script>
</body>

v-if和v-show的用法很相似，它们的区别是什么呢？

这是前端面试中经常被问到的一个问题。

1.v-show性能比v-if好一点。这是因为v-show在编译时只编译一次，而v-if会不停的创建，销毁。
2.v-show经常用于控制css样式，而v-if控制的是DOM，添加或删除DOM元素，所以相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
3.一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for标签

v-for为循环指令，可以用于遍历等。案例如下：

在div中加入以下代码，代表n从0开始遍历。

<ul>
    <li v-for="n in 10">{{ n }} </li>
</ul>

页面结果：

遍历对象的形式如下：

<body>
   <div id="app">
   <table>
      <tr v-for="user in userList">
         <td>{{user.id}}</td>
         <td>{{user.name}}</td>
      </tr>
   </table>
   </div>
    <script>
      new Vue({
         el:"#app",
         data: {
    userList: [
        { id: 1, name: '荔枝' },
        { id: 2, name: '油饼' },
        { id: 3, name: '虾头'},
        { id: 4, name: '树枝'}]}
      })
    </script>
</body>

输出：

总结

到此这篇关于Vue语法和标签使用的文章就介绍到这了,更多相关Vue语法和标签使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

面试问题Vue双向数据绑定原理
这篇文章主要介绍了面试问题Vue双向数据绑定原理，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
vue.js使用v-model指令实现的数据双向绑定功能示例
这篇文章主要介绍了vue.js使用v-model指令实现的数据双向绑定功能,简单分析了v-model指令的功能并结合实例形式给出了v-model指令实现数据双向绑定相关操作技巧,需要的朋友可以参考下
2018-05-05
Vue关于对象直接赋值的坑及解决
这篇文章主要介绍了Vue关于对象直接赋值的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
关于vue中媒体查询不起效的原因总结
这篇文章主要介绍了关于vue中媒体查询不起效的原因总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
vue基于elementUI表格状态判断展示方式
这篇文章主要介绍了vue基于elementUI表格状态判断展示方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue联动Echarts实现数据大屏展示
这篇文章主要为大家介绍了Vue联动Echarts实现数据大屏的展示示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-04-04
vue前后分离调起微信支付
这篇文章主要为大家详细介绍了vue前后分离调起微信支付，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-07-07
uni-app中App与webview双向实时通信详细代码示例
在移动应用开发中,uni-app是一个非常流行的框架,它允许开发者使用一套代码库构建多端应用,包括H5、小程序、App等,这篇文章主要给大家介绍了关于uni-app中App与webview双向实时通信的相关资料,需要的朋友可以参考下
2024-07-07
vue中this.$set()的基本用法实例
最近工作上经常操作数组数据,并且要求实时更新视图数据,这个时候首先想到的是 vue.set(),下面这篇文章主要给大家介绍了关于vue中this.$set()的基本用法实例,需要的朋友可以参考下
2023-01-01
vue ssr服务端渲染(小白解惑)
这篇文章主要介绍了vue ssr服务端渲染(小白解惑)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11