首页 > 代码库 > Vue常用的操作指令

Vue常用的操作指令

2024-09-08 14:25:10   220人阅读

前几天给大家介绍了Vue的优点，还有安装步骤，今天给大家再介绍一下Vue常用的操作命令：

常用指令：
      v-text:用于显示文本
      v-html:用于显示HTML  节点里面的内容
      v-model:可以绑定  视图上面的数据模型
              (数据模型需要在data中   初始化)
      v-for: 用于 遍历数组   v-for="value in array"  ->写在
              希望重复的元素上面
      v-if
      v-else
      v-else-if

      v-show: 根据条件来显示
      v-bind:用于绑定属性   简写  :class    :src     :href  ...
      v-on:用于绑定事件，简写   @事件名



模板：



　　render函数 




　　eg:1
　　var vm = new Vue({
   　　 el:"#demo",
   　　 data:obj,
  　　  //template:str,
  　　  render(createElement){  //render函数
      　　 return  createElement(
               "ul",
               [
                   createElement("li","内容111"),
                   createElement("li","内容222"),
                   createElement("li","内容333"),
                   createElement("li","内容444"),
               ]
    　　 )
    },




　　　　eg:2




    <style>
        .bg {  width:300px; }
    </style>
</head>
<body>
    <div id="demo"></div>

    <script src="http://www.mamicode.com/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el:"#demo",
            //createElement(标签名，[数据对象]，子元素)
            //数据对象的属性
            /*
            * class:{},  stayle:{},   attrs:{}添加行间属性 ，   domProps:{} dom元素属性
            * 下面的跟组件有关系的操作
            * nativeOn:{}监听原生事件，  scopedSlots:{} slot作用域,   on:{} 绑定事件，
            * key:"key" 给元素加唯一标示， slot:{} 定义slot名称 ，   ref:"ref" 引用信息
            * */
            render(createElement){
                return createElement(
                    "ul",
                    {
                        class:{
                            bg:true
                        },
                        style:{
                            fontSize:"22px"
                        },
                        attrs:{ //自定义属性
                            a:"miao"
                        },
                        domProps:{ //dom ,改变ul里面的结构，下面创建的标签就都无用了
                            //innerHTML:"<li>我是html</li>"
                        },
                        
                    },
                    [
                        createElement("li",1),
                        createElement("li",1),
                        createElement("li",1),
                    ]
                )

            }

        })
    </script>




　　html模板




　　　字符串模板  ： template




　　　　eg:




<div id="demo">
    <!--<div v-bind:class="id"> {{ msg }} </div>-->
    <!--<p v-html="html"></p>-->
    <span>miaov</span>
</div>

<script src="http://www.mamicode.com/vue.min.js"></script>
<script>
    //数据
    let obj = {
        msg : "hello",
        id:"123",
        //html:"<p>标签不解析出来，标签上加 v-html="html"就好</p>",
        dd:"xianghui"
    }
    var str = "<div>hello:{{ dd }}</div>"
    var vm = new Vue({
        el:"#demo",
        data:obj,
        template:str,    //template:"#id",  scriot形式渲染




    })
</script>


 
Vue常用的操作指令






























        

            
                
                  
                
                

                    联系

                    我们