Vue3.X学习笔记

引用

 <script src="https://unpkg.com/vue@next"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    Vue.createApp({     //创建一个Vue实例，简单理解就说，我要使用Vue了
        template:'<div>Hello world</div>'
    }).mount('#app') //这个模板需要放一个位置，也就是说挂载，挂载到`id=app`的DOM上
</script>
</html>

创建应用app和挂载

//创建
 const app=Vue.createApp({})
//挂载到DOM
 const vm = app.mount("#app")

或者

 Vue.createApp({  
     ...
    }).mount('#app')

生命周期函数

生命周期函数，生命周期函数你可以这样理解，就是在** 在某一时刻会自动执行的函数 **，这句话你可以注意两个关键词:
(1)某一时刻
(2)自动执行

Vue3中有八个生命周期函数，

beforeCreate( ) ：在实例生成之前会自动执行的函数

created( ) : 在实例生成之后会自动执行的函数

beforeMount( ) : 在模板渲染完成之前执行的函数

mounted( ) : 在模板渲染完成之后执行的函数

beforeUpdate ：当data中的数据变化时，会立即自动执行的函数

updated：当data中的数据发生变化，页面重新渲染完后，会自动执行的函数

beforeUnmount( ) :当Vue应用失效时，会自动执行的函数

unmounted() : 当Vue应用失效时，且DOM完全销毁之后，会自动执行

这样就有四个关键节点了：创建、渲染、更新、销毁。最主要的理解是他们是自动执行的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo7</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    //生命周期函数，生命周期函数你可以这样理解，就是在** 在某一时刻会自动执行的函数 **，这句话你可以注意两个关键词某一时刻和自动执行

    //beforeCreate( ) ：在实例生成之前会自动执行的函数
    //created( ) : 在实例生成之后会自动执行的函数
    //beforeMount( ) : 在模板渲染完成之前执行的函数
    //mounted( ) : 在模板渲染完成之后执行的函数
    //beforeUpdate ：当data中的数据变化时， 会立即自动执行的函数
    //updated：当data中的数据发生变化，页面重新渲染完后，会自动执行的函数
    //beforeUnmount( ) :当Vue应用失效时，会自动执行的函数
    //unmounted() : 当Vue应用失效时，且DOM完全销毁之后，会自动执行
    const app=Vue.createApp({
        data() {
            return {
                message: 'com'
            }
        },
        methods: {
            handleItemClick() {
                this.message=this.message=='one'?'two':'one'
            }
        },
        beforeCreate() {
            console.log('在实例生成之前会自动执行的函数:beforeCreate')
        },
        created() {
            console.log('在实例生成之后会自动执行的函数:created')
        },
        beforeMount() {
            console.log('在模板渲染完成之前执行的函数:beforeMount')
        },
        mounted() {
            console.log('在模板渲染完成之后执行的函数:mounted')
        },
        beforeUpdate() {
            console.log('当data中的数据变化时， 会立即自动执行的函数:beforeUpdate')
        },
        updated() {
            console.log('当data中的数据发生变化，页面重新渲染完后，会自动执行的函数:updated')
        },
        beforeUnmount() {
            console.log('当Vue应用失效时，会自动执行的函数:beforeUnmount')
        },
        unmounted() {
            console.log('当Vue应用失效时，且DOM完全销毁之后，会自动执行:unmounted')
        },
        template: `<h2 v-on:click="handleItemClick">{{message}}</h2>` 
    })

    const vm = app.mount("#app")
    console.log(vm)
</script>
</html>

插值表达式和v-bind绑定数据

插值表达式就是经常看到的{{xxxx}}这样的东西

插值表达式输出html标签：v-html

return {
    message: '<i>jspang.com</i>'
}
...

template: `<h2 v-html="message"> </h2>`

[ 插值表达式只作一次渲染-v-once]

只有在第一次渲染去data中的值，而以后不再跟随data变化，这时候就要用到v-once指令。

<script>
    const app = Vue.createApp({
        data() {
            return {
                message: '<i>jspang.com</i>'
            }
        },
        methods: {
            handleItemClick() {
                this.message = this.message == 'jspang.com' ? "技术胖" : "jspang.com"
            }
        },
        template:`<h2 
                    v-on:click="handleItemClick" 
                    v-html="message"
                    v-once
                    ></h2>`
    })
    const vm = app.mount("#app")

