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指令可以缩写为:

Vue-2 模板语法

Vue基本概念

模板语法

猜你喜欢