Vue第4话 模版语法

逆流者 2020年01月03日 112次浏览

1、模板

  • 动态的 html 页面
  • 包含了一些 JS 语法代码
    • 双大括号表达式
      a. 语法: {
      }
      b. 功能: 向页面输出数据
      c. 可以调用对象的方法
    • 指令(以 v-开头的自定义标签属性)

2、强制数据绑定指令

  • 功能: 指定变化的属性值

  • 完整写法: v-bind:xxx='yyy'
    yyy 会作为表达式解析执行

  • 简洁写法: :xxx='yyy'

3、绑定事件监听指令

  • 功能: 绑定指定事件名的回调函数
  • 完整写法:
    v-on:keyup='xxx'
    v-on:keyup='xxx(参数)'
    v-on:keyup.enter='xxx'
  • 简洁写法:
    @keyup='xxx'
    @keyup.enter='xxx

4、测试代码

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>02_模版语法</title>
</head>
<body>

<div id="app-2">
    <h2>1、双大括号表达式</h2>
    <p>{{msg}}</p>
    <p>{{msg.toUpperCase()}}</p>

    <h2>2、指令一:强制数据绑定</h2>
    <a href="url">访问指定网站1(不能访问)</a><br/>
    <a v-bind:href="url">访问指定网站2</a><br/>
    <a :href="url">访问指定网站3</a>

    <h2>3、指令二:绑定时间监听</h2>
    <button v-on:click="handleClick()">点击我1<utton><br>
    <button @click="handleClick">点击我2</button>
</div>

<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    const app = new Vue({
        el: '#app-2',
        data: {
            msg: 'I love vue!',
            url: 'http://www.baidu.com'
        },
        methods: {
            handleClick() {
                alert("点击事件")
            }
        }
    });
</script>
</body>
</html>