与此同时懂vue和razor的请教个难点哈

干什么要用vue呢?我以为到它跟razor毫无优势!比方前台页面里想显示一个Name,Razor的写法很简短:div@Name/div大概是div@Model.Name/div但Vue要在JS里先传进去@Name,然后再写New三个Vue再调用#div的Id,再渲染,笔者不知情那是吃饱了撑的没事干,还是Vue小编给大家加班和拉动专门的学业的机会?

第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!'

  }

 })

      v-if:

第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:''

     }

})

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:"",

               webUrl:"",

               className:"classA",

               isOk:true,

               classA:"classA",

               classB:"classB",

               skyblue:"skyblue",

               font:"16px",

               styleObject:{

                   color:"green",

                   fontSize:"24px"

               }

            }

        })     

    </script>

 

<a v-on:click="doSomething">

第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;能够使客商端 操作更流畅】

 

      有三种方式调用方法:绑定一个方法(让事件指向方法的援引),可能接纳内联语句。

第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>

 

 

      v-for指令基于一个数组渲染二个列表,它和JavaScript的遍历语法雷同:

第1节: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不许的,所以您要重新声多美滋(Dumex卡塔尔国个目的。

而是有一个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}}

  </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>

 

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="styles/demo.css" /> </head> <body> <div id="app"> <fieldset> <legend> Create New Person </legend> <div class="form-group"> <label>Name:</label> <input type="text" v-model="newPerson.name"/> </div> <div class="form-group"> <label>Age:</label> <input type="text" v-model="newPerson.age"/> </div> <div class="form-group"> <label>Sex:</label> <select v-model="newPerson.sex"> <option value="Male">Male</option> <option value="Female">Female</option> </select> </div> <div class="form-group"> <label></label> <button @click="createPerson">Create</button> </div> </fieldset> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Sex</th> <th>Delete</th> </tr> </thead> <tbody> <tr v-for="person in people"> <td>{{ person.name }}</td> <td>{{ person.age }}</td> <td>{{ person.sex }}</td> <td :class="'text-center'"><button @click="deletePerson($index)">Delete</button></td> </tr> </tbody> </table> </div> </body> <script src="js/vue.js"></script> <script>var vm = new Vue({ el: '#app', data: { newPerson: { name: '', age: 0, sex: 'Male' }, people: [{ name: 'Jack', age: 30, sex: 'Male' }, { name: 'Bill', age: 26, sex: 'Male' }, { name: 'Tracy', age: 22, sex: 'Female' }, { name: 'Chris', age: 36, sex: 'Male' }] }, methods:{ createPerson: function(卡塔尔国{ this.people.push(this.newPersonState of Qatar; // 加多完newPerson对象后,重新初始化newPerson对象 this.newPerson = {name: '', age: 0, sex: 'Male'} }, deletePerson: function(indexState of Qatar{ // 删二个数组成分this.people.splice(index,1卡塔尔(قطر‎; } } }卡塔尔 </script> </html>

第3节:走起自家的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里面编写第2回的vue代码

    <script type="text/javascript">

        var app = new Vue({

            el:"#app",

            data:{

                message:"sweet~"

            }

        })  

    </script>

 

      expression是贰个回到bool值的表达式,表明式能够是三个bool属性,也能够是叁个回来bool的运算式。比如:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h1>Hello, Vue.js!</h1> <h1 v-if="yes">Yes!</h1> <h1 v-if="no">No!</h1> <h1 v-if="age >= 25">Age: {{ age }}</h1> <h1 v-if="name.indexOf('jack') >= 0">Name: {{ name }}</h1> </div> </body> <script src="js/vue.js"></script> <script>var vm = new Vue({ el: '#app', data: { yes: true, no: false, age: 28, name: 'keepfool' } }) </script> </html>

第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,长久不要在客商提交和可操作的网页上选拔。

 

v-bind:argument="expression"

多选开关绑定多个值【勾选中true/撤除勾选false】

<h3>多选开关绑定二个值</h3>

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

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

 

 

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="styles/demo.css" /> </head> <body> <div id="app"> <ul class="pagination"> <li v-for="n in pageCount"> <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a> </li> </ul> </div> </body> <script src="js/vue.js"></script> <script>var vm = new Vue({ el: '#app', data: { activeNumber: 1, pageCount: 10 } }) </script> </html>

文本区域步入数据绑定

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

 

      v-show也是准绳渲染指令,和v-if指令分歧的是,使用v-show指令的要素始终会被渲染到HTML,它只是简短地为因素设置CSS的style属性。

修饰符

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h1 v-if="age >= 25">Age: {{ age }}</h1> <h1 v-else>Name: {{ name }}</h1> <h1>---------------------分割线---------------------</h1> <h1 v-show="name.indexOf('keep') >= 0">Name: {{ name }}</h1> <h1 v-else>Sex: {{ sex }}</h1> </div> </body> <script src="js/vue.js"></script> <script>var vm = new Vue({ el: '#app', data: { age: 28, name: 'keepfool', sex: 'Male' } }) </script> </html>

单选按键绑定数据【比如男/女 性别单选框的抉择 然后文本根本选拔举办展示】



 

 

 

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

 

      items是三个数组,item是如今被遍历的数组成分。

第8节:其他中间指令(v-pre & v-cloak & v-onceState of Qatar

v-pre: 在模板中跳过vue的编写翻译,直接出口原始值。正是在标签中参与v-pre就不会输出vue中的data值了。


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

那儿并不会输出大家的message值,而是一向在网页中突显{{message}}

 

v-cloak: 在vue渲染完钦点的所有事DOM后才实行体现。它必得和CSS样式一齐行使,

 

[v-cloak] {

  display: none;

}

 

 **<divv-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>

v-if="expression"

多选按钮绑定二个数组【也等于勾选给数组内增添】

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

      v-on指令用于给监听DOM事件,它的用语法和v-bind是相似的,举个例子监听<a>成分的点击事件:

      display: none;