1. 技术文章
  2. Vue笔记系列（一）内部指令

Vue笔记系列（一）内部指令

由 陌路散爱 提交于 2020-03-09 06:06:36

第1节：走起我的Vue2.0

vue.js /vue.min.js

  1. live-server: cnpm install -g live-server
  2. npm init

【目录生成package.json方便进行包的管理】

4.vue文件夹下首先生成index.html

5.assets文件夹下放置了css和js目录

6.example文件夹下放置了helloworld.html

然后index.html里面绑定了helloworld.html的链接

 

♥在helloworld.html里面编写第一次的vue代码

    <script type="text/javascript">

        var app = new Vue({

            el:"#app",

            data:{

                message:"sweet~"

            }

        })  

    </script>

 

第2节：v-if  v-else  v-show 指令

登陆的需求

如果用户登录 显示你好 如果用户没有登陆 显示已经登陆

v-if&v-else单判断

    <div id="app">

        <div v-show="isLogin">登陆成功</div>

        <div v-else>登陆失败</div>

    </div>

    <script type="text/javascript">

        var app = new Vue({

            el:"#app",

            data:{

                isLogin:false

            }

        })  

    </script>

这里我们在vue的data里定义了isLogin的值，当它为true时，网页就会显示：你好：xxx，如果为false时，就显示请登录后操作。

 

v-if: 用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。

v-show: DOM已经加载，只是CSS控制没有显示出来。

 

v-show和v-if区别：

v-if判断是否加载【可以减轻服务器的压力，在需要时候才加载】

v-show   【true的时候，其实是display:black;false的时候 其实是设置的display=none;可以使客户端 操作更流畅】

 

第3节：v-for指令 ：解决模板循环问题

v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。

♥item in items → student in students

HTML模板写法

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

        {{item}}

</li>

 

Js写法

var app=new Vue({

     el:'#app',

     data:{

         items:[20,23,18,65,32,19,54,56,41]

     }

})

完整代码

 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="../assets/js/vue.js"></script>

    <title>V-for 案例</title>

</head>

<body>

    <h1>v-for指令用法</h1>

    <hr>

    <div id="app">

       <ul>

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

                {{item}}

           </li>

       </ul>

    </div>

 

    <script type="text/javascript">

        var app=new Vue({

            el:'#app',

            data:{

                items:[20,23,18,65,32,19,54,56,41]

            }

        })

    </script>

</body>

</html>

 

前面已经讲了v-for对数组的渲染，那如果在数组渲染的基础上再对数组进行排序呢

♥输出之前数组排序

 <script type="text/javascript">

        var app=new Vue({

            el:'#app',

            data:{

                items:[20,23,18,65,32,19,54,56,41]

            },

              Computed:{

                     SortItems:function(){

                            Return this.items.sort();

}

}

        })

</script>

 

我们在computed里新声明了一个对象sortItems，如果不重新声明会污染原来的数据源，这是Vue不允许的，所以你要重新声明一个对象。

但是有一个bug;

例如items:[9,2,5,1,4,55,66],

//因为这种方式只是按照字母排序，所以虽然9应该在55，66前面，实际输出9却在最后

于是我们可以自己试着编写一个方法sortNumber,然后传给我们的sort函数解决这个bug。

 <script type="text/javascript">

        var app=new Vue({

            el:'#app',

            data:{

                items:[20,23,18,65,32,19,54,56,41]

            },

              Computed:{

                     SortItems:function(){

                            Return this.items.sort();

}；

function sortNumber(a,b){

            return a-b;

        }

}

        })

</script>

 

用法

computed:{

    sortItems:function(){

    return this.items.sort(sortNumber);

    }

 }

 

对象循环输出

我们上边循环的都是数组，那我们来看一个对象类型的循环是如何输出的。

我们先定义个数组，数组里边是对象数据

students:[

  {name:'js',age:32},

  {name:'css',age:30},

  {name:'Php',age:21},

  {name:'nodejs',age:45}

]

在模板中输出

<ul>

   <li v-for="student in students">

       {{student.name}} - {{student.age}}

   </li>

</ul>

 

加入索引序号：

<ul>

  <li v-for="(student,index) in students">

    {{index}}：{{student.name}} - {{student.age}}

  </li>

</ul>

排序，我们先加一个原生的对象形式的数组排序方法：

 

//数组对象方法排序:

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));

   });

}

 

有了数组的排序方法，在computed中进行调用排序

sortStudent:function(){

     return sortByKey(this.students,'age');

}

 

注:

 <li v-for="(student,index) in sortStudents">

               {{index+1}} :{{student.name}}-{{student.age}}

 </li>

 

第4节：v-text & v-html

❤v-text → {{}} 相等

但是{{xxx}},这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。Vue给我们提供的v-text,就是解决这个问题的。

 

<span>{{ message }}</span>=<span v-text="message"></span><br/>

 

如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。

 

    <script type="text/javascript">

        var app = new Vue({

            el:"#app",

            data:{

                message:"miaomiaomiao",

                dodo:"<h2>wangwangwang</h2>"

            }

        })

      

    </script>

 

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

 

第5节：v-on：绑定事件监听器

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。

 我们的v-on 还有一种简单的写法，就是用@代替

eg:使用绑定事件监听器，编写一个加分减分的程序。

完整代码：

<body>

    <h1>v-on</h1>

    <hr>

    <div id="app">

        本场比赛得分:{{scorce}}

        <p>

            <button v-on:click="add">加分</button>

            <button v-on:click="reduce">减分</button><br/>

            <!-- <button @click="reduce">减分</button> -->

