累成一条狗

Vue常用语法

一、模板语法

1、双大括号表达式

【语法:】
{{exp}} 

用于向页面输入数据,即页面显示数据。

【举例:】
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="test">
    <p>{{message}}</p>
    <p>{{message.toUpperCase()}}</p>
    <p v-text="message"></p>    <!--<p v-text="message"></p> 等价于 <p>{{message}}</p>-->
    <p v-html="message"></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data: {
            message : '<a href="http://www.baidu.com">Baidu</a>'
        }
    });
</script>
</body>
</html>

 

2、指令

(1)强制绑定数据(v-bind)

【语法:】
v-bind : xxx = 'yyy'
或者简写为:
:xxx = 'yyy'    // 其中 yyy 被当做表达式去解析执行

用于绑定变化的属性值,即绑定某属性,当属性值变化时,属性随之变化。

【举例:】
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="test">
    <img src = "imgUrl" />
    <img v-bind:src="imgUrl" />
    <img :src="imgUrl" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data: {
            imgUrl : 'https://cn.vuejs.org/images/logo.png'
        }
    });
</script>
</body>
</html>

 (2)绑定事件监听(v-on)

【语法:】
v-on : click = 'xxx'
或者简写为:
@click = 'xxx'

用于绑定回调函数,其中方法在vue的 methods 中写。

【举例:】
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="test">
    <button v-on:click = "sayHello();">Hello</button>
    <button @click = "sayHi(message);">Hi</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data: {
            message : "Hello World"
        },
        methods: {
          sayHello : function (event) {
              alert(this.message);
          },
          
          sayHi(msg){
              alert(msg);
          }
        }
    });
</script>
</body>
</html>

 

二、计算属性、监视

1、计算属性:

(1)在 vue 的 computed 属性对象中定义计算属性的方法。
(2)方法的返回值作为一个属性,并在页面中使用 {{方法名}} 或者 v-model = "方法名" 等形式来显示计算的结果。
(3)执行情况: 在初始化 或者 属性的值发生改变时 执行。

【举例:】
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="test">
    <p>firstName <input type="text" placeholder="firstName" v-model="firstName"/></p>
    <p>lastName <input type="text" placeholder="lastName" v-model="lastName"/></p>
    <p>allName <input type="text" placeholder="allName" v-model="allName"/></p>
    <p>{{allName}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data: {
            firstName : "Li",
            lastName : "Tom",
        },
        computed :{
            allName(){
                return this.firstName + " " + this.lastName;
            }
        }
    });
</script>
</body>
</html>

  初始界面为:

 

对firstName 或 lastName 进行修改时,allName 的数据会跟随改变。
注:
  此时对allName修改不会影响最下面一行的数据(需要实现setter方法,用于监视)。

 

 

2、监视(类似于计算属性的效果)

(1)方式1:写在 vue 的 watch 属性里。
(2)方式2:使用 vue 的实例 的 $watch() 。被监视的属性值需要写在data里。
(3)当被监视的属性的值修改时,所有被用到的地方会自动修改。

【举例:】
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="test">
    <p>firstName <input type="text" placeholder="firstName" v-model="firstName"/></p>
    <p>lastName <input type="text" placeholder="lastName" v-model="lastName"/></p>
    <p>allName <input type="text" placeholder="allName" v-model="allName"/></p>
    <p>{{allName}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data: {
            firstName : "Li",
            lastName : "Tom",
            allName : "xx"
        },
       watch : {
//             firstName : function(newValue, oldValue){  //一般不用此写法
            firstName : function(value){
                   this.allName = value + " " + this.lastName; 
               }
       }
    });
    vm.$watch('lastName', function(value){
        this.allName = this.firstName + " " + value; 
    });
</script>
</body>
</html>

初始界面:

对firstName 或 lastName 进行修改时,allName 的数据会跟随改变。
注:
  此时对allName修改会影响最下面一行的数据。

 

3、getter、setter方法(通过计算属性来实现)

