vue学习笔记（v-text v-html v-on v-model）-panda

Posted 2022-11-23 Vivianluolita

1 v-text v-html

<h1>v-text  v-html</h1>
    <div id="app">
        <span>message</span>
        <span v-text='message'></span>
        <span v-html='todo'></span>
    </div>
    <script type="text/javascript">
        var app= new Vue(
            el:'#app',
            data:
                message:"hello world",
                todo:'<h2>hello world</h2>'
            
        )
    </script>

我们已经会在html中输出data中的值了，我们已经用的是xxx,这种情况是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的xxx。Vue给我们提供的v-text,就是解决这个问题的。

如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。

需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。

2 v-on

<h1>v-on</h1>
    <div id="app">
        本场比赛得分：fenshu
        <button v-on:click="jiafen">加分</button>
        <button @click="jianfen">减分</button>
        <input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2">
    </div>
    <script type="text/javascript">
        var app= new Vue(
            el:'#app',
            data:
                fenshu:0,
                fenshu2:1
            ,
            methods:
                jiafen:function()
                    this.fenshu++;
                ,
                jianfen:function()
                    this.fenshu--;
                ,
                onEnter:function()
                    this.fenshu=this.fenshu+parseInt(this.fenshu2);
                
            
        )
    </script>

我们的v-on 还有一种简单的写法，就是用@代替。
我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。

3.v-model的双向绑定

<h1>v-model</h1>
    <div id="app">
        <p>message</p>
        <h3>文本框</h3>
        <p><input type="text" v-model="message"></p>
    </div>
    <script type="text/javascript">
        var app= new Vue(
            el:'#app',
            data:
                message:"hello world"
            
        )
    </script>

4.单选多选绑定数据

<h1>v-model</h1>
    <div id="app">
        <p>message</p>
        <h3>文本框</h3>
        <p>v-model<input type="text" v-model="message"></p>
        <p>v-model.lazy<input type="text" v-model.lazy="message"></p>
        <p>v-model.number<input type="text" v-model.number="message"></p>
        <p>v-model.trim<input type="text" v-model.trim="message"></p>
        <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea>
        <h3>多选框绑定一个值</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue">
        <label for="isTrue">isTrue</label>
        <h3>多选绑定一个数组</h3>
        <p>
            <input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
            <label for="JSPang">JSPang</label><br/>
            <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
            <label for="JSPang">Panda</label><br/>
            <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
            <label for="JSPang">PanPan</label>
            <p>web_Names</p>
        </p>

        <h3>单选按钮绑定</h3>
        <input type="radio" id="one" value="男" v-model="sex">
        <label for="one">男</label>
        <input type="radio" id="two" value="女" v-model="sex">
        <label for="one">女</label>
        <p>sex</p>
    </div>
    <script type="text/javascript">
        var app= new Vue(
            el:'#app',
            data:
                message:"hello world",
                isTrue:true,
                web_Names:[],
                sex:'男'
            
        )
    </script>