您的位置:时时app平台注册网站 > web前端 > Vue.js2.0中的变化(持续更新中)【彩世界网址】

Vue.js2.0中的变化(持续更新中)【彩世界网址】

2019-12-06 23:00

现行反革命写法:

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

<body>
    <div id="app">
        <select id="city" v-model="selected" multiple>
            <option v-for="option in options" v-bind:value="option.text">{{option.value}}</option>
        </select>
        <br>
        <span>Selected is:{{selected}}</span>
    </div>
</body>    
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            selected: [],
            options: [
                {value:'beijing',text:'A'},
                {value:'shanghai',text:'B'},
                {value:'guangzhou',text:'C'}
            ]
        }
    })
</script>
7.在Vue2.0中replace: false已经被撤消,因为以后组件总会取代被绑定的要素

      v-show也是标准渲染指令,和v-if指令不一样的是,使用v-show指令的因素始终会被渲染到HTML,它只是轻易地为要素设置CSS的style属性。

var vm = new Vue({
        el: '#app',
        data: {
            items: [
                {msg:'1'},
                {msg:'2'},
                {msg:'3'}
            ]
        },
        methods: {
            yes: function(){
                vm.items.$set(0,{

      v-else成分是不是渲染在HTML中,决议于前面使用的是v-if还是v-show指令。

3.关于Vue1.0中央银行使$set方法来修改数组的主意已经转移,下边例子是想纠正数组中的第三个内容,早先写法是:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <h1>Hello, Vue.js!</h1> <h1 v-show="yes">Yes!</h1> <h1 v-show="no">No!</h1> <h1 v-show="age >= 25">Age: {{ age }}</h1> <h1 v-show="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>

如今温馨在学习Vue.js,在看一些课程的时候可能Vue更新太块了导致课程所讲知识和前些天Vue的版本不符,进而报错,我会在随后的帖子持续更新Vue的变通与更新,大家也足以生龙活虎并交流,协同监督学习!

      v-bind指令能够在其名目后边带二个参数,中间放叁个冒号隔离,这几个参数平常是HTML成分的表征(attribute),比方:v-bind:class

2.关于Vue中partial被撤回的难题,这里能够用is来动态绑定组件

      有两种样式调用方法:绑定二个办法(让事件指向方法的引用),可能选拔内联语句。

6.在给select增添multiple属性唯有,数据为数组格局,如果未有增加便是用字符串
<body>
    <div id="app">
        <select id="city" v-model="city">
            <option value="beijing">beijing</option>
            <option value="shanghai">shanghai</option>
            <option value="guangzhou">guangzhou</option>
        </select>
        <br>
        <span>City is:{{city}}</span>
    </div>
</body>    
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            city: 'guangzhou'
        }
    })
</script>

<!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.newPerson卡塔尔国; // 加多完newPerson对象后,重新载入参数newPerson对象 this.newPerson = {name: '', age: 0, sex: 'Male'} }, deletePerson: function(index卡塔尔{ // 删二个数组元素this.people.splice(index,1卡塔尔(英语:State of Qatar); } } }卡塔尔(英语:State of Qatar) </script> </html>

      msg: '4'
               })
            }
        }
    })

      这段代码中v-if为true,前边的v-else不会渲染到HTML;v-show为tue,可是前面包车型地铁v-else仍旧渲染到HTML了。

4.关于Vue中事情未发生前的$remove方法已经移除,用this.items.indexOf(item卡塔尔只怕直接this.items(index卡塔尔来收获被删除的要素

      那几个命令满含贰个表达式,表明式的含义是:高亮当前页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for中操作删除成分</title>
    <script src=";
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(item,index) in items">
                {{index}}.{{item.color}}
                <button v-on:click="fn1(item)">vm.items.splice(index,1)</button>
                <button v-on:click="fn2(index)">vm.items.splice(index,1)</button>
            </li>
        </ul>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            show: false,
            items: [
                {color: 'blue'},
                {color: 'yellow'}
            ]
        },
        methods: {
            fn1: function(item){
                var index = this.items.indexOf(item);
                if(index !== -1){
                    this.items.splice(index,1)
                }
            },
            fn2: function(index){
                this.items.splice(index,1)
            }
        }
    })
</script>
</html>

<!--完整语法--> <a href="javascripit:void(0卡塔尔(英语:State of Qatar)" v-bind:class="activeNumber === n 1 ? 'active' : ''">{{ n 1 }}</a> <!--缩写语法--> <a href="javascripit:void(0卡塔尔" :class="activeNumber=== n 1 ? 'active' : ''">{{ n 1 }}</a> <!--完整语法--> <button v-on:click="greet">Greet</button> <!--缩写语法--> <button @click="greet">Greet</button>