</script>

插值表达式中是可以使用JS表达式的，最常用的表达式是三元运算符

<div>{{count>2?'大':'小'}}</div>

也可以这样：

<div>{{'jspang'+'.com'}}</div>
<div>{{1+2}}</div>

v-bind使用

现在我们给h2标签加入一个title属性，属性的值也想使用message

<h2 
  v-on:click="handleItemClick" 
  v-html="message"
  v-once
  title="message"
> </h2>`

这时候浏览器中鼠标放上时显示的确实message这个单词，而并没有出现我们想要的结果。这时候就可以使用v-bind标签了。写成下面的样式就可以了

v-bind:title="message"

v-bind的简写方式：

<h2 v-bind:title="message">{{message}}</h2>
<h2 :title="message">{{message}}</h2>

v-on基本用法

methods:{
    hanldClick(){
        alert('欢迎光临红浪漫')
    }
},
template:`
<h2 v-on:click="hanldClick">{{message}}</h2>
`

v-on还有一个简写方法，就是可以不屑v-on:用@代替，

template:`
<h2 @click="hanldClick">{{message}}</h2>
`

模板动态参数

这里v-bind:title中的title是来自data中的，就可以这样写。

const app=Vue.createApp({ 
    data(){
        return{
            message:'jspang.com' ,
            name:'title'
        }
    },
    //.........
    template:`
        <h2 
            @click="hanldClick"
            :[name]="message"
        >
        {{message}}
        </h2>
    `

})

可以看到我们在data中，定义了一个name的变量，值是一个字符串，然后在绑定属性时我们使用了[]方括号加上data中变量名的形式。这时候绑定的属性就变的灵活了，这种形式就是模板动态参数，也称为动态属性。

可以在浏览器中使用检查的方式，查看此时绑定属性的名称，如果进行修改，比如改成title1,浏览器中也会跟随改变，形成动态效果，这就是动态属性了

return{
    message:'jspang.com' ,
    name:'title',
    event:'click'
}

template:`
    <h2 
        @[event]="hanldClick"
        :[name]="message"
    >
    {{message}}
    </h2>
`

这时候就实现了动态绑定方法，可以打开浏览器，看一下效果。当点击<h2>标签时，也会弹出对应的alert效果。当然你还可以帮click改成其他相应事件，比如改成event:'mouseenter'，这样，当鼠标滑入时就可以相应弹出效果了。

阻止默认事件

最常见的默认事件就是表单的默认提交事件，比如我们这里写一个表单，然后写一个属性为submit的按钮，当点击按钮时，表单就会默认提交到对应的网址。

<form action="https://baidu.com">
    <button type="submit">默认提交</button>
</form>

这时候在浏览器中预览，点击“默认提交”按钮，就会立即跳转到百度上去，这就是默认响应事件。但是在开发中我们经常需要阻止这种默认响应事件。比如写出下面的代码。

methods:{
    hanldeClick(){
        alert('欢迎光临红浪漫')
    },
    hanldeButton(e){
        e.preventDefault()   //阻止默认事件
    }
},
//...
template:`
      //....
<form action="https://baidu.com" @click="hanldeButton">
    <button type="submit">默认提交</button>
</form>
`

或者使用prevent修饰符

<form 
    action="https://jspang.com" 
    @click.prevent="hanldeButton">
    <button type="submit">默认提交</button>
</form>
`

methods中的写法

hanldeButton(){
    alert('jspang.com') 
}

这样就可以阻止默认事件，直接响应对应事件的内容了。prevent就是阻止默认事件的修饰符。修饰符可以见简化一些代码的编写，也是比较常用的一个操作。

v-if判断

<h2  v-if="message=='com'" class="one" > {{message}} </h2>

template: `
<h2  v-if="message=='com'" class="one" > {{message}} </h2>
<h2  v-else  class="three"> {{message}} </h2>
    `

计算属性computed

计算属性的特性是：当计算属性依赖的内容发生变更时，才会重新执行计算

data(){
    return{
        message:'jspang.com' , 
        price:10,
        count:2
    }
},

template:` <h2> {{price * count}}</h2>`

写一个getTotal的方法。

methods:{
        getTotal(){
            return this.price * (this.count++);
        }
    },
    template:` <h2> {{getTotal()}}</h2>`

