第二章 Vue 核心技术之1.2模板数据绑定渲染

第二章 Vue 核心技术

1. 模板数据绑定渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <body>
        <div id="app">
            <h3>1、{{}}双大括号输出文本内容</h3>
            <P>{{message}}</P>
            <!-- 文本内容 -->

            <h3>2、一次性插值 v-once </h3> 
            <span v-once> 这个将不会改变: {{ message }}</span>

            <h3>3、v-html 指令输出真正的 HTML 内容</h3> 
            <p>双大括号：{{ contentHtml }}</p> 
            <!-- 指令的值不需要使用双大括号获取，直接写获取的属性名 --> 
            <!-- <p>v-html指令：<span v-html="{{contentHtml}}"></span></p>  -->
            <p>v-html指令：<span v-html="contentHtml"></span></p>
            
            <h3>4、v-bind 属性绑定指令</h3>
            <!-- 红色字体是正常的 --> 
            <img v-bind:src="imgUrl" alt="VueLogo"> 
            <!-- 缩写 -->
            <img :src="imgUrl" alt="VueLogo">
            <!--跳转-->
            <a :href="mxgUrl">跳转</a>

            <h3>5、v-on 事件绑定指令</h3> 
            <input type="text" v-model="num"> 
            <button v-on:click="add">点击+1</button>
            <p>普通文本：{{ message }}</p> 
            <!--使用JS表达式--> 
            <p>JS表达式：{{ number + 1 }}</p>
        </div>
        <script src="./node_modules/vue/dist/vue.js"></script>
        <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                message: 'mengxuegu',
                number: 1,
                contentHtml:'<span style="color:red">红色字体内容</span>', 
                imgUrl: 'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/BB12cP5P.img',
                mxgUrl:'http://www.mengxuegu.com',
                num:1
            },
            methods: { //指定事件处理函数, 在模板页面中通过 v-on:事件名 来调用 
                add: function () { //定义了add函数
                console.log('add被调用') 
                // this 表示当前 vm 实例 
                this.num++ //每点击1次num加1
                }
            }
        })
        </script>
</body>
</html>
  • 效果图
posted @ 2020-09-21 23:19  xiaokai9527  阅读(79)  评论(0)    收藏  举报