Vue指令

最新推荐文章于 2022-09-14 15:47:51 发布

时小浅

最新推荐文章于 2022-09-14 15:47:51 发布

阅读量153

点赞数

分类专栏：重学前端文章标签： vue.js html5

本文链接：https://blog.csdn.net/qq_36194388/article/details/119334676

版权

重学前端专栏收录该内容

43 篇文章 1 订阅

订阅专栏

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.

常见的指令

v-text=“表达式” 设置标签中的文本
v-html=“表达式” 设置标签中的html
v-if=“表达式”    判断条件
v-for=“表达式”   循环
v-model=“表达式” 数据双向绑定
v-on=“表达式”    注册事件

指令作用

1.作用:  当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
2.一个标签元素上可以出现多个指令属性
3.指令只能够出现在Vue对象所挂载的标签范围内的标签中

v-text指令

语法:
<标签名 v-text="表达式"></标签名>

v-text的作用
通过data中的数据更新标签标签中的textContent属性的值.(标签中的文本内容)

注意事项:
1 如果值是html的值,也不会作为普通的文本使用.
2 标签中的属性值必须是data中的一个属性.

<div id="app">
    <span v-text="message"></span><br/>
    <span v-text="user.username"></span><br/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            message: "<h1>这是一个Span!</h1>",
            user: {
                username: "张三"
            },
        }
    });
</script>

v-html指令

语法:
<标签名 v-html="表达式"></标签名>

v-html的作用
通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)

注意事项:
1 {{表达式}} 可以插入的标签的内容中
2 v-text和v-html更改标签中的所有内容

<div id="app">
    <div v-html="message"></div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            message: "<h1>这是HTMl代码</h1>"
        }
   });
</script>

v-for指令

1. 语法:
  1.1 <标签 v-for="元素 in 数据源"></标签>
  数据源:   数组,
    元素:   数组中的一个元素,
  数据源:   对象
    元素:   对象中的一个指
   1.2 <标签 v-for="(元素,索引|键) in 数据源"></标签>
      当数据源是数组时, ()的第二个参数值索引
      当数据源是对象时, ()的第二个参数值键
   1.3 <标签 v-for="(元素,键,索引) in 对象"></标签>
2. v-for的作用:
    基于数据源多次循环达到多次渲染当前元素.

<div id="app">
    <h1>循环数组</h1>
   <ul>
        <li v-for="hobby in hobbys">{{hobby}}</li>
    </ul>
    <h1>遍历对象</h1>
    <ul>
        <li v-for="value in student">{{value}}</li>
    </ul>

    <h1>带索引循环数组</h1>
    <ul>
        <li v-for="(hobby,index) in hobbys">{{index}}--{{hobby}}</li>
    </ul>
    <h1>带键遍历对象</h1>
   <ul>
        <li v-for="(value,key,index) in student">{{index+1}}---{{key}}--{{value}}</li>
    </ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            hobbys : ["爬山","游泳","打豆豆","睡觉"],
            student : {
                name: "小毛",
                age: 29,
                sex: "男",
            },
            num : 10,
            str : "it",
        }
    });
</script>

v-for的案例-学生列表

<div id="app">
    <table class="table table-bordered">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
        </tr>
        <tr v-for="student in students">
            <td>{{student.id}}</td>
            <td>{{student.name}}</td>
            <td>{{student.age}}</td>
            <td>{{student.sex}}</td>
        </tr>
    </table>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            students: [
                {id:1,name: "刘备", age: 29, sex: "男"},
                {id:2,name: "貂蝉", age: 30, sex: "女"},
                {id:3,name: "吕布", age: 31, sex: "男"}
            ]
        }
    });
</script>

v-bind指令

将data中的数据绑定到标签上,作为标签的属性.

1.语法:
    1.1 为一个标签属性绑定一个值
         <标签 v-bind:标签属性名字="表达式"></标签>
         简写形式:
         <标签 :标签属性名字="表达式"></标签>
    1.2 为一个标签绑定一个对象作为该标签的多个属性
         <标签 v-bind="对象"></标签>

注意事项
将一个对象键和值作为标签的属性的名字和值时, 在v-bind后不需要指定属性的名字

<div id="app">
    <img v-bind:src="imgsrc" v-bind:title = "title"/>
    <img :src="imgsrc" :title = "title"/>
    <input v-bind="props"/>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            imgsrc: "./img/1.jpg",
            title: "二哈!",
            props :{
              type: "text",
                name: "username",
            }
        }
    });
