[JavaScript知识库] vue的常用内置指令

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue的常用内置指令 -> 正文阅读

[JavaScript知识库]vue的常用内置指令

vue的常用内置指令

1、v-bind：单向绑定解析表达式，可以简写为：xxx

2、v-model：双向数据绑定，默认收集input框的value值

若：<input type="text"/>?v-model收集的是value值，用户输入的值就是value值

若：<input type="radio"/>?v-model收集的是value值，要给标签设置value值

若：<input type="checkbox"/>

? ? ? ? 1>没配置input的value值，那么收集的就是checked（勾选?or?未勾选? ?布尔值）

? ? ? ? 2>配置了input的value属性：

? ? ? ? ? ? ? ? （1）、v-model的值是非数组，那么收集的就是checked（勾选?or?未勾选? ?布尔值）

? ? ? ? ? ? ? ? （2）、?v-model的值是数组，那么收集的就是value组成的数组

备注：v-model的三个修饰符：

? ? ? ? lazy：失去焦点再收集数据

? ? ? ? number：输入字符串转换为有效的数字

? ? ? ? trim：去掉首尾空格

<!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>Document</title>
    <script type="text/javascript" src="../coding/js/vue.js"></script>
</head>
<body>
    <div id="root">
        <form @submit.prevent="submitForm" >
            账号：<input type="text" v-model.trim="userinfo.account" ><br/><br/>
            密码：<input type="password" v-model="userinfo.password" ><br/><br/>
            性别：
            男<input type="radio" name="sex" v-model='userinfo.sex' value="male">  
            女<input type="radio" name="sex" v-model='userinfo.sex' value="female"><br/><br/>

            年龄：<input type="number" v-model.number="userinfo.age"><br/><br/>
            爱好：
            学习<input type="checkbox" v-model="userinfo.hobby" value="study"  >
            玩游戏<input type="checkbox" v-model="userinfo.hobby" value="game" >
            吃饭<input type="checkbox" v-model="userinfo.hobby" value="eat" ><br/><br/>
            所属校区：<select name="school" v-model ="userinfo.city" >
                <option value="">请选择校区</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option> 
                <option value="shenzhen">深圳</option>
                <option value="wuhan">武汉</option>
            </select><br/><br/>
            其他信息：<textarea v-model="userinfo.other" ></textarea><br/><br/>
            <input type="checkbox" v-model="userinfo.agree">阅读并接受<a href="http://www.atguigu.com" >《用户协议》</a>
            
            <br/><br/>
            <button >提交</button>   
        </form>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    const vm =   new Vue({
        el:"#root",
        data:{
            userinfo:{
                account:'',
                password:'',
                sex:'female',
                age:90,
                hobby:[],
                 city:"",
                other:"",
                 agree:""}            
        },
        methods:{
            submitForm(){
                // alert(1)
                console.log(JSON.stringify(this.userinfo))
            }
        }
    })
</script>
</html>

3、v-for：遍历数组/对象/字符串

4、v-on：绑定事件监听，可简写为@

5、v-if：条件渲染（动态控制节点是否存在）

6、v-else：条件渲染（动态控制节点是否存在）

7、v-show：条件渲染（动态控制节点是否展示）

8、v-text：

向其所在的节点中渲染文本内容

与{{xxx}}的区别：v-text会替换节点中的内容，{{xxx}}不会，一般会使用{{xxx}}

9、v-html指令：

? ? ? ? 向指定节点中渲染包含html结构的内容。

? ? ? ?与插值语法的区别：

? ? ? ? ? (1).v-html会替换掉节点中所有的内容，{{xx}}则不会。