侧边栏壁纸
博主头像
逆流者

不登高山,不知天之高也;不临深溪,不知地之厚也。

  • 累计撰写 147 篇文章
  • 累计创建 43 个标签
  • 累计收到 4 条评论
隐藏侧边栏

Vue第4话 模版语法

逆流者
2020-01-03 / 0 评论 / 0 点赞 / 217 阅读 / 0 字 / 正在检测是否收录...
温馨提示:
本文最后更新于2020-01-03,若内容或图片失效,请留言反馈。 部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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>
0

评论