vue学习笔记 day02 模板语法插值

最新推荐文章于 2024-06-03 10:16:59 发布

桑丘紫言

最新推荐文章于 2024-06-03 10:16:59 发布

阅读量126

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_39209728/article/details/104537693

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

一 使用
1.实例化 new Vue()
new Vue({
    el:"选择器 规定vue的作用范围",
    data:{
        数据1,
        数据2
    }
})
模板语法
2.插值
    文本 ：在节点中加入{{数据名称}}
         v-once 指令， 执行一次性地插值，当数据改变时，插值处的内容不会更新
         
         v-text 指令
    v-html 指令    

        花括号问题 
            在节点之间 <h1>{{}}<h1>
            在节点内<h1 v-html="不需要加入花括号"><h1>
    属性 
        v-bind:id
        v-bind:src
        v-bind:disable
        v-bind:属性名称 = 属性值

例子1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="box">
        <p v-html="html" v-text="html"></p> {{html}}
        <div v-once>{{msg}}</div>
        <!-- 这个数据是一次性的-->
        <button @click="show">按钮</button>
    </div>
    <div class="dv1"></div>

    <script src="vue.js"></script>
    <script>
        new Vue({
            el: "#box", //el==>vue的作用范围  .dv1  1.0可以html 可以body  但是由于性能问题2.0都是选择器
            data: { //数据
                html: "<h1>我是标题<h1>",
                msg: "这是数据11111"

            },
            methods: {
                show: function() {
                    this.msg = "222";
                }
            }
        });
    </script>
</body>

</html>

例子2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <img v-bind:src="image" />
        <input type="text">
        <button v-bind:disabled="bool">Button</button> 
        {{num+1}}
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                image: "img/0.jpg",
                bool: false,
                num: 11
            }

        })
    </script>

</body>

</html>