Vue——指令

_木远

于 2021-02-24 21:05:06 发布

阅读量158

点赞数

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

本文链接：https://blog.csdn.net/weixin_44434872/article/details/114039589

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Vue——指令

<div id="app">

</div>
<script>
        var app = new Vue({
            el: '#app',//el:挂载要管理的元素
            data: {
                msg: 'give him some color look look',
                active:'active'
            },
            methods: {
                btn() {
                    this.isactive = !this.isactive
                }
            }
        })
    </script>

1. v-cloak

功能 : 解决插值表达式闪烁问题
<p v-cloak> {{ msg }} </p>

2. v-text

功能 : 用于渲染普通文本，无论何时，绑定data的数据对象上 msg属性发生了改变，插值处的内容都会更新
默认 v-text 是没有闪烁问题的；v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的占位符，不会把整个元素的内容清空
<h4 v-text = "msg" ></h4>

3. v-html

功能：解析msg属性值上的H5标签，解决标签当做文本输出问题
<h4 v-html= "msg" ></h4>

4. v-pre

功能：用于跳过这个元素和它的子元素的编译过程，用于显示原本mustache语法
<h2 v-pre>{{message}}</h2>

5. v-bind

功能：是Vue中提供用户绑定属性的指令
v-bind 指令可被简写为 ： ， v-bind中可以写合法的JS表达
<p v-bind:class = "active"></p>或者 <p :class = "active"></p>

1. v-bind动态绑定class

1.直接绑定对象语法数组语法

<style>  .active { color: skyblue; } </style>
<div id="app">
   <h2 :class="active">{{message}}</h2>//直接绑定
   <h2 :class="{active:isactive ,line:isline}">{{message}}</h2>//对象语法
   <h2 :class="[active,line]">{{message}}</h2>//数组语法
</div>
 <script>
     var app = new Vue({
         el: '#app'
         data: {
             message: 'give  him some  your color',
             isactive: true,
             isline: true,
             active: 'active',
             line:'666'
         }
     })
 </script>

2. v-bind动态绑定style

对象语法数组语法

<style>
   .active {
        color: skyblue;
    }
</style>
 <div id="app">
     <h2 :style='{fontSize:"50px"}'>{{message}}</h2>
     <h2 :style='{fontSize:active,color:lastColor}'>{{message}}</h2>
 </div>
 <script>
     var app = new Vue({
         el: '#app',
         data: {
             message: 'give him some color look look',
             active: '60px',
             lastColor: 'skyblue'
         }
     })
 </script>

6. v-on

功能：用来事件绑定机制
v-on 指令可被简写为 @
<button v-on:click='btn'>按钮</button> 或者<button @click='btn'>按钮</button>

<div id="app">
    <!--在事件定义时，写方法 时省略了小括号，但是方法本省是需要一个参数的，
    这个时候Vue会默认将浏览器生成的event事件对象作为参数传递到方法  -->
    <button @click='btn1'>按钮1</button>
    <!--在事件定义时，写函数时不省略了小括号，但是不传参数，形参值是undefined -->
    <button @click='btn1()'>按钮2</button>
    <!-- 方法定义时我们需要event对象，同时又需要其他参数 -->
    <!-- 在调用方法时，手动的获取到浏览器参数的event对象：$event -->
    <button @click='btn2(123,$event)'>按钮3</button>
    <button @click=''>按钮4</button>
  </div>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
        btn1(t) {
          console.log(t);
        },
        btn2(t, event) {
          console.log(t, event);
        }
      },
    })
  </script>

6.1 v-on提供了事件修饰符

① .stop 阻止冒泡行为 —>从里到外执行事件
② .prevent 阻止默认行为
③ .capture实现捕获触发事件的机制 —>从外到里执行事件
④ .self 实现只有点击当前元素时才会触发事件
⑤ .once 事件处理函数只触发一次

7. v-model

功能：实现表单元素和 model 中数据的双向绑定
v-model 只能作用于表单元素 input（radio ， text ， address ， email ） select checkbox textarea
<input type = "text" v-model = "msg">

7.1 结合radio使用

  <script src='../vue.js'></script>
  <div id='app'>
    <label for="nan">
      <input type="radio" id="nan"  value="男" v-model='sex'>男
    </label>
    <label for="nv">
      <input type="radio" id="nv" value="女" v-model='sex'>女
    </label>
    <h2>你选择的性别是：{{sex}}</h2>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'give him some color look look',
        sex: '男'
      }
    })
  </script>

7.2 结合checkbox使用

<script src='../vue.js'></script>
  <div id='app'>
    <label for="agree">
      <input type="checkbox" id="agree" v-model='isAgree'>同意协议
    </label>
    <button :disabled='!isAgree'>下一步 </button>
    <hr>
    <label for="agree">
      <input type="checkbox" value="篮球" v-model='hobis'>篮球
      <input type="checkbox" value="足球" v-model='hobis'>足球
      <input type="checkbox" value="羽毛球" v-model='hobis'>羽毛球
      <input type="checkbox" value="乒乓球" v-model='hobis'>乒乓球
    </label>
    <h2>你选择的爱好有{{hobis}}</h2>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'give him some color look look',
        isAgree: false,
        hobis: []
      }
    })
  </script>

7.3 v-model 修饰符

<div id='app'>
    <!-- lazy 按下enter键才触发双向绑定 -->
    <input type="text" name="" id="" v-model.lazy='message'><br>
    <h2>{{message}} </h2>
    <hr>
    <!-- number -->
    <input type="text" name="" id="" v-model.number='age'><br>
    <h2>{{age}}---{{typeof(age)}} </h2>
    <hr>
    <!-- trim -->
    <input type="text" name="" id="" v-model.trim='name'><br>
    <h2>{{name}} </h2>
    <hr>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'give him some color look look',
        age:0,
        name:''
      }
    })
  </script>

8. v-for

功能：迭代数组，迭代对象，迭代数字
在遍历对象身上的键值对时，除了有 val key ，在第三个位置还有索引
v-for 迭代数字的话，从1开始
在组件中使用v-for时，key 是必须的
key属性的使用：
① v-for 循环的时候， key属性只能使用 number 获取 string
② key 在使用的时候，必须使用 v-bind属性绑定的形式，指定 key的值
③ 在组件中，使用v-for循环时，或者在一些特殊情况中，如果 v-for 有问题，必须在使用 v-for 的同时，指定唯一的字符串/数字类型做：key 的值
<p v-for = "item in list" >{{ }}</p>
<p v-for = "(val , key , i) in list" >{{ }}</p>