vue基础模板语法02

最新推荐文章于 2023-02-12 21:16:34 发布

钢铁直女.

最新推荐文章于 2023-02-12 21:16:34 发布

阅读量292

点赞数

分类专栏： Vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_44836362/article/details/114272456

版权

本文详细介绍了Vue的基础模板语法，包括如何创建Vue代码模板，基础语法如插值、指令、v-bind动态绑定、条件判断以及v-for与v-model的使用。还提供了相关指令实现效果的代码示例，帮助读者深入理解和掌握Vue开发。

摘要由CSDN通过智能技术生成

创建vue代码模板：

编写vue代码模板
file->settings->Live Templates->vue添加一个模板，并将代码模板复制到Template Text文本框中，在define中勾选HTML，点击ok或apply
输入vue测试效果

1、编写vue代码模板

在这里插入图片描述

2、 file->settings->Live Templates->vue添加一个模板，并将代码模板复制到Template Text文本框中，在define中勾选HTML，点击ok或apply

在这里插入图片描述

3、输入vue测试效果

自行测试噢>o<

vue基础语法

插值操作：将data中定义的数据插入到dom中显示出来。

mustache语法（双大括号语法）：{ {}}

1、可以直接写变量，也可以写表达式（如a+’ '+b）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>1vue—mustache语法</title>
</head>
<body>
  <div id="info">
    <h1>{
  {mes1 + ',' + mes2 + '!'}}</h1>
    <h1>{
  {a + '+' + b + '=' + (a+b)}}</h1>
  </div>

    <script src="../../js/vue.js"></script>
    <script>
      const info = new Vue({
    
        el : "#info",
        data : {
    
          mes1 : "音乐纯粹",
          mes2 : "爱V绝对",
          a : 1,
          b : 2
        },
        methods : {
    

        }
      })
    </script>
</body>
</html>

在这里插入图片描述

2、相关指令

v-for：列表展示。v-for=“itme in list”（响应插入要用push！！)
在这里插入图片描述
插入一条数据

v-on：响应事件。v-on:xxx，如点击事件v-on:click=“event”
初始状态在这里插入图片描述
点击’+'按钮，计数增加

v-once: 不希望界面随意的跟随变量改变时

该指令表示元素和组件(组件后面才会学习)只渲染一次，不会随着数据的改变而改变。
该指令后面不需要跟任何表达式。

初始状态
chushizhu
改变参数在这里插入图片描述

v-html：从服务器请求到的数据本身就是一个HTML代码时，按照HTML格式进行解析，并且显示对应的内容。

该指令后面往往会跟上一个string类型。
会将string的html解析出来并且进行渲染。

v-text: 用于将数据显示在界面中，一般接受的是一个string类型。（不够灵活，会覆盖，一般不用）
在这里插入图片描述

v-pre：用于跳过这个元素和它子元素的编译过程，直接显示原本的Mustache语法。与

<pre></pre>

标签类似

在这里插入图片描述

v-cloak：某些情况下浏览器可能会直接显然出未编译的Mustache标签。使用v-cloak可以实现遮挡效果，在未编译前实现v-cloak指令，编译后则取消v-cloak指令。（cloak斗篷），该指令基本不用。

自行测试，效果更佳>o<

相关指令实现效果代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>1vue—mustache语法+一些指令</title>
  <style>
    [v-cloak] {
    
      display:none;
    }
  </style>
</head>
<body>

  <div id="info">
    <ol>
      <li>
        <h1>mustache语法 可使用表达式</h1>
        <p>{
  {mes1 + ',' + mes2 + '!'}}</p>
        <p>{
  {a + '+' + b + '=' + (a+b)}}</p>
      </li>
      <li>
        <h1>v-for</h1>
        <p>{
  {mes_for}}</p>
        <ul>
          <li v-for="item in songs">{
  {item}}</li>
        </ul>
      </li>
      <li>
        <h1>v-on</h1>
        <p>当前计数：{
  {num}} &ensp; <button v-on:click = "add"> + </button></p>
      </li>
      <li>
        <h1>v-once</h1>
        <p>{
  {mes_once}}</p>
        <p v-once>{
  {mes_once}}</p>
      </li>
      <li>
        <h1>v-html</h1>
        <p>{
  {url}}</p>
        <p v-html = "url"></p>
      </li>
      <li>
        <h1>v-text</h1>
        <p>{
  {mes_text}}</p>
        <p v-text="mes_text"></p>
      </li>
      <li>
        <h1>v-pre</h1>
        <p>{
  {mes_pre}}</p>
        <p v-pre>{
  {mes_pre}}</p>
      </li>
      <li>
        <h1>v-cloak</h1>
        <p>{
  {mes_cloak}}</p>
        <p v-cloak>{
  {mes_cloak}}</p>
      </li>
    </ol>
  </div>
  
    <script src=