vue-指令总结

最新推荐文章于 2023-01-12 11:13:31 发布

京金

最新推荐文章于 2023-01-12 11:13:31 发布

阅读量197

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/baidu_36831253/article/details/86538739

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue的指令：

v-for,in,key,v-bind,v-model,v-on，v-once，v-cloak,v-html,v-text
v-show,v-on，v-if,v-else-if,v-else,v-pre

1.vue模板语法：使用双花括号
https://cn.vuejs.org/v2/guide/syntax.html

    <div>{{msg}}</div> /*这里为文本插值*/
    双花括号里面的数据解析为普通文本.
    同时里面可以支持js表达式,但不支持语句，同时里面只能出现一个表达式。
    {{number+1}}，{{flag?1:2}}
    可以称之为插值表达式。

2.v-cloak解决插值表达式渲染时闪烁的问题：
https://cn.vuejs.org/v2/api/#v-cloak

 css：
        [v-cloak] {
            display:none;
        }
    html:
        <div v-cloak>
            {{msg}}
        </div>

v-text没有闪烁问题，因为他是编译后显示的。

  但是和文本插值还是有区别：
    <span v-text="msg">+++++++++</span>
    <span>{{msg}}++++++</span>
    v-text会忽略标签之间的文本数据。也就是上面的+号

v-html
https://cn.vuejs.org/v2/api/#v-html

    只有v-html可以将html的文本进行解析。
    它更新的是元素的innerHTML，内容按普通的html插入。

v-bind
https://cn.vuejs.org/v2/api/#v-bind

   动态的绑定一个或多个属性，或一个组件prop到表达式。
    在绑定class和style特性时，可使用数组或对象。
    缩写：为冒号 ：

    <!-- 绑定一个属性，双引号里面是data的变量，可以进行js运算-->
    <img v-bind:src="imageSrc">

v-on:事件绑定
https://cn.vuejs.org/v2/api/#v-on

    <button v-on:click="changeValue">按钮</button>
    <button @click="changeValue">按钮</button>
    缩写： @
    changeValue是定义在methods中的函数。
    事件还有很多事件修饰符：如：
        .stop - 调用 event.stopPropagation()。
        .prevent - 调用 event.preventDefault()。
        .capture - 添加事件侦听器时使用 capture 模式。
    <button @click.stop="changeValue">按钮</button>

v-model双向数据绑定：
v-model只能运用在表单中。
https://cn.vuejs.org/v2/api/#v-model

    <div id="app">
        <h4>{{msg}}</h4>
        <input type="text" v-model:value="msg">
    </div>
    模型层定义-->视图层渲染--->视图层修改-->反馈到模型层。

8.vue中样式的使用

    对象和数组在样式中的区别：
        因为对象是无序的，数组是有序的。
        所有有些样式存在覆盖的话，那么数组是确定的。
        后面的覆盖前面，而对象不确定
    使用class样式：
        https://cn.vuejs.org/v2/guide/class-and-style.html

        使用v-bind:
            1.)对象方式：
                <h1 :class="{'red':BoolRed,'active':true}">{{msg}}</h1>
            2.)数组方式
                <h1 :class="['active','red']">{{msg}}</h1>

            3.)三元表达式：在数组里面使用三元表达式。不推荐
                <h1 :class="['active',flag?'red':'blue']">{{msg}}</h1>
                flag定义在data中。
            
            4.）数组中包对象:推荐
                <h1 :class="['active',{'red':flag}]">{{msg}}</h1>

    使用内联样式style：
        https://cn.vuejs.org/v2/guide/class-and-style.html
        对象方式：
            <h1 :style="{color:'red','border-top':'2px solid red'}">标题</h1>
            或者绑定到一个对象中：
                <div v-bind:style="styleObject"></div>

                data: {
                    styleObject: {
                        color: 'red',
                        fontSize: '13px'
                    }
                }
        数组的方式：
            <div v-bind:style="[baseStyles, overridingStyles]"></div>

