Vue中的模板方法(插值语法与指令语法) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
  <h2>1.双括号表达式（插值语法）</h2>
  <p>{{message}}</p>
  <p>{{message.toUpperCase()}}</p>
  <p v-text="message"></p><!-- textcontext -->
  <p v-html="message"></p><!-- innerhtml -->

  <h2>2.指令一：强制数据绑定（指令语法）</h2>


  <img src="imgUrl">
  <img v-bind:src="imgUrl">
  <img :src="imgUrl">


  <h2>3.指令二：绑定事件监听（指令语法）</h2>
  <button v-on:click="test">按钮</button>
  <button @click="test2('abc')">按钮2</button>
</div>

<script src="../js/vue.js"></script>
<script>
  //实例对象  就是vm
  var app = new Vue({
    el: '#app',
    data: {   //数据 （model）
      message: 'Hello Vue!',
      imgUrl: 'https://vuejs.org/images/logo.svg'
    },

     methods: {
        test(){
          alert("test");
        },
       test2(content){
          alert(content);
       }
     }

  })
</script>
</body>
</html>

插值语法

常用于标签体的内容
写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性。

指令语法

用于解析标签（包括：标签属性、标签体内容、绑定事件）
常用于标签属性。
举例：v-bind:href=“xxx”或者简写为:href=“xxx”，xxx同样要写js表达式，且可以读取到data中的所有属性。
备注：vue中有很多的指令，且形式都是：v-???,此处我们只是拿v-bind举个例子。

posted @ 2021-07-11 03:22  King-DA  阅读(201)  评论(0)    收藏  举报