Vue基础语法

最新推荐文章于 2023-03-12 17:51:13 发布

Dawn~cl

最新推荐文章于 2023-03-12 17:51:13 发布

阅读量133

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Dawn_cl/article/details/117190637

版权

Vue基础

Vue基础语法

Mustach语法（双大括号)
将data中的文本数据插入到HTML中可以写变量也可以写简单的表达式

<div id="app">{{message}}</div>//Mustach语法
  <script src="../js/vue_3.js"></script>
  <script type="text/javascript">
    const app = new Vue({
      el: "#app",
      data: {
        message: "Hello",
      },
    });
  </script>

v-once
元素和组件只渲染一次，不会因数据的改变而改变

  <h2 v-once>{{message}}</h2>

v-html
可以按照HTML的格式进行解析，并显示对应的内容，一般后面会跟上一个string类型

<div id="app">
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      url: '<a href="http://www.baidu.com">百度一下</a>'
    }
  })
</script>

v-text
和Mustache比较相似，通常情况下，接受一个String数据类型

<h2 v-text="message"></h2>

v-pre
跳过这个元素和它子元素的编译过程，显示原本的样子

<h2 v-pre>{{message}}</h2>

v-cloak
在某些条件下，浏览器可能会直接显示未编译的Mustache标签
在vue解析前会有v-cloak属性，解析后就没有了

  <style>
    [v-cloak] {
      display: none;
    }
  </style>

<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  setTimeout(function () {
    const app = new Vue({
      el: '#app',
      data: {
        message: '你好啊'
      }
    })
  }, 1000)
</script>

v-bind
动态绑定某些属性，如a元素中的href属性或img元素的src属性，缩写为：

<div id="app">
  <a v-bind:href="aHref">百度一下</a>
  <a :href="aHref">百度一下</a>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      aHref: 'http://www.baidu.com'
    }
  })
</script>

</body>

v-on
绑定事件，缩写为 @

<div id="app">
	  <h2>当前计数：{{counter}}</h2>
	  <button v-on:click="counter++">+</button>
	  <button @click="counter--">-</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter:0,
    }
  })
</script>

</body>

v-for
用于多次渲染，如数组

<body>
    <div id="app">
      <ul>
        <li v-for="item in movies">{{item}}</li>
      </ul>
    </div>
    <script src="../js/vue_3.js"></script>
    <script type="text/javascript">
      const app = new Vue({
        el: "#app",
        data: {
          movies: ["aaa", "bbb", "ccc"],
        },
      });
    </script>
  </body>

v-show
条件判断，决定某些元素是否显示在页面上,不显示时只是元素的display设置为none而已

<body>
    <div id="app">
      <ul>
        <li v-show="isShow">{{message}}</li>
      </ul>
    </div>
    <script src="../js/vue_3.js"></script>
    <script type="text/javascript">
      const app = new Vue({
        el: "#app",
        data: {
          message: 'Hello',
          isShow:true,
        },
      });
    </script>
  </body>

v-if,v-else-if,v-else
和js中的if,else if,else相似，条件为flase时根本不会渲染到页面上

<div id="app">
  <h2 v-if="score>=90">优秀</h2>
  <h2 v-else-if="score>=80">良好</h2>
  <h2 v-else-if="score>=60">及格</h2>
  <h2 v-else>不及格</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      score: 99
    },
  })
</script>

Dawn~cl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础语法

Vue基础Vue基础语法Mustach语法（双大括号)将data中的文本数据插入到HTML中可以写变量也可以写简单的表达式<div id="app">{{message}}</div>//Mustach语法 <script src="../js/vue_3.js"></script> <script type="text/javascript"> const app = new Vue({ el: "#app
复制链接

扫一扫