Vue_1-1_模板语法

最新推荐文章于 2024-04-24 18:00:25 发布

陪你去流浪_

最新推荐文章于 2024-04-24 18:00:25 发布

阅读量93

点赞数

本文链接：https://blog.csdn.net/jokerxiuka/article/details/118420303

版权

模板语法

<div id="app">
    <h3>双大括号表达式</h3>
    <p>{{msg}}</p>  <!--textContent-->
    大写：<p>{{msg.toUpperCase()}}</p><!-- 大写 -->        
    v-text：<p v-text="msg"></p>  <!--textContent 解析成文本-->
    v-html：<p v-html="msg"></p>  <!--innerHTML 解析成标签-->
    <h3>指令一：强制数据绑定</h3>
    <img :src="url" style="width: 100px;">
    <!-- : 是 v-bind: 的缩写 强制绑定 把url html语法变成表达式 -->
    <h3>指令二：绑定事件监听</h3>
    <button @click="test">test1</button>
    <button @click="test2('我爱学习')">test2</button>
    <button @click="test2(msg)">test3</button>
    <!-- @click为v-on:click的缩写 -->
    <!-- @事件名="回调函数" 回调函数后面的括号可以省略 -->
</div>
<script src="./js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            msg:'<a href="https://www.baidu.com/">百度</a>',
            url:'https://cn.vuejs.org/images/logo.svg'
        },
        methods:{
            test(){
                alert('虎子');
            },
            test2(i){
                alert(i);
            }
        }
    })
</script>