Vue语法与标签的使用

最新推荐文章于 2025-04-22 13:33:23 发布

2401_85124163

最新推荐文章于 2025-04-22 13:33:23 发布

阅读量370

点赞数 7

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/2401_85124163/article/details/139937404

版权

*   [v-if和v-show标签](about:blank#vifvshow_240)

*   [v-for标签](about:blank#vfor_270)

设置代码片段

=====================================================================

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

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


{

 

 "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>


### 总结

* 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

* 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

* 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

* 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！



![](https://img-blog.csdnimg.cn/img_convert/6c250b6200355d0edce85b970db267bd.png)

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！