上述两种方法,对allName方法进行修改时,不会影响firstName 以及 lastName 的值。因为数据没有与之关联。
可以使用get、set方法(回调函数)来关联。
  get方法,当需要获得某属性时可以进行回调,用于返回当前属性的值。
  set方法,监视当前属性值,当属性值发生改变时进行回调,用于更新当前属性的值。
注:
  计算属性存在缓存,需要多次获得某属性的值时,只执行一次getter计算(只调用一次,值会存在缓存中)。

【举例;】
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="test">
    <p>firstName <input type="text" placeholder="firstName" v-model="firstName"/></p>
    <p>lastName <input type="text" placeholder="lastName" v-model="lastName"/></p>
    <p>allName <input type="text" placeholder="allName" v-model="allName"/></p>
    <p>{{allName}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data: {
            firstName : "Li",
            lastName : "Tom",
        },
        computed:{
            allName:{
                get(){
                    return this.firstName + ' ' + this.lastName;
                },
                set(value){
                    var names = value.split(' ');
                    this.firstName = names[0];
                    this.lastName = names[1];
                }
            }
        }
    });
</script>
</body>
</html>

初始界面为:

对值进行修改后:对任意一个name进行修改,相对应的地方均会被修改。

 

三、class、style绑定

  页面中,某元素的样式是需要变化的,class与style绑定就是用来实现动态样式效果的技术。动态的添加样式。

1、class绑定

【格式:】
:class = 'XXX'
注:
    XXX 可以是字符串、数组、对象

【举例:】
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
        .a{
            color: red;
        }
        .b{
            color: blue;
        }
        .c{
            color: yellow;
        }
        .size{
            font-size: 40px;
        }
    </style>
</head>
<body>
<div id="test">
    <p class="a">class绑定</p>
    <p class="a" :class="bClass">class绑定, XXX可以为字符串</p>
    <p class="a" :class="{c : isC, size : isSize}">class绑定, XXX可以为对象</p>
    <p class="a" :class="['size', bClass]">class绑定, XXX可以为数组</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data: {
            bClass : 'b',
            isC : true,
            isSize : false
        }
    });
</script>
</body>
</html>

 

2、style绑定

【格式:】
:style = "XXX"
注:
    XXX指的是对象,即形如:  :style = "{color : xxx, fontSize : xxx}"
    
【举例:】 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="test">
    <p style="color : red">style绑定</p>
    <p :style="{color : c, fontSize : fs + 'px'}">style绑定</p>
    <button @click="update">update</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data: {
            c : 'yellow',
            fs : 24
        },
        methods: {
            update:function(event){
                this.c = 'blue',
                this.fs = 40
            }
        }
    });
</script>
</body>
</html>

初始画面:

点击按钮后:

 

 

四、条件语句(条件渲染)、循环语句(列表渲染)

1、条件语句(v-if、v-else、v-else-if)

【举例:】
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="test">
    <div v-if="ok">Ok</div>
    <div v-else>No</div>
    <div v-if="message === 'A'">A</div>
    <div v-else-if="message === 'B'">B</div>
    <div v-else>C</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data: {
            message : "A",
            ok : true
        }
    });
</script>
</body>
</html>

初始界面:

改变值后:

 

2、v-show(类似于v-if)

v-show用法类似于v-if。
v-if是将标签移除(当需要时再创建),而v-show是将标签隐藏。
当页面频繁切换时,推荐使用v-show。

【举例:】
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="test">
    <div v-if="ok">Ok</div>
    <div v-else>No</div>
    <div v-show="ok">OK</div>
    <div v-show="!ok">No</div>
    <button @click="ok = !ok">change</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data: {
            ok : true
        }
    });
</script>
</body>
</html>

初始界面:

点击按钮后:(可以看到,v-if是将标签移除,而v-show是将标签隐藏)

 

3、v-for

用于遍历数组、或者对象。