8.以后Vue2.0中不或许直接在非new出来的实例中运用el

      Vue.js为最常用的三个指令v-bind和v-on提供了缩写情势。v-bind指令能够缩写为贰个冒号,v-on指令可以缩写为@符号。

1.关于Vue中$index获取索引值已经撤回,多用来四个成分的操作,像ul中的li,通过v-for来营造多少个li,假诺对于里边的某部恐怕有些li操作的话,须要选择到索引值,用法如下;

      Vue.js的指令是以v-早先的,它们功能于HTML成分,指令提供了生龙活虎部分破例的特色,将下令绑定在要素上时,指令会为绑定的目的成分增添一些非同一般的一举一动,大家得以将下令看作特殊的HTML天性(attribute)。

在那处不可能用js中的index 来使索引值扩充

      注意v-for="n in pageCount"那行代码,pageCount是一个整数,遍历时n从0最初,然后遍历到pageCount –1终了。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button v-on:click="reverse">点击</button>
    <input v-model="newtodo" v-on:keyup.enter="add">
    <ul>
      <li v-for="(todo,index) in todos">
        <span>{{todo.text}}</span>
        <button v-on:click="remove(index)">删除</button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      todos: [
        {text:'作者是一之前就有个别哦!'}
      ],
      newtodo: ''
    }
  },
  methods: {
    reverse: function(){
      this.msg = this.msg.split('').reverse().join('')
    },
    add: function(){
      var text = this.newtodo.trim();
      if(text){
        this.todos.push({text:text});
        this.newtodo = ''
      }
    },
    remove: function(index){
      this.todos.splice(index,1)
    }
  }
}
</script>

v-if指令

5.Vue1.0中的$key已经被吊销

      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>

var vm = new Vue({
        el: '#app',
        data: {
            items: [
                {msg:'1'},
                {msg:'2'},
                {msg:'3'}
            ]
        },
        methods: {
            yes: function(){
                vm.$set(vm.items[0],
                    'msg', '4'
                )
            }
        }
    })

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <p><input type="text" v-model="message"></p> <p> <!--click事件直接绑定三个方法--> <button v-on:click="greet">Greet</button> </p> <p> <!--click事件选取内联语句--> <button v-on:click="say('Hi'卡塔尔国">Hi</button> </p> </div> </body> <script src="js/vue.js"></script> <script>var vm = new Vue({ el: '#app', data: { message: 'Hello, Vue.js!' }, // 在 `methods` 对象中定义方法 methods: { greet: function(卡塔尔 { // // 方法内 `this` 指向 vm alert(this.message) }, say: function(msg) { alert(msg) } } }) </script> </html>

<body>
    <div id="app">
        <button v-on:click="change">变化</button>
        <p>{{currentView}}{{msg}}</p>
    </div>
    <component v-bind:is="currentView"></component>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            currentView: 'hello',
            msg: '星豪,迎接来到Vue的世界!'
        },
        methods: {
            change: function(){
                var arr = ['hello','hi'];
                var index = arr.indexOf(this.currentView);
                if(index < 1){
                    this.currentView = arr[index 1]
                }else{
                    this.currentView = arr[0]
                }
            }
        },
        components: {
            hello: {template: '<p>Hello</p>'},
            hi: {template: '<p>你好</p>'}
        }
    })
</script>

      Greet开关将它的单击事件直接绑定到greet(卡塔尔方法,而Hi开关则是调用say(卡塔尔方法。

那是自个儿要好组装的一个有些,注重在于index的接受。

v-bind:argument="expression"

      综合示范

      items是一个数组,item是现阶段被遍历的数组成分。

v-if="expression"

v-on指令

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="styles/demo.css" /> </head> <body> <div id="app"> <table> <thead> <tr> <th>Name</th> <th>Age</th> <th>Sex</th> </tr> </thead> <tbody> <tr v-for="person in people"> <td>{{ person.name }}</td> <td>{{ person.age }}</td> <td>{{ person.sex }}</td> </tr> </tbody> </table> </div> </body> <script src="js/vue.js"></script> <script>var vm = new Vue({ el: '#app', data: { 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' }] } }) </script> </html>

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

      display: none;

v-else指令

      今后我们早已介绍了有个别Vue.js的根基知识了,结合以上文化我们得以来做个小德姆o。

      上边这段代码营造了一个简约的分页条,v-bind指令功用于成分的class性子上。

v-show指令

      v-if:

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

v-for指令

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

v-bind和v-on的缩写

Vue

v-bind指令

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

v-for="item in items"

      能够用v-else指令为v-if或v-show增添二个“else块”。v-else成分必得马上跟在v-if或v-show成分的背后——不然它无法被辨认。

      v-if是准绳渲染指令,它依照表达式的真假来删除和插入成分,它的着力语法如下:

本文由时时app平台注册网站发布于web前端,转载请注明出处:Vue.js2.0中的变化(持续更新中)【彩世界网址】

关键词: