vue学习（一）---常用指令

最新推荐文章于 2022-10-12 19:14:51 发布

邱先生~

最新推荐文章于 2022-10-12 19:14:51 发布

阅读量212

点赞数

分类专栏： vue 文章标签：常用指令 v-model v-bind v-on

本文链接：https://blog.csdn.net/weixin_43932245/article/details/90412340

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1.v-bind
2.v-model
3.v-text
4.v-html
5.v-show
6.v-if
7.v-on
8.v-for
9.v-cloak

指令(directive)——补充了html的属性

v-bind:xxxx=‘yyy’ 简写 :xxxx=‘yyy’

<strong :title="age">{{age}}</strong>
    {{name}} - {{age}}

 data:{
      name:'xxx',
      age:18
    }

v-bind可以用于任何属性，有两个属性有另外的写法 class 和 style

class可以使用字符串 也可以使用数组的形式

style可以使用字符串 也可以使用json的形式

<strong :style="style_json">{{name}}</strong>
<strong :style="style_str">{{name}}</strong>
<strong :class="class_str">{{name}}</strong>
<strong :class="class_arr">{{name}}</strong>
 data:{
      style_str: 'width: 200px; background: yellow; display: block;',
      style_json: {width: '200px', background: 'green', display: 'block'},
      class_str: 'aa bb cc active',
      class_arr: ['aaa', 'bbb', 'ccc', 'active2']
    }

v-model：数据双向绑定，数据(data)和输入组件（input等）之间双向绑定

<input type="text" v-model='i_name'>
    <p>{{i_name}}</p>

data:{
	i_name:'xxx'
}

注意：v-model进来的数据，都是字符串,如果v-model传的值是number类型的话，他也会变成字符串,自己注意下做相应的修改。


 <div id="div1">
      <input type="text" v-model="n1">+
      <input type="text" v-model="n2">=
      {{n1+n2}} // 12
      {{parseInt(n1)+parseInt(n2)}} //3 官方不推荐在{{}}表达式中做太多操作 但没说不行
      {{sum()}} //3 这种写法没毛病
    </div>
 let vm=new Vue({
    el: '#div1',
    data: {
      n1: 1, n2: 2
    },
     methods: {
      sum(){
        return parseInt(this.n1)+parseInt(this.n2);
      }
    }
  });

v-text 直接输出html代码

v-html innerHTML

v-show display

v-if 删除元素

vue事件

v-on：click=‘fn()’ 简写 @click=‘fn()’

<body>
  <div id="div1">
      {{a}}
      <input type="button" value="+1" v-on:click="fn(5)">
  </div>
</body>
<script>
  let vm = new Vue({
    el:'#div1',
    data: {
      a: 12
    },
    methods: {
      fn(n){
        this.a+=n;
      }
    }
  });
</script>

v-for

数组 v-for=“item,index in array”
json v-for=“val,key in json”
字符串 v-for=“char,index in str”
数字 v-for=“i in num”

需要绑定 :key key是监控数据是怎么变的是删除是新增等等都有一个标识来确定数据的改变，不能重复,不能变, 要有唯一值

数组

<body>
    <div id="div1">
      <ul>
        <li v-for="user,index in users" :key='index'>
          {{index}}用户名：{{user.name}} 密码：{{user.password}}
        </li>
      </ul>
    </div>
  </body>

  <script>
  let vm=new Vue({
    el: '#div1',
    data: {
      users: [
        {name: 'blue', password: '123456'},
        {name: 'zhangsan', password: '654321'},
        {name: 'lisi', password: '111111'},
      ]
    }
  });
  </script>

json

<body>
    <div id="div1">
      <ul>
        <li v-for="val,name in style">
          {{name}}: {{val}}
        </li>
      </ul>
    </div>
  </body>

  <script>
  let vm=new Vue({
    el: '#div1',
    data: {
      style: {
        width: '200px',
        height: '300px'
      }
    }
  });
  </script>

字符串

<body>
    <div id="div1">
      <ul>
        <li v-for="s in str">
          {{s}}
        </li>
      </ul>
    </div>
  </body>

  <script>
  let vm=new Vue({
    el: '#div1',
    data: {
      str: 'sdfsfgfdgh'
    }
  });
  </script>

数字

<body>
    <div id="div1">
      <ul>
        <li v-for="i in 50">
          {{i}}
        </li>
      </ul>
    </div>
  </body>

  <script>
  let vm=new Vue({
    el: '#div1',
    data: {

    }
  });
  </script>

v-cloak 防止{{}}意外的显示出来

如果有大量的script要加载阻塞了vue实例的生成那个页面就会显示一大堆vue表达式这些不是我们想要的。

v-clock是当vue实例声明之前他会在容器加上一个v-clock属性，一旦加载完成后v-clock属性就可以移除。

这样我们就可以通过v-clock来做些事情。我们可以在vue被阻塞的时候让页面display:none 等加载完成之后再显示就可以了
或者loading ，进度条什么都可以。

v-clock 一般是需要配合css一起使用

//css
*[v-cloak] {display:none}

<body>
    <div id="div1" v-cloak>
      {{a}}, {{b}}
    </div>
  </body>
  <script src="1.php" charset="utf-8"></script>
  <script>
  let vm=new Vue({
    el: '#div1',
    data: {
      a: 12, b: 5
    }
  });
  </script>

邱先生~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue学习（一）---常用指令

指令(directive)——补充了html的属性v-bind:xxxx=‘yyy’ 简写 :xxxx=‘yyy’<strong :title="age">{{age}}</strong> {{name}} - {{age}} data:{ name:'xxx', age:18 }v-bind可以用于任何属性，有两个...
复制链接

扫一扫