Vue-2 模板语法

最新推荐文章于 2023-07-10 12:05:48 发布

Torey_Li

最新推荐文章于 2023-07-10 12:05:48 发布

阅读量311

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/Torey_Li/article/details/87974454

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

根据慕课网的课程做的笔记

Vue基本概念

模板语法

认识Vue文件结构(template,script,style)
模板语法包含插值、指令(指令缩写)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .bg{ color: Red;}
    </style>
    <script type="text/javascript" src="../scripts/vue.js"></script>
</head>
<body>
    <div class="bg" id="app">
        {{msg}}<br />
        {{count}}<br />
        {{(count+1)*10}}<br />
        {{template}}<br />
        <div v-html="template"></div>
        <a  v-bind:href="url">百度</a>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                msg: 'hello vue!!',
                count: 0,
                url:"http://www.baidu.com",
                template:"<div>hello template</div>"
            }

        });
    </script>
</body>
</html>

在这里插入图片描述
v-bind是绑定属性的，例如：可以动态绑定id或者class的值

v-on是绑定某些事件的，例如鼠标点击事件，双击事件，悬停事件等，使用示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/jscript" src="../scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>
            count={{count}}<br />
            (count+1)*10 ={{(count+1)*10}}<br />
            <button type="button" v-on:click="submit()">
                点击一次,count加一</button>
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                count: 0
            },
            methods: {
                submit: function () {
                    this.count++;
                }
            }
        });
    </script>
</body>
</html>

每点击一下，就会触发submit方法
在这里插入图片描述
on指令可以缩写@，v-bind指令可以缩写为:

Torey_Li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue-2 模板语法

Vue基本概念模板语法认识Vue文件结构(template,script,style)模板语法包含插值、指令(指令缩写)&amp;amp;amp;amp;lt;!DOCTYPE html PUBLIC &amp;amp;amp;quot;-//W3C//DTD XHTML 1.0 Transitional//EN&amp;amp;amp;quot; &amp;amp;amp;quot;http://www.w3.org/TR/xhtml1/DTD/xh
复制链接

扫一扫