</script>

v-bind指令-class的值

将数据(data)中的数据绑定到标签的class属性上

1.语法:
    1.1 为一个标签的class属性上设置值.
         <标签 v-bind:class="表达式"></标签>
         简写形式:
         <标签 :class="表达式"></标签>

2. 注意事项
     1.1   表达式可以直接使用data中的数据
     2.2   表达式可以直接使用data中的数组. 该数组可以包含多个class的值
     2.3   每个class的值支持开关状态. 该值是一个boolean类型的值. 但是传入的表达式必须是一个对象.
           语法:
           <标签 :class="{class名字1:开关,class名字2:开关}"></标签>
           开关:
           当为true时, class名字1会作为标签的class的值
           当为false时, class名字1不会作为标签的class的值

<div id="app">
    <ul>
        <li :class="classname">成都</li>
        <li :class="myclass">重庆</li>
       <li>广州</li>
    </ul>
    <hr/>
    <ul>
        <li :class="{active:activeno==0}">成都</li>
        <li :class="{active:activeno==1}">重庆</li>
        <li :class="{active:activeno==2}">广州</li>
    </ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            classname:"red",
            myclass:["red","font"],
            activeno:0
        }
    });
    window.setInterval(function () {
        app.activeno++;
        if(app.activeno > 2){
            app.activeno=0;
        }
    },200)
</script>

v-bind指令-style的值

将数据(data)中的数据绑定到标签的style属性上

1. 语法:
       <标签 v-bind:style="表达式"></标签>
    简写形式:
       <标签 :style="表达式"></标签>

2.注意事项
     2.1   表达式是一个对象格式, 对象的值来自data中
            <标签 v-bind:style="{样式1:值1,样式2:值2}"></标签>
     2.2 表达式可以直接使用data中包含样式的对象(对象的属性必须是css中特有的属性,该属性的名字可以使用驼峰或者中划线的方式)
            <标签 v-bind:style="包含样式的的对象"></标签

<div id="app">
    <ul>
        <li :style="{color:fontColor,fontSize:fontSize+'px'}">成都</li>
        <li v-bind:style="styleObject">重庆</li>
        <li>广州</li>
    </ul>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            fontColor:'red',
            fontSize:25,
            styleObject:{
                color:'blue',
                fontSize:"20px"
            }
        }
    });
</script>

v-model 指令

1. 语法:
<标签 v-model="表达式"></标签>

2 . 在表单控件上创建双向绑定

2.1 表单的值被修改时, 基于dom监听机制, 就会自动修改data中的数据中,
2.2 当data中的数据被修改时,基于数据绑定机制, 自动会把新的内容自动更新到value属性上. 页面视图也发生了改变.

3. 注意事项:
     3.1 如果单行文本的表单元素被绑定一个数据时, 该表单的默认值不是value属性决定而是有data中的数据决定.
     3.2 绑定在复选框上数据必须是一个数组, 当绑定的数据和复选框的value值一致时会自动选中
     3.3 v-model只作用于以下表单:
        input select textarea

<div id="app">
  <h1>绑定到type=text的input表单元素</h1>
  姓名:<input type="text" v-model="inputValue"><br/>
  data中的值:{{inputValue}}

  <h1>绑定到type=checkbox的input表单元素</h1>
  打篮球:<input type="checkbox" v-model="checkboxValue" value="打篮球"><br/>
  踢足球:<input type="checkbox" v-model="checkboxValue" value="踢足球"><br/>
  data中的值:{{checkboxValue}}


  <h1>绑定到type=radio的input表单元素</h1>
  打篮球:<input type="radio" v-model="radioValue" value="打篮球"><br/>
  踢足球:<input type="radio" v-model="radioValue" value="踢足球"><br/>
  data中的值:{{radioValue}}

  <h1>绑定到textarea的元素</h1>
  个人简介:<textarea v-model="textareaValue"></textarea><br/>
  data中的值:{{textareaValue}}

  <h1>绑定到单选的select的元素</h1>
  技能:<select v-model="skills">
        <option value="java">java</option>
        <option value="php">php</option>
        <option value=".net">.net</option>
      </select><br/>
  data中的值:{{skills}}

