Vue学习笔记

Posted 2021-09-06 保护眼睛

Vue学习笔记

• • • 使用 v-html 指令用于输出 html 代码
    • HTML 属性中的值使用 v-bind 指令。
    • v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
    • 参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：
    • v-model 指令来实现双向数据绑定

使用 v-html 指令用于输出 html 代码

<div id="app">
    <div v-html="message"></div>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            message: '<h1>hello vue!</h1>'
        }
    })
</script>

HTML 属性中的值使用 v-bind 指令。

以下实例判断 use 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<style>
 .class1{
     background-color: yellow;
 }
</style>
<div id="app1" style="text-align: center">
    <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
    <br><br>
    <div v-bind:class="{'class1': use}">
        v-bind:class 指令
    </div>
</div>

<script>
    new Vue({
        el: '#app1',
        data:{
            use: true
        }
    });
</script>

v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

<div id="app2">
    <p v-if="seen" style="background-color: orange;text-align: center" >现在你看到我了</p>
</div>

<script>
    new Vue({
        el: '#app2',
        data: {
            seen: false
        }
    })
</script>

false

true

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<div id="app3">
    <pre class="class1" ><a v-bind:href="url"  >响应的url</a></pre>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            url: 'http://www.hello.com'
        }
    })
</script>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

v-model 指令来实现双向数据绑定

数据模型和视图之间的双向绑定。 当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化；可以这样说用户在视图上的修改会自动同步到数据模型中去，数据模型也是同样的变化。 双向数据绑定的优点：无需和单向数据绑定那样进行CRUD（Create，Retrieve，Update，Delete）操作，双向数据绑定最常应用在就表单上，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户输入好的数据，并放到数据模型中了。

<div id="app4" class="class1">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>

<script>
    new Vue({
        el: '#app4',
        data: {
            message: 'hello!'
        },
        methods: {
            reverseMessage: function () {
                this.message = this.message.split('').reverse().join('')
            }
        }
    })
</script>