vue笔记

最新推荐文章于 2024-09-04 15:16:43 发布

今天学习了没_

最新推荐文章于 2024-09-04 15:16:43 发布

阅读量75

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44756893/article/details/117959855

版权

vue 笔记

v-model 结合radio类型

<body>
    <div id="app">
        <label for="male">
            <input type="radio" id="male" value="男" v-model="sex">男
            <input type="radio" id="female" value="女" v-model="sex">女
        </label>
        <h2>选择的性别是: {{sex}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好',
                sex:'男'
            }
        })
    </script>
</body>

v-model结合checkbox多选框

<div id="app">
        <label for="agree">
            <input type="checkbox" v-model="isAgree">同意协议
        </label>
        <h2>您的选择是：{{isAgree}}</h2>
        <button :disabled="!isAgree">下一步</button>

        <label for="">
            <input type="checkbox" value="篮球" v-model="hobbies">篮球
            <input type="checkbox" value="足球" v-model="hobbies">足球
            <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
        </label>
        <h2>爱好：{{hobbies}}</h2>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
        el:"#app",
        data:{
            isAgree:false,  //单选框
            hobbies:[]//多选框
        }
    })
    </script>

值绑定

<div id="app">
        <label for="agree">
            <input type="checkbox" v-model="isAgree">同意协议
        </label>
        <h2>您的选择是：{{isAgree}}</h2>
        <button :disabled="!isAgree">下一步</button>

        <label for="">
            <input type="checkbox" value="篮球" v-model="hobbies">篮球
            <input type="checkbox" value="足球" v-model="hobbies">足球
            <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
        </label>
        <h2>爱好：{{hobbies}}</h2>
        <!-- //动态绑定数组列表 -->
        <label v-for="item in originHobbies" :for="item">
            <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
        </label>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
        el:"#app",
        data:{
            isAgree:false,  //单选框
            hobbies:[],//多选框
            originHobbies:['篮球','足球','乒乓球','羽毛球','台球']
        }
    })
    </script>

修饰符

1.用v-model双向绑定时，使用v-model.lazy可以在敲回车或失去表单焦点时更新vue里面的数据。
2.number限定表单输入为数值类型 v-model.number
3.trim 删除表单里面左右边上的空格 v-model.trim

注册组件的基本步骤

（1）创建组件构造器
调用Vue.extend() 的方法创建组件构造器
（2）注册组件
调用Vue.component() 方法注册组件
（3）使用组件
在Vue实例的作用范围内使用组件

<div id="app">
        <!-- 使用组件 -->
        <my-cpn></my-cpn>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        //es6语法
        // 使用 `` 定义字符串 可以换行定义

        //1.创建组件构造器对象
       const cpnC = Vue.extend({
           template: `
           <div>
            <h2>我是标题</h2>
            <p>我是内容</p>
            </div>
           `
       })
        //2.注册组件
        // Vue.component('组件的标签名',组件构造器)  全局组件 可以在多个vue的实例下面使用
        Vue.component('my-cpn',cpnC)

        const app = new Vue({
            el:"#app",
            data:{
                message:'你好啊'
            },
            components:{
            	//my-cpn使用组件时的标签名  局部组件
            	my-cpn:cpnC
            }
        })
    </script>