methods无法满足计算需求
比如：

methods:{
    getTotal(){
        return Date.now()
    }
},

这时候打开浏览器的控制台console，然后在里边通过手都的方式修改message的值vm.message='1111'。这时候问题产生了，你会发现getTotal( )方法被重新执行了。这就是这个问题的所在，这个问题其实可以用今天的主角coumputed计算属性来解决。

编写计算属性

computed:{
    total(){
        return Date.now()
    }
},

template:` 
    <h2>{{message}}</h2>
    <h2> {{total}}</h2>
`

这时候到浏览器中，用手动的方法，修改message的值，total的值就不会进行改变了。

vm.message='1111'

通过这个例子，你会对普通方法和计算属性的区别有所了解。这时候我们作一下总结：
(1)方法methods：只要页面重新渲染，就会重新执行方法
(2)计算属性computed: 当计算属性依赖的内容发生变更时，才会重新执行计算

完整例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo12-Vue中的计算属性</title>
    <script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>

    const app=Vue.createApp({ 
        data(){
            return{
                message:'jspang.com' , 
                price:10,
                count:2
            }
        },
        methods:{
            getTotal(){
                return Date.now()
            },
            addCount(){
                this.count++
            }
        },
        computed:{   //计算属性
            total(){
                return this.price * this.count
            }
        },
        template:`
            <h2> {{message}}</h2>
            <h2> {{getTotal()}}</h2>
            <h2> {{total}}</h2>
            <button @click="addCount">再买一个</button>
        `
    }) 
    const vm=app.mount("#app")
</script>

</html>

watch侦听器

watch侦听器的作用就是侦听一个data中的值的变化，变化后可以写一个方法，让其进行一些操作（业务逻辑的编写）。


data(){
            return{
                ...
                count:2
            }
        }
...
watch:{
    count(){  //监听data中的count值变化
            console.log('count changed')
    }
},

侦听器中的方法还可以接收两个参数，一个是现在的值（current），一个是变化之前的值（prev）。我们分别接收这两个值，并打印在控制台，看一下效果。

watch:{
    count(current,prev){
        console.log('watch changed')
        console.log('现在的值：',current)
        console.log('变化前的值：',prev)
    }
}

监听器watch和计算属性computed的区别

计算属性computed必须要返回一个值，而且在页面渲染的同时就会执行里边的业务逻辑，也就是会先执行一遍你写的业务逻辑，而watch只有发生变化时才会执行，也就是说值没有变化，它是不执行里边业务逻辑的。

method,watch,computed三者优先级

现在总结一下method、watch和computed三者如果都能实现相同的功能，它们之间的取舍和使用优先级。
（1）computed 和 method都能实现的功能，建议使用computed,因为有缓存，不用渲染页面就刷新。
（2）computed 和 watch 都能实现的功能，建议使用 computed，因为更加简洁。

模板样式绑定

         data(){
            return {
                classString:'red',
            }
        },
        template:`
            <h2 :class="classString">JSPang.com</h2>   //绑定同样使用v-bind，你也可以使用简写:
        ` 
....
//定义三个样式
<style>
    .red{color:red;}
    .green{color:green;}
    .background{ background-color: orange;}
</style>

对象的绑定方式

data(){
    return {
        classString:'red',
        classObject:{red:true,background:true}
    }
},
...
template:`
    <h2 :class="classObject">JSPang.com</h2>  
`

这时候再到浏览器中查看效果，就会有两个样式被绑定了red和background。如果你这首把red改为false，那效果就是只有背景颜色，没有字体颜色了。

数组的绑定方式

data(){
    return {
        classString:'red',
        classObject:{red:true,background:true},
        classArray:['green','background'],
    }
},

...
template:`
    <h2 :class="classArray">JSPang.com</h2>  
`

行内样式绑定

 const app=Vue.createApp({ 

        data(){
            return {
                styleString:'color:orange;',   
                styleObject:{
                    color:'red',
                    background:'yellow'
                }
            }
        },
        template:`
            <h2 :style="styleObject">JSPang.com</h2>  
        ` 
    }) 
    const vm=app.mount("#app")

v-if和v-show区别

data(){
    return{
        show:true,
    }
},

template:`
    <h2 v-show="show">JSPang.com</h2>  
`

