Vue系列二：模板语法

深藏阁楼爱情的钟 2022-01-30 06:07 184阅读 0赞

1.  模板的理解:  
    动态的html页面  
    包含了一些JS语法代码  
    大括号表达式  
    指令(以v-开头的自定义标签属性)
2.  双大括号表达式  
    语法: \{ \{exp\}\} 或 \{ \{ \{exp\}\}\}  
    功能: 向页面输出数据  
    可以调用对象的方法
3.  指令一: 强制数据绑定  
    功能: 指定变化的属性值  
    完整写法:  
    v-bind:xxx=‘yyy’ yyy会作为表达式解析执行  
    简洁写法:  
    :xxx=‘yyy’
4.  指令二: 绑定事件监听  
    功能: 绑定指定事件名的回调函数  
    完整写法:  
    v-on:click=‘xxx’  
    简洁写法:  
    @click=‘xxx’

<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>
      <button @click="test('abc')">点我</button>
      <button @click="test(content)">点我</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.atguigu.com'
        },
        methods: {
          test () {
            alert('好啊!!!')
          },
          test (content) {
            alert(content)
          }
        }
      })
    </script>
    </body>

发表评论取消回复

表情：

评论列表（有 0 条评论，184人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue模板语法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

比眉伴天荒/ 2022年10月27日 01:38/ 0 赞/ 187 阅读

相关 VUE模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的

梦里梦外;/ 2022年09月13日 04:16/ 0 赞/ 199 阅读

相关 Vue_模板语法

1.插值表达式：\{ \{\}\} 2.v-text=“name” ：该指令指向的“name”并不是字符串。它指的一定是JS的表达式 3.v-html: 指向实例中的数据

布满荆棘的人生/ 2022年05月22日 13:20/ 0 赞/ 288 阅读

相关 vue模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。插值： 1：文本最常见的数据绑定形式：使用 \{

柔光的暖阳◎/ 2022年05月10日 05:22/ 0 赞/ 374 阅读

相关 VUE模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范

痛定思痛。/ 2022年03月27日 13:14/ 0 赞/ 285 阅读

相关 Vue 模板语法

[目录][Link 1] -------------------- 1. 前言一开始我一直以组件化的思维去学习Vue，但学习的效果不是很有效，生出了很多

忘是亡心i/ 2022年02月23日 05:24/ 0 赞/ 272 阅读

相关 Vue系列二：模板语法

1. 模板的理解: 动态的html页面包含了一些JS语法代码大括号表达式指令(以v-开头的自定义标签属性) 2. 双大

深藏阁楼爱情的钟/ 2022年01月30日 06:07/ 0 赞/ 185 阅读

相关 Vue模板语法

Vue模板语法概述插值文本原始HTML 特性 JavaScript表达式指令

短命女/ 2021年10月20日 00:24/ 0 赞/ 375 阅读

相关 vue--模板语法

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" conte

ゝ一纸荒年。/ 2021年09月29日 06:06/ 0 赞/ 381 阅读

相关 Vue模板语法

本博客记录了小编在学习Vue过程中的体会与感悟，简单来说就是小编的学习笔记，学习地址主要为Vue的官网，官网地址为：[《Vue官方文档》][Vue]。相关学习笔

绝地灬酷狼/ 2021年09月20日 01:10/ 0 赞/ 441 阅读