</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            inputValue: "初始化的值",
           checkboxValue: ["踢足球"],
            radioValue: "打篮球",
            textareaValue: "你是一个优秀的软件工程师!",
            skills: "java",
        }
    });
</script>

v-model 指令的修饰符

在表单中的值同步到数据之前可以多数据进一步处理, 这些处理操作可以通过修饰符指定.

修饰符的语法:
1. <标签 v-model.修饰符1.修饰符2.修饰符3""></标签>

2. 修饰符有哪些?
   2.1 .number - 输入字符串转为数字绑定到data中
        如果想自动将用户的输入值转为 Number 类型 (如果原值的转换结果为 NaN 则返回原值)，可以添加一个修饰符 number 给 v-model 来处理输入值：
   2.2 .lazy - 取代 input 监听 change 事件.
         在默认情况下，v-model 在 input 事件中同步输入框的值与数据, 但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步.
   2.3 .trim - 输入首尾空格过滤
        如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<div id="app">
    {{200 + num}} <br/>
    <input type="text" v-model.number="num">
    <hr>
    {{value}} <br/>
    <input type="text" v-model.lazy="value">
    <hr>
    {{str.length}} <br/>
    <input type="text" v-model.trim="str">
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            num : 1,
            value: "",
            str: "",
        }
    });
</script>

v-once指令

1. 语法:
   <标签名 v-once></标签名>
2. v-once的作用
   只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
  这可以用于优化更新性能。
3. 注意事项:
   3.1 后期通过app修改data中的数据, 被带有v-once属性的标签中的内容不会重新被渲染.
   3.2 v-once是一个单独的属性, 该属性是不要赋值的.

<div id="app">
    <div v-once v-html="message"></div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            message: "<h1>这是HTMl代码</h1>"
        }
    });
    //被修饰的数据不会同步到页面上的
    app.message = "被修改了.";
</script>

v-show指令

1. 语法:
   <标签名 v-show="表达式"></标签名>
2. v-show的作用
   根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
    当v-show的值为真时, 会在标签的css中添加 display: none :
3. 注意事项:
   3.1 当表达式中的值是false时, 该标签仅仅是被隐藏了,而没有被从页面上删除
   3.2 标签的值会自动转换为boolean类型的值

<div id="app">
    <div v-show="show">你看到我了!</div>
    <div v-show="hidden">你看不到我了!</div>
    <div v-show="score>=90">优秀</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            "show":true,
            "hidden":true,
            "score":90,
        }
    });
</script>

v-if指令

1. 语法:
   <标签名 v-if="表达式"></标签名>
2. v-if的作用
   根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。
3. 注意事项:
   3.1 当表达式中的值是false时, 是从页面上删除.
   3.2 标签的值会自动转换为boolean类型的值

<div id="app">
    <div v-if="show">你看到我了!</div>
    <div v-if="hidden">你看不到我了!</div>
    <div v-if="score>=90">优秀</div></div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            "show":true,
            "hidden":true,
            "score":90,
        }
    });
</script>

v-else指令

1. 语法:
   <标签名 v-if="表达式"></标签名>
   <标签名 v-else></标签名>
2. v-else的作用
   当v-if表达式不成立时, v-else执行.
3. 注意事项:
   3.1 该指令必须也v-if搭配起来使用.
   3.2 v-else是一个单独的属性, 该属性是不要赋值的.

<div id="app">
    <div v-if="isVip">欢迎欢迎!!</div>
    <div v-else>滚动!!</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            isVip: true
        }
    });
</script>

v-else-if指令

1. 语法:
<标签名 v-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else-if="表达式"></标签名>
<标签名 v-else></标签名>

<div id="app">
  <div v-if="score>=90">优秀!!</div>
   <div v-else-if="score>=70">良好!!</div>
    <div v-else-if="score>=60">及格!!</div>
    <div v-else="score<60">不及格!!</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            score: 80
        }
    });
</script>

时小浅

关注

0
点赞
踩
0

收藏

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

指令是一个带有v-前缀的特殊标签属性, 指令属性的值预期是单个JavaScript表达式.常见的指令v-text=“表达式” 设置标签中的文本v-html=“表达式” 设置标签中的htmlv-if=“表达式” 判断条件v-for=“表达式” 循环v-model=“表达式” 数据双向绑定v-on=“表达式” 注册事件指令作用1.作用: 当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。2.一个标签元素上可以出现多个指令属性3.指令只能够出现在Vue对象...
复制链接

扫一扫