Vue的其他API day03补充

wuchangjian2021-11-04 16:53:34编程学习

1.过渡 动画

1)标签要有v-if v-show 才会有效果;

2)需要过渡的元素要使用<transition></transition>标签包裹;

3)需要过渡的css属性要使用transition这个属性(可以写在vue的下列属性中)

        当元素从显示到隐藏:v-leave  v-leave-active  v-leave-to

        当元素从隐藏到显示:v-enter  v-enter-avtive  v-enter-to

2.ref

ref用于获取dom元素

在root组件上dom元素上的ref代表该dom元素,子组件上的ref代表该组件实例。

3.表单的数据绑定

<body>
    <div id="app">
        <!--文本框 字符串-->
        <input type="text" v-model="message" placeholder="edit me">
        <textarea v-model="message" placeholder="add multiple lines"></textarea>

        <!--单个复选框  布尔值-->
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>

        <!--多个复选框  value字符串数组-->
        <div id='example-3'>
            <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
            <label for="jack">Jack</label>
            <input type="checkbox" id="john" value="John" v-model="checkedNames">
            <label for="john">John</label>
            <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
            <label for="mike">Mike</label>
            <br>
            <span>Checked names: {{ checkedNames }}</span>
        </div>

        <!--单选按钮 value字符串-->
        <div id="example-4">
            <input type="radio" id="one" value="One" v-model="picked">
            <label for="one">One</label>
            <br>
            <input type="radio" id="two" value="Two" v-model="picked">
            <label for="two">Two</label>
            <br>
            <span>Picked: {{ picked }}</span>
        </div>

        <!--下拉框 option的value字符串-->
        <div id="example-5">
            <select v-model="selected">
                <option disabled value="">请选择</option>
                <option value="a">A</option>
                <option value="b">B</option>
                <option value="c">C</option>
            </select>
            <span>Selected: {{ selected }}</span>
        </div>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            message:"",
            checked:true,
            checkedNames:["Jack"],
            picked:"",
            selected:""
        }
    })
</script>

4.过滤器

 filters

5.自定义组件

directives

6.插件

Vue.use(插件名)                                               

        

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。