我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。

            <input type="text" v-on:keyup.enter="onEnter" v-model="scorce2">

            <!-- <input type="text" v-on:keyup.13="onEnter" v-model="scorce2"> -->

　　　　❤v-on:keyup.enter=v-on:keyup.13

        </p>

    </div>

    <script type="text/javascript">

        var app = new Vue({

            el:"#app",

            data:{

                scorce:0,

                scorce2:1

            },

            methods:{

                add:function(){

                  this.scorce++; 

                },

                reduce:function(){

                    this.scorce--;

                },

                onEnter:function(){

                    this.scorce=this.scorce+parseInt(this.scorce2);

                }

            }

        })

    </script>

</body>

 

 

第6节：v-model指令【双向绑定】

v-model指令，我理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。

基本上登陆注册那块儿的需要大量用到v-model指令

,html文件

<div id="app">

    <p>原始文本信息：{{message}}</p>

    <h3>文本框</h3>

    <p>v-model:<input type="text" v-model="message"></p>

</div>

 

Javascript文件

 



 

var app=new Vue({

  el:'#app',

  data:{

       message:'hello Vue!'

  }

 })

修饰符

  • model.lazy：取代 imput 监听 change 事件。【点击文本框之外的区域才会生效事件改变】
  • model.number：输入字符串转为数字。
  • model.trim：输入去掉首尾空格。

文本区域加入数据绑定

<textarea  cols="30"rows="10"v-model="message"></textare>

 

多选按钮绑定一个值【勾选中true/取消勾选false】

<h3>多选按钮绑定一个值</h3>

<input type="checkbox" id="isTrue" v-model="isTrue">

<label for='isTrue'>{{isTrue}}</label>

 

 

多选按钮绑定一个数组【相当于勾选给数组内添加】

<h3>多选绑定一个数组</h3>

       <p>

            <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">

            <label for="JSPang">JSPang</label><br/>

            <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">

            <label for="JSPang">Panda</label><br/>

            <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">

            <label for="JSPang">PanPan</label>

            <p>{{web_Names}}</p>

       </p>

单选按钮绑定数据【例如男/女 性别单选框的选择 然后文本根本选择进行显示】



 

 

 

<h3>单选按钮绑定</h3>

<input type="radio" id="one" value="男" v-model="sex">

<label for="one">男</label>

<input type="radio" id="two" value="女" v-model="sex">

<label for="one">女</label>

<p>{{sex}}</p>

 

第7节：v-bind 指令【绑定标签上的属性】【图片，链接的绑定】

v-bind是处理HTML中的标签属性的，例如<div></div>就是一个标签，<img>也是一个标签，我们绑定<img>上的src进行动态赋值。

 

,html文件

<div id="app">

    <img v-bind:src="imgSrc"  width="200px">

</div>

 

Javascript文件

var app=new Vue({

    el:'#app',

    data:{

          imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg'

     }

})

v-bind缩写：

<!-- 完整语法 -->

<a v-bind:href="url"></a>

 

<!-- 缩写 -->

<a :href="url"></a>

 

绑定css样式：

html文件

 

    <div id="app">

       <p><img v-bind:src="imgSrc" width="200px" alt="liyitong"></p>

       <p><a :href="webUrl" target="_blank">姜浅予的博客</a></p>

       <div :class="className">1.绑定class</div>

       <div :class="{classA :isOk}">2.判断是否绑定class</div>

       <div :class="[classA,classB]">3.绑定class中的数组</div>

       <div :class="isOk?classA:classB">4.绑定class中的三元运算符</div>

       <hr>

       <div>

           <input type="checkbox" id="isOk" v-model="isOk">

           <label for="idOk">idOk={{isOk}}</label>

       </div>

       <div :style="{color:skyblue,fontSize:font}">5.绑定style</div>

       <div :style="styleObject">6.对象绑定style</div>

      

    </div>

 

Css/Javascript文件

   <style>

            .classA{

                color:yellowgreen

            }

            .classB{

                font-size: 150%

            }  

        </style>

 

    <script type="text/javascript">

        var app = new Vue({

            el:"#app",

            data:{

               imgSrc:"http://img3.imgtn.bdimg.com/it/u=3498026117,2665624262&fm=27&gp=0.jpg",

               webUrl:"http://www.cnblogs.com/yishichangan925/",

               className:"classA",

               isOk:true,

               classA:"classA",

               classB:"classB",

               skyblue:"skyblue",

               font:"16px",

               styleObject:{

                   color:"green",

                   fontSize:"24px"

               }

            }

        })     

    </script>

 

第8节：其他内部指令(v-pre & v-cloak & v-once)

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


<div v-pre>{{message}}</div>

这时并不会输出我们的message值，而是直接在网页中显示{{message}}

 

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

 

[v-cloak] {

  display: none;

}

 

 <div v-cloak>

  {{ message }}

</div>

 

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

<div v-once>第一次绑定的值：{{message}}</div>

<div><input type="text" v-model="message"></div>

 

<div id="app">

       <div v-pre>{{message}}</div>

       <!-- v-pre原样输出 -->

       <div v-cloak>渲染完成后再显示</div>

       <div v-once>{{message}}</div>

       <div><input type="text" v-model="message"></div>

       <div>{{message}}</div>

       <!-- 只让下面这个值变化，上面有v-once的message不变化 -->

       <!—因为v-once只进行一次渲染 -->

    </div>

 

    <script type="text/javascript">

        var app = new Vue({

            el:"#app",

            data:{

                message:"sleep!"

               }

           

        })

      

    </script>

标签
vue
message
label
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!