【举例:】
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="test">
    <!--
        vue本身不会监视数组内部的变化(常规情况),即改变数组内部数据的内容,但数组的显示不会发生改变(即不会更新页面)。
        但是vue提供了一些改变数组内部数据的方法,比如 splice(),push()等,
        这些方法会先调用原生方法去改变值,然后更新界面,从而达到数组改变的目的。
    -->
    <ul>普通for循环,遍历数组
        <li v-for="(p, index) in persons" :key="index">
            {{index}} -- {{p.name}} -- {{p.age}} 
            -- <button @click="deletePerson(index)">delete</button>
            -- <button @click="updatePerson(index)">update</button>
            -- <button @click="addPerson(index)">add</button>
        </li>
    </ul>
    
    <ul>for-each循环,遍历数组
        <li v-for = "p in persons">
            {{p.name}} -- {{p.age}} 
        </li>
    </ul>
    
    <ul>for循环,遍历对象
        <li v-for="(value, key) in persons[1]" :key="key">
            {{value}} -- {{key}}
        </li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data: {
            persons : [
                {name: 'Tom', age: 18},
                {name: 'Jarry', age: 22},
                {name: 'Rose', age: 17},
                {name: 'Jack', age: 33}
            ]
        },
        methods: {
            deletePerson(index){
                this.persons.splice(index, 1);// 用于删除数组中的指定位置的一个数据,
            },
            updatePerson(index){
                var person = {name: 'Rick', age: 20};
//              this.persons[index] = person; // 此时只是改变了数组中某数据的值,但是页面不会刷新
                    this.persons.splice(index, 1, person); // 用于更新数组中的某个数据,改变数据后会刷新页面
            },
            addPerson(index){
                var person = {name: 'Link', age: 21};
                this.persons.splice(index, 0, person); // 用于向数组中增加一个数据
            }
        }
    });
</script>
</body>
</html>

初始界面:

 

进行增、删、改后的界面:

 

4、v-for补充实例:(过滤表单数据,并给数组排序)

【举例:】
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="test">
    <input type="text" v-model="inputName"/>
    <ul>
        <!--
            显示过滤后的数组
        -->
        <li v-for="(p, index) in filterPersons" :key="index">
            {{index}} -- {{p.name}} -- {{p.age}} 
        </li>
    </ul>
    <button @click="sortType(1)">Sort By Age Asc</button>
    <button @click="sortType(2)">Sort By Age Desc</button>
    <button @click="sortType(0)">Sort By Age Default</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data: {
            persons : [
                {name: 'Tom', age: 18},
                {name: 'Jarry', age: 22},
                {name: 'Rose', age: 17},
                {name: 'Jack', age: 33}
            ],
            inputName: '',
            sort: 0  // 用于排序,0表示默认排序,1表示升序,2表示降序
        },
        computed: {
            filterPersons(){
                // 使用filter方法过滤数组,filter不会去刷新页面,若想刷新页面,需将其重新赋给一个数组
                let fPersons = this.persons.filter(p => p.name.indexOf(this.inputName) != -1);
                if(this.sort == 1){
                    fPersons.sort(function(p1, p2){
                        return p1.age - p2.age;
                    });
                }else if(this.sort == 2){
                    fPersons.sort(function(p1, p2){
                        return p2.age - p1.age;
                    });
                }
                return fPersons;
            }
        },
        methods: {
            sortType(type){
                this.sort = type; 
            }
        }
    });
</script>
</body>
</html>

初始界面:

输入某数据后(返回过滤后的数组):

点击排序按钮,可以根据年龄进行排序:

 

五、事件处理

1、监听事件

可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。
以v-on:click为例:
(1)默认传入event。
(2)有参数时,可以使用$event传入。

【举例:】
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="test">
    <button @click="showA">clickA</button>
    <button @click="showB('hello')">clickB</button>
    <button @click="showC('world', $event)">clickC</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data: {
            message : 'hello'
        },
        methods: {
            // 默认传入event
            showA(){
                alert(event.target.innerHTML);
            },
            showB(name){
                alert(event.target.innerHTML + " " + name);
            },
            // 可以使用 $event 传入event
            showC(name, tt){
                alert(tt.target.innerHTML + " " + name);
            }
        }
    });