这时候打开浏览器进行预览，是可以看到JSPang.com这个h2的DOM元素的。如果把数据项show改成false就看不到了。

v-if更加灵活，可以增加多个判断，比如v-else-iif和else，而v-show不具备这样的灵活性。

v-show控制DOM元素显示，其实控制的是css样式，也就是display:noe。现在你可以把data的值修改为false，然后刷新浏览器，打开浏览器调试器的Elements选项卡，就可以清楚的看到，这时候<h2>标签上的style样式就是display:none。

v-for循环

v-for循环数组方法

 const app=Vue.createApp({ 
        data(){
            return{   
                listArray:['谢大脚','刘英','晓红']
            }
        },
        methods:{
        },
        template:`
            <ul>
                <li v-for="(item,index) in listArray" :key="index+item">[{{index}}]{{item}}</li>
            </ul>
        `

    }) 
    const vm=app.mount("#app")

关于循环是key值
为了提高循环时性能，在数组其中一项变化后，整个数组不进行全部重新渲染，Vue提供了绑定key值的使用方法，目的就是增加渲染性能，避免重复渲染。
加唯一性key值，增加后vue就会辨认出哪些内容被渲染后并没有变化，而只渲染新变化的内容。

:key="index+item"

官方不建议使用索引index为key值，但此时又为了保持唯一性，所以这里使用了index+item进行绑定key值

v-for 循环对象

data(){
    return{  
        //......
        listObject:{
            GirlOne:'谢大脚',
            GirlTwo:'刘英',
            GirlThree:'晓红'
        }
    }
},

在模板中进行循环的时候，为了更好的语义化，我们把参数改为了value,key和index。然后进行循环。

<ul>
    <li v-for="(value,key,index)  in listObject" :key="key">
        [{{index}}]{{value}}-{{key}}
    </li>
</ul>

v-for循环数字

 <span v-for="count in 99">{{count}}|</span>

v-for循环中使用判断v-if

Vue给我们提供了<template>模版标签，也就是一个空的占位符，目的就是解决模板中为完成业务逻辑，而使用的无用html标签的现象。

template:`
            <ul>
                <template v-for="(value,key,index) in listObject">

                    <li v-if="index!=0">{{index}}[{{key}}]:{{value}}</li>

                </template>
               
            </ul>
           
        `

按钮绑定事件

methods:{
    addCountClick(){
        this.count++;
    },
},

...
template:`
    <div>目前已点佳丽数量{{count}}.</div>
    <button @click="addCountClick">增加一位佳丽</button>
    ` 
})

还可以用直接表达式

<button @click="count++">增加一位佳丽</button>

在编写响应事件事，是可以接受一个event参数的，这个参数就是关于响应事件的一些内容。我们直接打印出event，你会发现内容比较多，其实这些参数还是值得一看的，在工作中有时真的会用到

methods:{
    addCountClick(event){
        this.count++;
        console.log(event)
    },
},

多参数

methods:{
    addCountClick(num){
        this.count+=num
    },
},
template:`
        //.....
    <button @click="addCountClick(2)">增加一位佳丽</button>
    ` 
})

有参数的情况下使用event
方法是参数增加$event。

methods:{
    addCountClick(num,event){
        this.count+=num;
        console.log(event.target)
    },
},
template:`
    <div>目前已点佳丽数量{{count}}.</div>
    <button @click="addCountClick(2,$event)">增加一位佳丽</button>
    ` 
})

一个按钮调佣2个方法

methods:{
    //...
    handleBtnClick1(){
        alert(1)
    },
    handleBtnClick2(){
        alert(2)
    },
},
...
<button @click="handleBtnClick1(),handleBtnClick2()">增加一位佳丽</button>

事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo19</title>
    <script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app=Vue.createApp({ 
    data(){
        return{
            count:0
        }
    },
    methods:{
        addCountClick(){
            this.count++
        },
        handleBtnClick1(){
            alert(1)
        },
    },
    template:`
        <div @click="handleBtnClick1">
            <div>目前已点佳丽数量{{count}}.</div>
            <button @click=" addCountClick()">增加一位佳丽</button>
       </div>
        ` 
    }) 
    const vm=app.mount("#app")

</script>

</html>

(1)stop修饰符

在Vue中要停止冒泡是非常简单的，只要加加一个事件修饰符stop就可以了。

<button @click.stop=" addCountClick()">增加一位佳丽</button>

