02Vue 模板语法

最新推荐文章于 2022-07-03 23:30:16 发布

honeyfff

最新推荐文章于 2022-07-03 23:30:16 发布

阅读量85

点赞数

分类专栏：学习笔记 Vue 文章标签： vue javascript

本文链接：https://blog.csdn.net/qq_42728133/article/details/105623216

版权

学习笔记同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>02_模板语法</title>
</head>
<body>


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

  <h2>2. 指令一: 强制数据绑定</h2>
  <a href="url">访问指定站点</a><br>
  <a v-bind:href="url">访问指定站点2</a><br>
  <a :href="url">访问指定站点2</a><br>

  <h2>3. 指令二: 绑定事件监听</h2>
  <button v-on:click="test">点我</button>
  <button @click="test">点我</button>

</div>


<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
  new Vue({
    el: '#app',
    data: {
      content: 'NBA I Love This Game',
      url: 'http://www.baidu.com'
    },
    methods: {
      test () {
        alert('嘻嘻!!!')
      }
    }
  })
</script>
</body>
</html>

1、模板的理解

动态的html页面

包含了一些JS语法代码

2、大括号表达式

语法：{{ }}

功能：向页面输出数据

也可以调用对象的方法

<h2>1. 双大括号表达式</h2>
<p>{{content}}</p>
<p>{{content.toUpperCase()}}</p>

3、指令一：强制数据绑定

功能：指定变化的属性值

完整写法：v-bind:xxx="yyy"

简写：：xxx = "yyy"

4、指令二：绑定监听事件

功能：绑定指定事件的回调函数

完整写法：v-on：click = "xxx"

简写：@click = "xxx"

honeyfff

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>02_模板语法</title></head><body><div id="app"> <h2>1. 双大括号表达式&...
复制链接

扫一扫

专栏目录