模板语法

模板语法

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

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

  <h2>2. 指令一: 强制数据绑定</h2>
  <!-- 这样写url会被当做字符串处理(静态) 加上v-bind才是变量(动态) -->
  <a href="url">去学习</a><br>
  <a v-bind:href="url">去学习</a><br>
  <a :href="url">去学习</a><br>

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

</div>

<script src="../js/vue.js"></script>
<script>

  new Vue({
    el: '#app',
   
    data: {
      content: 'CBA I Like This Game!',
      url: 'http://www.atguigu.com'
    },

    methods: {// 包含n个事件回调函数方法的对象
      test1 (event) {
        alert(event.target.innerHTML)
      }
    }
  })