02.模版语法

二 模版语法

主要参考的VUE基础教程(模版语法):https://cn.vuejs.org/v2/guide/syntax.html

模版的理解:动态的HTML的页面,包含了一些JS语法代码

  • 大括号表达式
  • 指令(以v-开头的自定义标签属性)
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>02_模板语法</title>
  </head>
  <body>

<div id="app">
  <!--
  双大括号表达式
  语法: {{exp}} 或 {{{exp}}}
  功能: 向页面输出数据
  可以调用对象的方法
   -->
  <h2>1. 双大括号表达式:针对textContent</h2>
  <p>{{userName}}</p>
  <p>{{userName.toUpperCase()}}</p>
  <p>{{userName.toUpperCase().length}}</p>
  <p>{{userName+':胖先森'}}</p>
  <p v-text="url"></p>
  <p v-html="url"></p><!-- innerHTML -->

  <!--
  功能: 指定变化的属性值
  完整写法:
    v-bind:xxx='yyy'  //yyy会作为表达式解析执行
  简洁写法:
    :xxx='yyy'
   -->
  <h2>2. 指令一: 强制数据绑定</h2>
  <input type="text" :value="bool?userName:'死鬼'">
  <img src="imgSrc" style="width: 100px;"><br/><!-- 就是HTML语法,无法显示图片 -->
  <img v-bind:src="imgSrc" style="width: 100px;"><br/><!-- 绑定指令属性 -->
  <img :src="imgSrc" style="width: 100px;"><br/><!-- 绑定指令属性 -->

  <!--
  功能: 绑定指定事件名的回调函数
  完整写法:
    v-on:click='xxx'
  简洁写法:
    @click='xxx'
   -->
  <h2>3. 指令二: 绑定事件监听</h2>
  <a href="javascript:;" v-on:click="test01">测试回调函数</a><br/>
  <a href="javascript:;" @click="test02">简写方式</a><br/>
  <button @click="test03('悟空')">事件传递参数-1</button><br/>
  <button @click="test03(userName)">事件传递参数-2</button><br/>
</div>


<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
window.onload=function (){
  const vm = new Vue({
    el:"#app",
    data:{
      userName:"pang sir",
      url:"<a href='http://www.baidu.com'>百度一下</a>",
      imgSrc:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
      bool:false
    },
    methods:{
      test01:function(){
        console.log(Math.random());
      },
      test02(){//注意写法
        alert("Hello World");//ECMAScript6语法
      },
      test03:function(content){
        console.log(content);
      }
    }
  })
};
</script>
</body>
</html>

可以完成表达式的计算,查看官方文档,其实实话说写多了VUE是不是可能会造成JavaScript能力的减弱?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值