vue基础学习01——————基础指令

v-类

v-if v-else

 <div v-if="status">
            <p> i am jsp</p>
        </div>
        <div v-else>{{msg+status}}</div>
 data(){
            return{
                status:false,
                msg:"现在显示的是:"
            }
        }

显示的图片是这样的：

v-show

  <div v-show="isShow">你好这是show</div>
   isShow:true

总结

** v-if和v-show的区别 **
** v-if：** 判断是否加载，可以减轻服务器的压力，在需要时加载。
** v-show：**调整css dispaly属性，可以使客户端操作更加流畅。

v-for使用

循环数组

  <div v-for="(item,key) in items " :key="key">
            {{item+":"+key}}
        </div>

结果：前面的值是item，后面的值是key(其实我理解就是数组的index)

循环对象

 <ul v-for="(people,value) in tobj" :key="value">{{people.name}}:{{people.age}}-------{{value}}</ul>
  tobj:[{name:"jerry",age:"18"},
                    {name:"sss",age: "23"},
                    {name: "tom",age: "10"},
                    {name: "lucy",age: "20"}]
            }

结果：name：age----------value

v-text/v-html

首先是v-text
在vue中，当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。

<span>{{message}}-------没有用v-text</span>--------对比--------<sapn v-text="message">--------使用了v-text</sapn>
 message:"this is a message"

结果：第一个没有使用V-TEXT，第二个使用了，只显示了v-text的内容

v-html:如果字符串中有html元素，如果不用v-html就解析不出来。

 <sapn>{{text}}------没有用v-html</sapn>-------对比--------<span v-html="text">-------使用了v-html</span>
  text:" <li>1</li><li>2</li><li>3</li>"

结果：明显的看到不使用v-html 直接把html元素作为字符串输出，使用了就自动解析了html字符串

v-on：绑定事件监听器

<div>
            <h3>显示比分：{{count}}</h3>
            <button style="margin: 10px" v-on:click="jiafen">加分</button><br>
            <button v-on:click="jianfen">减分</button>
        </div>
         count:0//定义count初始值为0
         
           methods:{//这里分别是加分和减分的函数   v-on:click=""直接调用对应的函数
            jianfen:function(){
                this.count--;
            },
            jiafen:function () {
            this.count++;
            }
        }

v-model：这个是双向绑定的

 <div>
            <h3>原始文本：</h3>
            <p>{{wenben}}</p>
            <h3>输入框：</h3>
            <p>v-model:<input type="text" v-model="wenben"></p>
        </div>
 wenben:"this is origin"//显示的内容

修改输入框的内容，原始的文本的值也会跟着而改变，因为v-model是双向绑定的
v-model.lazy:这个值得是，鼠标焦点离开输入框后，这个值才会改变

<p>v-model.lazy:<input type="text" v-model.lazy="wenben"></p>

离开输入框焦点后：原始文本的值和输入框的值一致

v-model.number：指的是输入的值如果先输入number 那后面的字符串就不显示出来了

 <p>v-model.number:<input type="text" v-model.number="wenben"></p>

v-model.trim 空格会自动去掉

 <p>v-model.trim:<input type="text" v-model.trim="wenben"></p>

v-model:textarea:文本域

<h3>文本域</h3>
            <textarea name="sss" id="names" cols="30" rows="10" v-model="wenben"></textarea>
        </div>

v-model:checkbox

<h3>多选框绑定一个值</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for="isTrue">{{isTrue}}</label>
          isTrue:false//在data中