Vue常用指令

艺术就是派大星220

于 2021-09-14 09:08:36 发布

阅读量65

点赞数 1

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Rossbort/article/details/120277271

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

在vue中 v-xxx 的行内属性我们统称为 vue指令 vue指令写在标签的行内样式上,也就是说指令是绑定在dom属性上的

v-model = '变量' 数据双向绑定相当于把这个变量跟这个表单元素绑定在一起了；变量改变表单元素的内容跟着改变，内容改变变量也会跟着更新

v-model修饰符

.trim 自动过滤输入的首尾空白字符

.number (对应的值使用parseFloat转成数字能转成功的就转，不能成功就不转了)

.lazy 没有lazy的时候 vue使用的 input事件更新数据；加上之后用的change事件更新的数据

v-bind 数据单向绑定，用于动态改变标签内的属性，代替 v-bind:src='变量' 是专门用来处理行内属性（src class style ...）的指令，v-bind: 一般简写成 :

小胡子语法{{变量}}

<body>
  <div id="app">
    <!-- 
      小胡子中 只能编写表达式(变量 赋值表达式 函数执行 三元表达式)  
      不能写语句（for循环 if  switch  var ...）
      
      小胡子中最终展示出来的时那个表达式的结果
     -->
    <h1>{{hello}}</h1>
    <h2>{{str}}</h2>
  </div>


  <div>dgsdgdfh</div>
  {{hello}}
</body>
</html>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    // 当前这个对象中的属性名 都是vue规定的；
    el:'#app',// 相当于 告诉 vue ； 只处理app这个元素中的语法；不能是html或者body这两个元素
    data:{
      // 存储都是 vue变量
      // data中的属性 最终 都会被挂载到当前实例上；
      //当数据更改的时候 视图会自动更新；
      hello:'hello ',
      str:'哈哈哈'
    }
  });
</script>

v-text = '变量' 相当于小胡子语法避免了显示小胡子的毛病，可以将一个数据展示在一个dom的内容中（相当于使用了 innerText）
v-html = '变量' 相当于原生的innerHTML 只在可信任的内容上使用该指令,不可用于表单用户提交；( 可以将一个数据展示在一个dom的内容中（相当于使用了 innerHTML ）

v-cloak 后边没有值就是为了解决小胡子的显示问题；需要配合css使用；原理其实就是当vue模板渲染之前，先渲染的是html，这时，我们写的css样式可以起作用让元素display none了；当模板渲染完成之后，vue会自动把这个行内属性移除，在页面上展示的就是渲染好的html了；

v-once 后边也没有值 vue对有这个指令的元素只渲染一次；
v-pre 后边也没有值告诉vue 这个标签及其子标签都不用vue渲染;可以用来提升vue的编译效率

v-on 监听 DOM 事件，并在触发时运行一些 JavaScript 代码,通过v-on指令修饰click点击事件,可简写用@代替

v-for 相当于JS中的for in循环, 可以根据数据多次渲染元素

        <ul>
          <li v-for="(item,index) in ary" :key='index'>
            <!-- 
              item和index是自己定义的变量， 两个都写需要加上();
              item 代表 数组中的当前项
              index 是对应的索引
              这两个变量 只能用在当前使用v-for的标签上及其内部
              :key使v-bind:key的缩写，代表给每一个循环的列表添加一个唯一的标识，
             -->
            <i>{{index}}</i>:<strong>{{item}}</strong>
          </li>
        </ul>

v-show 后边跟的是一个布尔类型（其他类型会默认转成布尔值），true为显示，false相当于给元素添加了display:none 样式

v-if 元素在指令的表达式返回 true值的时候被渲染，会重新进行DOM的删除和创建操作
v-else 和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来 v-else-if 必须紧跟在带 v-if或者 v-else-if 的元素之后。

当然，也可以通过<template>元素实现整体渲染，在上面使用 v-if元素，最终的渲染结果并不会包含 <template>元素。

<template v-if="true">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

补充：在vue中使用template

<script>
    let vm = new Vue({
        // el:'#app',
        // template:'<h1>666{{name}}</h1>',// 指定当前渲染的模板，若没有这个属性 则用app作为模板
        data:{
            name:"小明",
            flag:true
        }
    }).$mount('#app');
</script>

v-if&&v-show比较

若 v-if条件判断不成立 则 整个标签都不加载  
若 v-show条件判断不成立 则 整个标签都加载 只是被display none了  
v-if 有比较大的切换开销  v-show 有比较大的初始加载开销 （如标签需要频繁切换时，推荐使用v-show）

艺术就是派大星220

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue常用指令

vue指令写在标签的行内样式上v-model = '变量' 数据双向绑定相当于把这个变量跟这个表单元素绑定在一起了；变量改变表单元素的内容跟着改变，内容改变变量也会跟着更新 v-bind 数据单向绑定，用于动态改变标签内的属性，代替 v-bind:src='变量' 是专门用来处理行内属性（src class style ...）的指令，v-bi...
复制链接

扫一扫