(2)self修饰符

除了使用.stop修饰符，还有一种修饰符self，意思是只有点击自己的时候才会被执行。只不过加的位置要在家外层DOM元素的事件上。

template:`
        <div @click.self="handleBtnClick1">
            <div>目前已点佳丽数量{{count}}.</div>
            <button @click=" addCountClick()">增加一位佳丽</button>
       </div>
        `

这时候你会发现点击那里，都没办法触发hanldeBtnClick1方法了，这是因为目前最外层div下都是独立的DOM元素，就是都有成对标签出现，都不属于最外自己，都是他们的子元素。

可以编写一段专属最外层DIV的文字。

template:`
        <div @click.self="handleBtnClick1">
            我是最外层的DIV文字
            <div>目前已点佳丽数量{{count}}.</div>
            <button @click=" addCountClick()">增加一位佳丽</button>
       </div>
        `

这样当点击我是最外层的DIV文字时，就会触犯handleBtnClick1方法了。

(3)prevent修饰符：

阻止默然行为的修饰符，这个以前讲过，例如阻止form表单的默认提交行为。

(4)capture修饰符

改成捕获模式，默认的模式都是冒泡模式，也就是从下到上，但是你用capture后，是从上到下的。

methods:{
    addCountClick(){
        this.count++
        alert(0)  //修改了此处
    },
    handleBtnClick1(){
        alert(1)
    },
},
template:`
    <div @click.capture="handleBtnClick1">  //修改了此处
        我是最外层的DIV文字
        <div>目前已点佳丽数量{{count}}.</div>
        <button @click=" addCountClick()">增加一位佳丽</button>
    </div>
    `

(5)once修饰符

事件只执行一次（视频中作演示）。

template:`
    <div @click.self="handleBtnClick1">
        我是最外层的DIV文字
        <div>目前已点佳丽数量{{count}}.</div>
        <button @click.once=" addCountClick()">增加一位佳丽</button>
    </div>
    `

(6)passive修饰符：解决滚动时性能的修饰符

按键鼠标修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo21</title>
    <script src="https://unpkg.com/vue@next" ></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    const app=Vue.createApp({ 
    data(){
        return{}
    },
    methods:{
    },
    template:`
        <div">
            <input />
        </div>
        ` 
    }) 
    const vm=app.mount("#app")

</script>

</html>

然后在methods部分加入一个方法handleKeyDwon( )，具体内容只是在控制台打印出来keydown。

methods:{
    handleKeyDown(){
        console.log('keydow....')
    }
},

然后在模板中的<input />中绑定键盘(任何按键)按下时响应keydown。

template:`
    <div">
        <input @keydown="handleKeyDown"/>
    </div>
    `

单个按键

就是指定键盘上某个特殊的按键时才会响应事件方法
如果现在的需求是，上面的代码只有在按下回车时，才在控制台进行打印，这时候就需要按键修饰符了。我们学的第一个按键修饰符enter

template:`
    <div">
        <input @keydown.enter="handleKeyDown"/>
    </div>
    ` 
    })

类似这样只响应单个按键的修饰符有很多:
enter 、tab、delete、esc、up 、down、left、right

鼠标修饰符

除了按键修饰符，还有鼠标修饰符，就是按下鼠标上的某个键时，才会响应。

最常用的就是: left、right、middle

现在的需求是在页面上作一行文字JSPang.com，然后只有用鼠标右键点击时，才会弹出alert( )。

先在methods里编写一个handleClick方法。

methods:{
   //...
    handleClick(){
        alert('click')
    }
},

然后在模板中使用鼠标修饰符，确定只有点击鼠标右键时才会响应。

<div @click.right="handleClick">JSPang.com</div>

表单数据双向绑定

<script>
    const app=Vue.createApp({ 
    data(){
        return{
            name:''
        }
    },
    template:`
        <div>
            <div>{{name}}</div>
            <input v-model="name" />  //双向绑定
        </div>
        ` 
    }) 
    const vm=app.mount("#app")
</script>

data中的变量改变时，绑定的数据会跟随变化，此为一项修改；当通过页面修改数据，data中的变量也随之改变，这就是另一项修改。两个彼此依存改变，就为双向数据绑定。

目前这种就完成了<input />的双向数据绑定。

textarea数据双向绑定

