vue中常用的指令

想要使用vejs來进行开发,就必须学会vuejs中提供的指令,明白每个指令是什么意思,才能更灵活的让他去显示我们想要的效果。

1、插值表达式

一般在显示文本内容的标签中使用。通过{{ }}包含变量

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id= "app">
    <div>我叫{{name}},我喜欢{hobby}},邮箱:{{dataInfo.email)}</div>
    <ul>
      <li>{{'李杰'}}</li>
      <li>{{'李杰' + "土鳖"}}</li>
      <li>{{ base + 1 + 1 }}</li>
      <li>{{ 1===1 ?"李杰":"alex"}}</li>
    </u1>
    <ul>
       <li>{{ condition?"李杰" :"alex"}}</li>
    </ul>
    <input type=" button" value="点我" v-on:click="clickMe">
</div>
<script>
   var app = new vue({
   el: ' #app',
  data: {
        name :'张顺',
        hobby: ' 篮球',
        dataInfo: {
            id: 1,
            email: 'Xxx. com'
        },
        condition: false ,
        base: 1
        },
   methods: 
        clickMe: function () {
        this.name = "苑日天";
        this.condition = true;
        this.dataInfo. email = "1145.qq.com" ;
        this.base += 100;
}
}
   })
</script>
</body>
</html>

2、v-bind

般用于对标签中的属性进行操作。

<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style>
.ig {
   border: 2px solid red;}
</style>

</head>
<body>
<div id= "app">
  <img src="xx.png" class-'c1' />
<img alt="" v-bind:src="imageUr1" v-bind:class="cls">

</div>
<script>
   var app = new vue({
   el: ' #app',
  data: {
        imageUr1 :'https://XXXXXX.png',
        cls: 'ig',
    
        }
   })
</script>
</body>
</html>

v-bind 注意:
简单的格式:属性名=XXX, 例如

<h1 v-bind:class="v1">h1>
<h1 :class="v1">h1>

v-bind 属于单向绑定,js修改->HTML修改

3、v-model

一般用于在交互的表中中使用,例如: input、 select. textarea等。 [双向绑定]
标签中输入的用户名和密码的值变化了,script中的user和pwd变量的值也跟着变化; 如果script中的user和pwd变量的值发生了变化,标签中的值也会跟着变化

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
   <div>
       用户名:<input type="text" v-model="user">
   div>
   <div>
       密码:<input type="password" v-model="pwd">
   div>
    <input type="button" value="登录" v-on:click="clickMe">
    <input type="button" value="重置" v-on:click="resetFrom">

  <script>
      var app = new Vue({
          el: '#app',
          data: {
              user: "",
              pwd: "",
          },
          methods:{
              clickMe: function() {
                  console.log(this.user,this.pwd)
              },
              resetForm:function (){
                  this.user="";
                  this.pwd = "";
              }

      }
      })
  script>
body>
html>

4、v-for

用户数据进行循环并展示。
通过v-for循环创建li标签,循环多少次看dataList的长度,li标签里面显示的值就是黛玉,暴雨,宝钗

<body>
   <div id="app">
      <ul>
          <li v-for="item in dataList">{{ item }}}li>
      ul>
   div>
  

  <script>
      var app = new Vue({
          el: '#app',
          data: {
              datalist: ["黛玉","暴雨","宝钗"],
          }
      })
  script>
body>

5、v-on

与事件相关的指令,如

v-on:click
v-on:dblclick
v-on:mouseover
v-on:mouseout
v-on:change
v-on:focus

body>
   <div id="app">
      <ul>
          <li v-on:click="clickMe">点击li>
          <li v-on:dblclick="doSomething('双击')">双击li>
          <li v-on:mouseover="doSomething('进入')" v-on:mouseout="doSomething('离开')">进入&离开li>
      ul>
   div>


  <script>
      var app = new Vue({
          el: '#app',
          data: {
          },
          methods:{
              clickMe:function (){
                  alert("点击了")
              },
              doSomething:function (msg){
                  console.log(msg);
              }
          }
      })
  script>
body>

6、v-if

条件判断
如果条件成立就显示,如果不成立就显示另外的
如下例子,isLogin的是false, 就不显示user的值,而是显示登录

<body>
   <div id="app">
        <a v-if="isLogin">{{user}}}a>
       <a v-else> 登录a>
   div>


  <script>
      var app = new Vue({
          el: '#app',
          data: {
              isLogin: false,
              user: "黛玉"
          }

      })
  script>
body>

7、v-show

根据条件显示或隐藏(标签都会渲染到页面)

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js">script>
head>
<body>
   <div id="app">
        <h1 v-show="v1">电影h1>
       <h1 v-show="!v1">电视剧h1>
   div>


  <script>
      var app = new Vue({
          el: '#app',
          data: {
              v1: false,
          }

      })
  script>
body>
html>

v-if 和v-show 都是根据条件展示,他们的区别是v-if 条件不成立的不会渲染,v-show 条件不成立的也会渲染,只上会加上一个display: none的样式把他隐藏起来了。

你可能感兴趣的:(前端,vue.js,前端,javascript)