一切都是浮云

# 模板语法

# 插值

插值通常使用{{}}大胡子语法，下面的就是一个插值

<div id="root">
    <h2>{{msg}}</h2>
</div>
<script>
var root = new Vue({
    el:'#root',
    data: {
        msg:'张三'
    }
})
</script>

# v-text指令

还是推荐使用大胡子写法

<div id="root">
    <h2>{{msg}}</h2>
    <h2 v-text="msg"></h2>

    <hr>

    <h2>{{html}}</h2>
    <h2 v-text="html"></h2>

</div>
<script>
var root = new Vue({
    el:'#root',
    data: {
        msg:'张三',
        html: '<p>段落</p>'
    }
})
</script>

# v-html指令

当我们想把 data中的某个变量，这个变量里面包含html代码，我们想解析这个html代码。

<div id="root">
    <div v-html="p"></div>
</div>

<script>
    var root = new Vue({
        el: '#root',
        data: {
            p: '<p>段落</p>'
        }
    })
</script>

# v-once 指令

该指令只响应数据一次，之后则不会再更新。

<div id="root">
    <h2 v-once>{{msg}}</h2>
</div>

<script>
    var root = new Vue({
        el: '#root',
        data: {
            msg: '张三'
        }
    })
</script>

# v-bind 指令

该指令用于绑定html特性或者自定义的属性，特性分静态的，动态的。v-bind的目的就是把静态的特性改变为动态特性

以下代码是错误的

<div id="root">
    <h2 id="{{id}}">标题2</h2>
</div>

注意：大胡子语法不能用特性(属性)上面

为了解决上面的问题，引申出v-bind指令

注意：如果特性是字符串数字(例如'20')，那么v-bind会自动将它转换为数字

<div id="root">
    <!-- 
        错误的写法
        <h2 id="{{ID}}">标题2</h2> 
    -->
    <!-- 正确的写法 -->
    <h2 v-bind:id="ID">标题2</h2>
</div>
<script>
    var root = new Vue({
        el: '#root',
        data: {
            ID: 'user2'
        }
    })
</script>

<div id="root">
    <h2 v-bind:id="'item'+myid">标题2</h2>
    <!-- v-bind缩写形式如下 -->
    <h2 :id="'item'+myid">标题3</h2>
</div>
<script>
    var root = new Vue({
        el: '#root',
        data:{
            myid: 8
        }
    })
</script>

# v-on 指令

绑定事件要注意和原生态绑定之间的区别

<div id="root">
    <button onclick="alert('原生')">原生</button>
    <button v-on:click="alert('vue')">vue</button>
    <!-- v-on缩写形式如下 -->
    <button @click="alert('vue')">vue</button>
</div>
<script>
    var root = new Vue({
        el: '#root',
        methods: {
            alert(msg){
                alert(msg);
            }
        }
    })
</script>

# 修饰符

# 阻止默认动作

.prevent 用来阻止默认动作，比如右键菜单，提交表单，超级链接等 原生态阻止默认动作，采用event.preventDefault()

<div id="root">
    <button v-on:contextmenu.prevent="rightMenu">右击</button>
</div>  
<script>
    var root = new Vue({
        el: '#root',
        methods: {
            rightMenu(e){
                // e.preventDefaults()
                console.log('您单击了右键！');
            }
        }
    })
</script>

# 阻止冒泡

.stop 用来阻止冒泡

原生态阻止冒泡通常是 采用 event.stopPropagation()。

<div id="root">
    <div @click="bigHit()">
        <button @click.stop="smallHit()">按钮</button>
    </div>
</div>
<script>
    var root = new Vue({
        el: '#root',
        methods: {
            bigHit(){
                console.log('大单击');
            },
            smallHit(e){
                // e.stopPropagation()
                console.log('小单击');
            }
        }
    })
</script>

# v-model指令

双向绑定表单

  1. 绑定表单的默认值value、checked或者selected。
  2. 绑定输入状态 oninput、onchange。

# 修饰符

# number 数字

默认情况下v-model读取到的值是字符串类型

<div id="root">
    <input type="text" v-model.number="count">
    {{count+5}}
</div>
<script>
    var root = new Vue({
        el: '#root',
        data: {
            count: 0
        }
    })
</script>
# lazy 懒惰的

lazy 相当于 onchange事件

<div id="root">
    <input type="text" v-model.number.lazy="count">
    {{count+5}}
</div>
<script>
    var root = new Vue({
        el: '#root',
        data: {
            count: 0
        }
    })
</script>
# trim 清除首尾的空格

← 插槽 →