02.模版语法-CSDN博客

本文链接：https://blog.csdn.net/xia9527/article/details/108370967

二模版语法

主要参考的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>