VUE学习——vue的内部指令学习（趁自己没忘，学习记录一下）

1.v-if&v-else&v-show

v-if用来判断是否加载html的DOM，v-if和v-else一般是一起用的。

v-show相当于display，DOM已经加载出来了，这个是判断它要不要显现出来

 <div id="app">
     <div v-if="isLogin">您好，CHENXQ</div>
     <div v-else>请登录后操作</div>
     <div v-show="isShow">CHENCHENYEAH</div>
    </div>
    <script type="text/javascript">
     var app=new Vue({
         el:'#app',
         data:{
             isLogin:true,
             isShow:false
         }

     })
    </script>

2.v-for,这个主要是循环输出的问题，js里不是有for..in...循环么？这个跟那个类似，可以说是一样的，只是写法有些许的不同，这个可以让一个数组直接输出

<li v-for="item in items">
     {{item}}

   </li>
<script type="text/javascript">
                      var app=new Vue({
                          el:'#app',
                          data:{
                              items:[12,34,56,2,8,90],
                      }
                      });
</script>

也可以对这个数组进行排序后输出，需要注意的是此时的排序的数组需要在computed重新声明,computed相当于属性的一个实时计算，如果实时计算里关联了对象，那么当对象的某个值改变的时候，同时会实时计算

<div id="app">
                <ul>
                        <li v-for="item in sortItems">
                            {{item}}

                        </li>
                    </ul>

               </div>
                 <script type="text/javascript">
                      var app=new Vue({
                          el:'#app',
                          data:{
                              items:[12,34,56,2,8,90],

                          },
                          computed:{
                              sortItems:function(){
                                  return this.items.sort(sortNumber);
                              },

                          }
                      });
                      function sortNumber(a,b){
                          return a-b;
                      }

                 </script>

以上是对纯数字数组的一个排序，数组对象的排序如下：

<div id="app">
                <ul>
                        <li v-for="item in sortItems">
                            {{item}}

                        </li>
                    </ul>
                   <div v-for="(student,index) in sortStudents">
                      {{index+1}}: {{student.name}} :{{student.age}}
                   </div>

               </div>
                 <script type="text/javascript">
                      var app=new Vue({
                          el:'#app',
                          data:{
                              items:[12,34,56,2,8,90],
                              students:[
                                  {name:'chenxq', age:21,subject:'English'},
                                  {name:'cxq',age:18,subject:'science'},
                                  {name:'Shaquila',age:24,subject:'math'},
                                  {name:'fengmo',age:7,majorin:'tecent'}

                                  ]

                          },
                          computed:{
                              sortItems:function(){
                                  return this.items.sort(sortNumber);
                              },
                              sortStudents:function(){
                                return sortByKey(this.students,'age');
                              }

                          }
                      });
                      function sortNumber(a,b){
                          return a-b;
                      }
                      //数组对象方法排序:
                      function sortByKey(array,key){
                          return array.sort(function(a,b){
                              var x=a[key];
                              var y=b[key];
                              return((x<y)?-1:((x>y)?1:0));
                          });
                      }

                 </script>

3.v-bind 处理html中的标签属性，可以直接绑定标签中的属性，也可以绑定style,以及绑定class样式，简写“：”

<div id="app">
                   <img v-bind:src="imgSrc"  width="400px" height="200px"/>

            <a :href="webUrl" target="_blank">技术胖</a>
            <div :class="className" width="200px" height="200px">
                1.div绑定class
            </div>
            <div :class="{classA:isTrue}" width="200px" height="200px">
                    2.div绑定class中的判断
            </div>
            <div :class="[classA,classB]" width="200px" height="200px">
                        3.div绑定class中的数组判断
            </div>
            <div :class="isTrue?classA:classB" width="200px" height="200px">
                    4.div绑定class中的三元运算符
           </div>
            <hr>
            <div>
                <input type="checkbox" id="isTrue" v-model="isTrue">
                <label for="isTrue">isTrue={{isTrue}}</label>
            </div>
            <hr>
            <div :style="{color:red,fontSize:font}">
                 5.div绑定style.
            </div>
            <div :style="styleObject">6.绑定style对象</div>

         </div>

             <script type="text/javascript">
                      var app=new Vue({
                          el:'#app',
                          data:{
                              imgSrc:'http://jspang.com/wp-content/uploads/2017/02/vue01-2.jpg',
                              webUrl:'http://jspang.com',
                              className:'classA',
                              isTrue:false,
                              classA:'classA',
                              classB:'classB',
                              red:'red',
                              font:'20px',
                              styleObject:{
                                  color:'green',
                                  fontSize:'24px'
                              }

                          }
                      })
                 </script>