以前我们写HTML的时候，写textarea标签都是成对出现的，比如这样<textarea></textarea>，如果想在Vue中实现textarea的双向数据绑定，这时候只要写单标签就可以了，剩下的事情Vue底层就帮你完成了。

template:`
    <div>
        <div>{{name}}</div>
        <div><input v-model="name" /></div>
        <div><textarea v-model="name" /></div>  
    </div>
    `

checkbox数据双向绑定

checkbox是一个勾选框（复选框），如果只有一个选项时，我们可以给<checkbox />一个布尔值，也就是true或者false。

现在data中新声明一个变量checked.

data(){
    return{
        name:'',
        checked:false
    }
},
...

<div>{{checked}}<input type="checkbox" v-model="checked" /></div>

checkbox还有一个功能就是复选，可以选择多个。

比如还是象牙山三大美女的例子，现在勾选谁，谁就可以显示在页面上。

这时候要先定义一个变量，这个变量是一个空数组。

data(){
    return{
        name:'',
        checked:false,
        girls:[]
    }
},
...
<div>
    {{girls}}
    大脚<input type="checkbox" v-model="girls" value="大脚" />
    刘英<input type="checkbox" v-model="girls" value="刘英" />
    晓红<input type="checkbox" v-model="girls" value="晓红" />
</div>

radio数据绑定

会了checkbox的双向数据绑定，radio单选按钮就简单了。但是需要注意的是，既然是单选，这时候data中的变量就不能是一个数字了，一般是一个字符串。比如我们这里新定义了一个girl的变量。

data(){
    return{
        name:'',
        checked:false,
        girls:[],
        girl:'',
    }
},
...
<div>
    {{girl}}
    大脚<input type="radio" v-model="girl" value="大脚" />
    刘英<input type="radio" v-model="girl" value="刘英" />
    晓红<input type="radio" v-model="girl" value="晓红" />
</div>

绑定修饰符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo23</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                checked: true,
            }
        },

        template: `
        <div>{{checked}}<input type="checkbox" v-model="checked" /></div>
        `

    })
    const vm = app.mount("#app")

</script>

</html>

在浏览器中预览时，当选择复选框时，会显示true，没选中显示false。

现在的需求是，我选中的时候显示JSPang.com，没选中的时候显示技术胖。这时候要如何处理那？

Vue给我们提供了这样两个属性true-value和false-value。我们在Data中新声明一个变量name,值为空字符串。

data() {
    return {
        checked: true,
        name: '',
    }
},
...
template: `
<div>{{name}}
    <input 
        type="checkbox" 
        v-model="name"  
        true-value="JSPang.com"
        false-value="技术胖"
        /></div>
`

v-model 数据修饰符--lazy修饰符

v-model也有很多实用的修饰符，现在就学习一下。第一个修饰符lazy，这个也叫做懒更新修饰符。

我们作一个input的绑定效果,现在data中声明一个message变量，值为空。然后在模板中写一个<input />并和message进行双向数据绑定。

data() {
    return {
        checked: true,
        name: '',
        message:'',
    }
},
...
<div>
    {{message}}<input v-model.lazy="message" />
</div>

这时候当你在文本框中输入任何内容的时候，插值表达式会跟着改变。如果你不想马上显示，就可以用lazy修饰符，这样就可以实现当输入完成后，失去焦点再进行改变。

number修饰符

<div>
    {{typeof message}}<input v-model.number="message" />
</div>

trim修饰
trim修饰符大家一定不陌生，它是用来消除input框输入内容前后的空格的。现在我们再字符串上输入空格，其实它会在DOM元素上进行增加空格的，这个可以在控制台清楚的看出(详细请看视频操作)。加入trim修饰符后，Vue就会自动给我们去除前后的空格。

<div>
    {{message1}}<input v-model.trim="message1" />
</div>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 158,233评论 4赞 360
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,013评论 1赞 291
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 108,030评论 0赞 241
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 43,827评论 0赞 204
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,221评论 3赞 286
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,542评论 1赞 216
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,814评论 2赞 312
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,513评论 0赞 198
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,225评论 1赞 241
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,497评论 2赞 244
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 31,998评论 1赞 258
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,342评论 2赞 253
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 32,986评论 3赞 235
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,055评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,812评论 0赞 194
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,560评论 2赞 271
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,461评论 2赞 266