Vue 学习笔记入门篇-小结

v-model的作用是？

A: 双向绑定数据

<input type="text" v-model="msg"/>   {{msg}} <!--取数据-->

v-for demo

<div id="app">
    <ul>
        <li v-for="girl in girls">{{girl}}</li>
    </ul>
</div>
    new Vue({
        el: '#app',
        data: {
            girls: {
                girl1: '徐若瑄',
                girl2: '欧阳娜娜',
                girl3: '山田直美'
            }
        },
    })

使用v-bind，v-on写出一个demo

v-bind

<div id="box">
    <input type="text" v-bind:value="msg">
</div>
<script>
    new Vue({
        el: "#box",
        data(){
            return {
                msg: "12222"
            }
        }
    })
</script>

v-on

<div id="box">
    <!-- v-on -->
    <button v-on:click="say">按钮</button>
    <!--<button @click="say">按钮</button>-->
</div>

<script>
    new Vue({
        el: "#box",
        data(){
            return {}
        },
        methods: {
            say() {
                alert(111);
            }
        }
    })
</script>

v-if,v-else,v-show,v-text,v-html,v-on,v-bind，v-once,v-cloak的作用分别是什么？

• v-if：根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。
• v-else：跟在v-if后面使用
• v-show：根据表达式之真假值，切换元素的 display CSS 属性。

v-if 和v-show对比的区别 就是是否删除dom节点 默认值为false

• v-text 解析文本
• v-html 解析html标签
• v-on 绑定事件 函数必须写在methods里面
• v-bind 动态绑定 作用： 及时对页面的数据进行更改,设置HTML属性
• v-once 进入页面时 只渲染一次 不在进行渲染
• v-cloak 防止闪烁