</script>
</body>
</html>

点击clickA:(使用默认传入的event)

点击clickB:(使用默认传入的event)

点击clickC:(使用$event传入的event)

 

2、事件修饰符

通常需要在事件处理程序中 调用 event.preventDefault() 取消默认事件, 调用 event.stopPropagation()取消冒泡事件。这样写比较繁琐,所以vue提供了事件修饰符来简化这个操作。

【常用事件修饰符】
.stop   // 取消事件冒泡机制
.prevent  // 阻止浏览器默认行为
.capture  // 使用事件捕获模式,从外到内依次执行,然后再按自然顺序执行触发的事件。
.self  // 事件只作用本身
.once  // 点击事件将只会触发一次

【比如:】
    @click.prevent 中的 .prevent
    等价于
    event.preventDefault();

【举例:点击BaiduA,会跳转链接,点击BaiduB,BaiduC不会跳转。】
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="test">
    <a href="http://www.baidu.com" @click="testA">BaiduA</a>
    <a href="http://www.baidu.com" @click="testB">BaiduB</a>
    <a href="http://www.baidu.com" @click.prevent="testC">BaiduC</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data: {
            message : 'hello'
        },
        methods: {
            testA(){
                alert("hello");
            },
            // 取消链接跳转机制
            testB(){
                alert("hello");
                event.preventDefault();
            },
            testC(){
                alert("hello");
            }
        }
    });
</script>
</body>
</html>

 

3、按键修饰符

在处理按键时,一般通过 event.keyCode 来处理。同样,vue也提供了简单的写法。

【常用按键修饰符:】
.enter   // 捕获enter键
.tab   // 捕获tab键
.delete  // 捕获“删除”和“退格”键
.space  // 捕获space键
.up  // 捕获上方向键
.down  // 捕获下方向键
.left  // 捕获左方向键
.right  // 捕获右方向键
.esc  // 捕获esc键

【比如:】
 @keyup.enter 或者 @keyup.13 
 等价于  
 event.keyCode === 13
    
【举例:】
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="test">
    <input type="text" @keyup="testA"/>
    <input type="text" @keyup="testB"/>
    <input type="text" @keyup.enter="testC"/>
    <input type="text" @keyup.13="testD"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#test",
        data: {
            message : 'hello'
        },
        methods: {
            // 输入任意按键均会跳出弹窗
            testA(){
                alert("hello");
            },
            // 输入enter 才会跳出弹窗
            testB(){
                if(event.keyCode === 13){
                    alert("hello")
                }
            },
            // 输入enter 才会跳出弹窗
            testC(){
                alert("hello");
            },
            // 输入enter 才会跳出弹窗
            testD(){
                alert("hello");
            }
        }
    });
</script>
</body>
</html>

 

六、表单输入绑定

1、v-model的作用

(1)可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 等表单元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

(2)v-model负责监听用户的输入事件并更新数据。其会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源,所以可以在data中赋初值。

2、v-model绑定举例