4.v-model把数据绑定在特定的表单元素上，实现双向绑定

<div id="app">
                  <p>原始文本信息{{message}}my name is chenxq</p>
                  <h3>文本框</h3>
                  <p>v-model:<input type="text" v-model="message"></p>
                  <p>v-model.lazy:<input type="text" v-model.lazy="message"></p>
                  <p>v-model.number:<input type="text" v-model.number="message"></p>
                  <p>v-model.trim:<input type="text" v-model.trim="message"></p>
                  <hr>
                  <h3>文本域</h3>
                  <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
                  <hr>
                  <h3>多选框绑定一个值</h3>
                  <input type="checkbox" id="isTrue" v-model="isTrue">
                  <label for="isTrue">{{isTrue}}</label>
                  <hr>
                  <h3>多选框绑定一组值</h3>
                  <p>
                      <ol>
                    <li><input type="checkbox" id="javascript" value="javscript" v-model="webnames">
                      <label for="isTrue">javascript</label>
                    </li>
                    <li><input type="checkbox" id="python" value="python" v-model="webnames">
                      <label for="isTrue">python</label>
                    </li>
                    <li>
                      <input type="checkbox" id="java" value="java" v-model="webnames">
                      <label for="isTrue">java</label>
                    </li>
                    <li>
                      <input type="checkbox" id="angular" value="angular" v-model="webnames">
                      <label for="isTrue">angular</label>
                    </li>
                    <li>
                      <input type="checkbox" id="jquery" value="jquery" v-model="webnames">
                      <label for="isTrue">jquery</label>
                    </li>
                      </ol>
                  </p>
                  <p>
                      {{webnames}}
                  </p>
                  <hr>
                  <h3>单选框绑定</h3>
                  <p>
                      <input type="radio" id="one" value="male" v-model="sex">
                      <label for="one">male</label>
                      <input type="radio" id="two" value="female" v-model="sex">
                      <label for="two">female</label>
                      <p>您选择的性别是：{{sex}}</p>
                  </p>

               </div>
                 <script type="text/javascript">
                      var app=new Vue({
                          el:'#app',
                          data:{
                             message:'v-model',
                             isTrue:true,
                             webnames: [],
                             sex:'male'
                          }
                      })
                 </script>

5.v-on 绑定事件监听器，触发一些事件，简写“@”

 <div id="app">
                   本场比赛得分：{{score}}
                    <p><button v-on:click="add">加分</button>
                    <button @click="sub">减分</button><br />
                    <input type="text" v-on:keyup.enter="onEnter" v-model="score2">
                    </p>
               </div>
                 <script type="text/javascript">
                      var app=new Vue({
                          el:'#app',
                          data:{
                              score:0,
                              score2:1
                          },
                          methods:{
                              add:function(){
                                  this.score++;
                              },
                              sub:function(){
                                  this.score--;
                              },
                              onEnter:function(){
                                  this.score=this.score+parseInt(this.score2);
                              }

                          }

                      })
                 </script>

键盘事件可以用数字来表示，相关按键对应的数字：

6.v-pre&v-cloak&v-once

v-pre就是在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。

v-cloak在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用。

v-once在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。

7.v-text&v-html

v-text,就是解决当我们网速很慢或者javascript出错时，{{xxx}}会暴露的问题。

如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，需要使用v- html 指令.

需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用.