9.v-for
https://cn.vuejs.org/v2/api/#v-for

    对数组遍历：items :['a','b','c','d']
        <ul>
            <li v-for="(item,index) in items" >
                {{index}}:{{item}}
            </li>
        </ul>
    
    对对象遍历：
        obj:{
                name:"zhangxy",
                age:25,
                sex:'男'
        }

        <li v-for="(value,key,index) in obj " :key="key">
            {{key}}:{{value}}
        </li>
    类似python一样的，有in操作符
    x  in  10进行遍历

    key只能是string和number类型的。

v-if 、v-else、v-else-if
https://cn.vuejs.org/v2/api/#v-if

    <div id="app">
       <h1 v-if=" items.indexOf('g') !==-1">a</h1>
       <h1 v-else-if="items.indexOf('b')!==-1">b</h1>
       <h1 v-else>c</h1>
    </div>

    v-for的优先级比v-if高：
        <li v-for="todo in todos" v-if="!todo.isComplete">
        {{ todo }}
        </li>
        上面的代码只传递了未完成的 todos。所以v-if中得不到todo,因此无法渲染任何东西。

11.v-show:

    根据表达式之真假值，切换元素的 display CSS 属性。
    <h1 v-show="flag">Hello!</h1>

12.v-pre:一般用不到。

   跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。
   跳过大量没有指令的节点会加快编译。
   <span v-pre>{{ this will not be compiled }}</span>

示例1：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
</head>
<style>
    *{
        margin:0;
        padding:0;
    }
    table{
        text-align: center;

    }
    td{
        height: 40px;
    }
  
</style>
<body>
    <div id="app">
        <div style="height: 40px;text-align: center;">
            <label class="search" for="id">id
                <input type="text" v-model:value="id">
            </label>
            <label class="search" for="name">名称
                <input type="text" v-model:value="name">
            </label>
            <button @click="addLine(id,name)">添加</button>
            <label class="search" for="search">搜索
                <input type="text" v-model:value="keywords">
            </label>
                
        </div>
       <table border="1" cellspacing="0" width="100%">
           <thead>
               <th>id</th>
               <th>品牌名称</th>
               <th>添加时间</th>
               <th>操作</th>
           </thead>
           <tbody>
                <tr v-for="(item,index) in search(keywords)" :key="index">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.time}}</td>
                    <td><a href="javascript:void(0)" @click.prevent="delLine(item.id)">{{item.action}}</a></td>
                </tr>
           </tbody>
       </table>

    </div>
    <script>
    let vm = new Vue({
        el:"#app",
        data:{
            id:'',
            name:'',
            keywords:'',
           formData:[
               {id:1,name:"宝马",time:new Date(),action:"删除"},
               {id:2,name:"奔驰",time:new Date(),action:"删除"},
               {id:3,name:"大众",time:new Date(),action:"删除"},
               {id:4,name:"法拉利",time:new Date(),action:"删除"},
           ]
        },
        methods:{
           delLine(id){
             this.formData.some((item,index,array)=>{
                 if(item.id === id){
                     array.splice(index,1)
                     return true
                 }
             })
           },
           addLine(id,name){
               let item = {id,name,time:new Date()}
               this.formData.push(item)
           },
           search(keywords){
               let data = []
               this.formData.filter((item,index)=>{
                    if(item.name.indexOf(keywords) !== -1){
                        data.push(item)
                    }
               })
               return data
           }
        }
    })
   
    </script>
</body>
</html>

京金

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue-指令总结

vue的指令：v-for,in,key,v-bind,v-model,v-on，v-once，v-cloak,v-html,v-textv-show,v-on，v-if,v-else-if,v-else,v-pre1.vue模板语法：使用双花括号https://cn.vuejs.org/v2/guide/syntax.html &lt;div&gt;{{msg}}&lt;/div...
复制链接

扫一扫

专栏目录