vue基础整理1-指令&模板

Posted 2020-09-21 艳阳天

vue核心：响应式的数据绑定、组合的视图组件

 

指令：

一种特殊的自定义行间属性。当其表达式的值改变时相应地将某些行为应用到dom上，如绑定事件处理函数。

v-model  实现双向数据绑定  eg.首先显示屏上的内容会反应在输入框中，当输入框中输入其他内容可以改变显示屏上的内容

 <div id="demo">                                     <!--模板-->
       <input type="text" v-model="message" />       <!--v-model实现双向数据绑定-->
       <p>{{message}}</p>                            <！--数据渲染-->
   </div>
   <script>
       let data={
           message:"hello vue"                       //这里的数据用于呈现在页面中的数据
       }
       var vm=new Vue({                             //vm实例,通过vue声明一个参数，该参数为一个对象
          el:"#demo",                               //html的挂载元素，里面直接写上选择器即可，一般用id，也可以用class的类名
           data:data                               //上面定义的数据.data是一个对象，将数据绑定在模板里
       });
  </script>

 

v-on 实现事件绑定  eg.为<span>标签绑定点击事件，在下面的vm实例的methods中定义需要绑定的事件

//es6 
 <!--模板-->
  <div id="demo">
      <span v-on:click="clickHandle()">{{message}}</span> <!--v-on指令可以实现绑定事件-->
  </div>
  <script>
      let obj={
          message:"hello",                            //这里的数据是用于呈现在页面中的数据
      }
      var vm=new Vue({                              //vue实例，通过vue声明一个参数，该参数为一个对象
          el:"#demo",                              //html的挂载元素，里面直接写上选择器即可
          data:obj,                               //将上面定义的数据绑定在模板中
          methods:{ clickHandle(){               //用于绑定的事件统一写在实例的methods中
            alert("clicked");
        }
       }
      });
  </script>


//es5

 <div id="demo">
    <span v-on:click="clickHandle()">{{message}}</span>
</div>
<script>
    var obj={
        message:"hello"
    }
    new Vue({
       el:"#demo",
        data:obj,
        methods:{
            clickHandle:function(){
                alert("clicked");
            }
        }
    });
</script>

　

v-bind  动态的绑定数据，简写为 ：

<div id="demo" v-bind:custom="abc">                <!--可以通过v-bind绑定自定义属性-->
    <div v-html="html"></div>                      <!--v-html指令将文本解析成html-->
</div>
<script>
    let obj={         //数据
        html:"<div>hello,miaov</div>",
        abc:1
    }
    var vm=new Vue({
        el:"#demo",
        data:obj
    })
</script>

　　

v-text  更新数据，会覆盖已有结构

 

v-show 根据值的真假，切换元素的display属性

 

v-else-if 多条件判断，为真则渲染

 

v-for 基于源数据多次渲染元素或模板块

 

v-pre 跳过元素和子元素的编译过程

 

v-html 可以解析数据中的html结构

<div id="demo">
    <span v-html="html"></span>      <!--渲染后显示在页面中为：hello-->
</div>
<script>
   
    let obj={     //数据
        html:"<div>hello</div>"
    }
    var vm=new Vue({
        el:"#demo",
        data:obj
    })
</script>

 

v-if 根据值的真假，切换元素会被销毁，重建

 

v-else 条件都不符合渲染

 

v-once 只渲染一次，随后数据更新不重新渲染

 

 

 

渲染：

声明式渲染-只需要声明在哪里做什么，而无须关心如何实现  &   命令式渲染-需要以具体的代码表达在哪里做什么，怎么实现

 var arr=[1,2,3,4,5] //求数组中每一项的倍数，然后放入另一个数组中

  /* //命令式地渲染
    var newArr=[];
    for(var i=0;i<arr.length;i++){
        newArr.push(arr[i]*2);
    }
    */

    //声明式渲染
    var newArr=arr.map(function(item){
        return item*2 ;
    });

    console.log(newArr);

 

模版

html模板：基于dom的模板，模板都是可解析的有效的html

插值：

文本--使用双大括号{{value}}  替换实例上的属性值，当值改变时，插值内容处会自动更新

 

原生的html--双大括号输出的是文本，不会解析html

<div id="demo">
    <span>{{html}}</span>      <!--渲染后显示在页面中为：<div>hello</div>-->
</div>
<script>   
    let obj={   //数据
        html:"<div>hello</div>"
    }
    var vm=new Vue({
        el:"#demo",
        data:obj
    })
</script>

!-如果想将文本解析为html，输出hello，需要使用v-html
<div id="demo">
    <span v-html="html"></span>      <!--渲染后显示在页面中为：hello-->
</div>
<script>
    //数据
    let obj={
        html:"<div>hello</div>"
    }
    var vm=new Vue({
        el:"#demo",
        data:obj
    })
</script>

 

属性-使用v-bind进行绑定，可以响应变化

<div id="demo" v-bind:custom="abc"><!--可以通过v-bind绑定自定义属性-->
    <div v-html="html"></div><!--//v-html指令将文本解析成html-->
</div>
<script>
    let obj={         //数据
        html:"<div>hello,miaov</div>",
        abc:1
    }
    var vm=new Vue({
        el:"#demo",
        data:obj
    })
</script>

javascript表达式-

<div id="demo">
    {{3+6}}
    {{true ? "yes" : "no"}}
</div>
<script>
    var vm=new Vue({
        el:"#demo",
    });
</script>

 

字符串模板-template字符串，template选项对象的属性，模板将会替换挂载的元素。挂载元素的内容都将被忽略。（模板和template不能共存）

<div id="demo">
    <span>miaov ketang</span>
</div>
<script>
    let obj={
        html:"<div>hello,miaov</div>",
        abc:1
    };
    var str="<div>hello，{{abc}}</div>"       
//根节点只能有一个，即不能有并列的元素标签，但可以有包含的元素标签
    var vm=new Vue({
        el:"#demo",
        data:obj,
        template:str   /*将新渲染的str替换掉前面的整个div*/
    })
</script>

 

render模板-

<div id="demo"></div>
 <script>
     let obj={
         html:"<div>hello</div>",
         abc:1
     }
     var vm=new Vue({
         el:"#demo",
         data:obj,
         render:function(createElement){
             return createElement(
                     "ul",
                     [
                             createElement("li",1),
                             createElement("li",2),
                             createElement("li",3)
                     ]
             );
         }
     });
 </script>

　　

 未完待续。。。。