【举例:使用v-model改变value的值】
<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>

    <body>
        <div id="test">
            <!--@submit.prevent 禁止提交表单-->
            <form action="XX" method="post" @submit.prevent="handleSubmit">
                <!-- 表单域可以用fieldset标签包起来,并用legend标签来说明表单大体内容.
                    fieldset默认有边框,legend也有默认样式,可以清除默认样式。
                -->
                <fieldset style="border:none">
                    <legend style="display:none">登录表单</legend>
                    <p>
                        <label for="name">姓名: </label>
                        <input type="text" id="name" v-model="userName" />
                    </p>
                    <p>
                        <label for="pw">密码: </label>
                        <input type="password" id="pw" v-model="password"/>
                    </p>
                    <p>
                        <!--
                            对于单选框,复选框,其v-model绑定的值与 value属性的值有关。
                        -->
                        <span>性别: </span>
                        <input type="radio" id="female" name="sex" value="女" v-model="sex"/>
                        <label for="female"></label>
                        <input type="radio" id="male" name="sex" value="男" v-model="sex"/>
                        <label for="male"></label>
                    </p>
                    <p>
                        <span>爱好: </span>
                        <input type="checkbox" name="favorites" id="basketball" value="basketball" v-model="favorites"/>
                        <label for="basketball">篮球</label>
                        <input type="checkbox" name="favorites" id="football" value="football" v-model="favorites"/>
                        <label for="football">足球</label>
                        <input type="checkbox" name="favorites" id="volleyball" value="volleyball" v-model="favorites"/>
                        <label for="volleyball">排球</label>
                    </p>
                    <p>
                        <span>城市: </span>
                        <select v-model="city">
                            <option value="0">未选择</option>
                            <!--对于选择框,v-model的绑定也与value有关,其中使用v-bind绑定value,可以监控value的改变-->
                            <option :value="p.id" v-for="(p, index) in citys">{{p.cityName}}</option>
                        </select>
                    </p>
                    <p>
                        <textarea id="desc" cols="30" rows="5" placeholder="自我介绍" v-model="text"></textarea>
                    </p>
                    <button type="submit">确定</button>
                </fieldset>
            </form>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#test",
                data: {
                    // 设置初始值
                    userName: '',
                    password: '',
                    sex: '', 
                    favorites: ['volleyball'],  //对于复选框,应该以一个数组来保存value的数据
                    citys: [{
                        id: 1,
                        cityName: "Beijing"
                    }, {
                        id: 2,
                        cityName: "Shanghai"
                    }, {
                        id: 3,
                        cityName: "nanjing"
                    }],
                    city: '1',
                    text: ''
                },
                methods: {
                    handleSubmit() {
                        console.log(this.userName, this.password, this.sex, this.favorites, this.city, this.text);
                    }
                }
            });
        </script>
    </body>

</html>

 

七、生命周期

1、初始阶段(执行一次)

(1)beforeCreate()
(2)created()
(3)beforeMount()
(4)mounted()

2、更新阶段(执行n次)

(1)beforeUpdate
(2)updated

3、销毁阶段(销毁vue实例,执行一次 )

(1)beforeDestory
(2)destoryed

Vue 实例生命周期

【举例:】
<!doctype html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>

    <body>
        <div id="test">
            <!--点击按钮后,销毁vue实例,定时器不会被销毁,需要自己手动销毁-->
            <button @click="destoryVue">Stop</button>
            <p v-show="show">Hello World</p>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#test",
                data: {
                    show: true,
                    setIntervalId: 0
                },
                // 初始化状态
                beforeCreate(){
                    console.log('-----beforeDestroy------');
                },
                created(){
                    console.log('-----created------');
                },
                beforeMount(){
                    console.log('-----beforeMount------');
                },
                // mounted初始化显示后被调用
                mounted(){
                    this.setIntervalId = setInterval(()=>{
                        console.log('-----mounted------');
                        this.show = !this.show;
                    }, 1000)
                },
                // 更新状态
                beforeUpdate(){
                    console.log('-----beforeUpdate------');
                },
                updated(){
                    console.log('-----updated------');
                },
                // 销毁状态
                beforeDestroy(){
                    // 手动清除定时器
                    console.log('-----beforeDestroy------');
                    clearInterval(this.setIntervalId);
                },
                destroyed(){
                    console.log('-----destroyed------');
                },
                methods:{
                    destoryVue(){
                        console.log('-----destoryVue------');
                        // 销毁vue实例
                        this.$destroy();
                    }
                }
            });
        </script>
    </body>

</html>

首先进入初始化状态,由于mounted中包含定时器,更新状态随之变化,点击stop按钮后,启动vue销毁过程。

 

posted on 2019-07-20 00:15  累成一条狗  阅读(1000)  评论(0编辑  收藏  举报

导航