Vue学习1 - 单双向绑定、内容填充、闪动问题

文章目录

- - 0. vue基本格式
  - 1. 单向绑定 - {{属性名}}
  - 2. 双向绑定 - v-model="属性名"
  - - 2.1 input绑定 - text
    - 2.2 textarea绑定
    - 2.3 input绑定 - checkbox
    - - 2.3.1 多个checkbox - 即多选
      - 2.3.2 单个checkbox - 即单选
    - 2.4 input绑定 - radio
    - 2.5 select-option绑定
    - - 单选
      - 多选
  - 3. 内容填充v-text、v-html、v-pre
  - 4. 解决闪动现象 - v-cloak

0. vue基本格式

<script>

    var vue = new Vue({
    
        el: "父元素的选择器",
        data: {
            属性1: 属性值,
            属性2: 属性值
        },
        methods: {
            函数名1:  function() {},
            函数名2:  function() {}
        },   
        vue生命周期函数名: function() {
        }
    
    })

</script>

1. 单向绑定 - {{属性名}}

<body>
    <div id="vueBox">
        <p>{{name}}</p>
    </div>
</body>
<script>
    var vue = new Vue({
        el: "#vueBox",
        data: {
            name: "lrc"
        }
    })
</script>

model_68">2. 双向绑定 - v-model=“属性名”

<input type="number" v-model.number="data属性名"/>

2.1 input绑定 - text

<body>
    <div id="vueBox">
        <p>姓名：{{name}}</p>
        <input name="test" type="text" v-model="name"/>
    </div>
</body>
<script>
    var vue = new Vue({
        el: "#vueBox",
        data: {
            name: ""
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ELIrUbMy-1587887509842)(en-resource://database/20702:1)]

2.2 textarea绑定

<body>
    <div id="vueBox">
        <p>姓名：{{name}}</p>
        <textarea cols="10" rows="10" v-model="name"></textarea>
    </div>
</body>
<script>
    var vue = new Vue({
        el: "#vueBox",
        data: {
            name: ""
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KoQT4Cg0-1587887509857)(en-resource://database/20704:1)]

2.3 input绑定 - checkbox

2.3.1 多个checkbox - 即多选

属性绑定是数组

<body>
    <div id="vueBox">
        <p>爱好：{{hobby.toString()}}</p>
       <input type="checkbox" value="1" v-model="hobby">
        <span>篮球</span>
        <br>
       <input type="checkbox" value="2" v-model="hobby">
        <span>排球</span>
        <br>

       <input type="checkbox" value="3" v-model="hobby">
        <span>足球</span>
    </div>
</body>
<script>
    var vue = new Vue({
        el: "#vueBox",
        data: {
            hobby: []
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OjohB2vn-1587887509868)(en-resource://database/20706:1)]

2.3.2 单个checkbox - 即单选

属性绑定可以是布尔数值

<body>
    <div id="vueBox">
        <p>爱好：{{hobby}}</p>
       <input type="checkbox" value="1" v-model="hobby">
        <span>篮球</span>
        <br>

    </div>
</body>
<script>
    var vue = new Vue({
        el: "#vueBox",
        data: {
            hobby: true
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vjBStzpI-1587887509875)(en-resource://database/20708:1)]

2.4 input绑定 - radio

不可v-model绑定的值不可以是boolean数值

<body>
    <div id="vueBox">
        <p>爱好：{{hobby}}</p>
       <input name="hobby" type="radio" value="1" v-model="hobby"></input>
        <label >篮球</label><br/>

       <input name="hobby" type="radio" value="2" v-model="hobby"></input>
        <label>排球</label><br/>

       <input name="hobby" type="radio" value="3" v-model="hobby"></input>
        <label>足球</label><br/>
    </div>
</body>
<script>
    var vue = new Vue({
        el: "#vueBox",
        data: {
            hobby: 3
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0HD9zeOE-1587887509881)(en-resource://database/20710:1)]

2.5 select-option绑定

单选

<body>
    <div id="vueBox">
       爱好：<span v-text="hobby"></span>
        
        <br/>

        <select v-model="hobby">
            <option value="1">篮球</option>
            <option value="2">足球</option>
            <option value="3">排球</option>
        </select>

    </div>
</body>
<script>
    var vue = new Vue({
        el: "#vueBox",
        data: {
            hobby: 3
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j4lAbqM6-1587887509884)(en-resource://database/20712:1)]

多选

<body>
    <div id="vueBox">
       爱好：<span v-text="hobby.toString()"></span>

        <br/>

        <select v-model="hobby" multiple="multiple">
            <option value="1">篮球</option>
            <option value="2">足球</option>
            <option value="3">排球</option>
        </select>

    </div>
</body>
<script>
    var vue = new Vue({
        el: "#vueBox",
        data: {
            hobby: []
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oZ1bxpSA-1587887509888)(en-resource://database/20714:1)]

3. 内容填充v-text、v-html、v-pre

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0i2EKTII-1587887509892)(en-resource://database/21232:1)]

<body>
   <div id="app">
       <div v-text="text"></div>

       <br/>

       <div v-html="html"></div>
   </div>
</body>
<script>
    var vue = new Vue({
        el : "#app",
        data: {
            text: "<a href='http://baidu.com'>点这里，你懂得！</a>",
            html: "<a href='http://baidu.com'>点这里，你懂得！</a>"
        }
    })
</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-coxwzAJM-1587887509897)(en-resource://database/20716:1)]

<body>
    <div id="vueBox">

       <p v-pre>{{name}}</p>
    </div>
</body>

<script type="text/javascript">

    var vue = new Vue({
        el: "#vueBox",
        data: {
            name: "lrc"
        }
    })

</script>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-76OIUPhc-1587887509901)(en-resource://database/21236:1)]

4. 解决闪动现象 - v-cloak

{{name}}
**原因：当vue渲染数据时，先使用{{name}}这个字符显示在浏览器中，然后在快速的替换这个字符为data绑定的值，如果计算机比较卡的话，会有非常明显的闪烁现象 - 使用v-cloak指令进行解决该闪烁现象**

原理：先通过样式隐藏内容，内存把值绑定好，在通过样式进行显示

<head>
    <meta charset="UTF-8">
    <title>Vue测试</title>
    <script src="./node_modules/vue/dist/vue.min.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="vueBox">

       <p v-cloak>{{name}}</p>
    </div>
</body>

<script type="text/javascript">

    var vue = new Vue({
        el: "#vueBox",
        data: {
            name: "lrc"
        }
    })


</script>