vue学习(五)基础入门-基础知识(3)

╰+攻爆jí腚メ 2023-06-11 13:28 18阅读 0赞

Mustache语法（双大括号语法）

<body>
        <div id ="app"> 
            <h1>{
       {firstName}}</h1>
            <h2>{
       {lastName}}</h2>
            
            <h2>{
       {firstName + lastName}}</h2>
            <h2>{
       {firstName + " " + lastName}}</h2>
            <h2>{
       {firstName}} {
       {lastName}}</h2>
            <h2>{
       {counter*2}}</h2>
        </div>
    
        <script>
         //创建Vue实例,得到 ViewModel
         var vm = new Vue({
            el: '#app',
            data: {
                firstName: "abc",
                lastName: "wuyuxin",
                counter: 100,
            },
            methods: {}
         });
        </script>
    </body>

![20191030205705966.png][]

v-once

![20191031150230176.png][]

只渲染一次，不会再被改变

v-html

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70][]

<body>
        <div id ="app"> 
            <h2>{
       {url}}</h2>
            <h2 v-html = "url"></h2>
        </div>
    
        <script>
         //创建Vue实例,得到 ViewModel
         var vm = new Vue({
            el: '#app',
            data: {
                url:'<a href="http://www.baidu.com">百度一下</a>'
            },
            methods: {}
         });
        </script>
    </body>

![20191031151117712.png][]

v-text 在不想用mustache语法的时候，可以使用这样

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1][]

![20191031151622318.png][]但它不够灵活。建议使用mastache语法

v-pre 将代码原封不动的解析出来，不做任何处理

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 2][]

![20191031151758386.png][]

v-cloak 将未解析出来的代码块进行隐藏

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 3][]

但基本不会用到

[20191030205705966.png]: /images/20230531/d766a2128d1b4524a0ca1567658f7f75.png
[20191031150230176.png]: /images/20230531/cfd35a6ca0c543cba36ad7768393aa8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70]: /images/20230531/cc77f7f6ac4a462988e8f39f595c6adc.png
[20191031151117712.png]: /images/20230531/ef1156a94fb74e8dbd35cf30b07062cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 1]: /images/20230531/39bc1b18455e4868bee1bd9ea798fcd5.png
[20191031151622318.png]: /images/20230531/0ed1f423d99d4de5b494870181084256.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 2]: /images/20230531/c39a83742e1444c98bab34d2cbd12186.png
[20191031151758386.png]: /images/20230531/a40b71c475b14a599c71c77209390f84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1eXhpbnU_size_16_color_FFFFFF_t_70 3]: /images/20230531/a89922b0097648f59f8b2b1d582193a6.png