vue2 template中调用组件中函数 vue template作用

模板：被vue实例控制的页面片段

1.模板的作用是什么？

为了提高渲染效果，vue会把模板编译成为虚拟DOM树（VNode），然后再生成真实的DOM

从左至右 依次是模板、虚拟DOM树、真实的DOM

2.模板写在哪？

1. 在挂载的元素内部直接书写

<div id="app">
  <p>{{title}}</p>
</div>
<script>
  var vm = new Vue({
   data: {
     title: "g1",
    },
  });
  vm.$mount("#app");
</script>

2. 在template配置中书写

<div id="app"></div>
<script>
  var vm = new Vue({
    template: `<div id="app">
  <p>{{title}}</p>
</div>`,
    data: {
      title: "g1",
    },
  });
  vm.$mount("#app");
</script>

3. 在render配置中用函数创建

<div id="app"></div> 
<script>
  var vm = new Vue({
    //render配置用函数直接创建虚拟节点
    render(createElement) {//参数名随便取 作为函数名
      //第一个参数是要创建的虚拟节点，类型可以是字符串、对象或函数  第二个是创建的虚拟节点的子元素
      return createElement("p", ["殷志源"]);
    },
    data: {},
  });
  vm.$mount("#app");
</script>

3.模板中写什么？

- 静态内容

<div id="app">
  <p>123</p>
</div>

- 插值：{{JS表达式}} （mustache语法）

<div id="app">
  <p>{{title.substr(2)}}</p>
</div>
<script>
  var vm = new Vue({
    data: {
      title: "goodgoodstudy，daydayup",
    },
  });  
  vm.$mount("#app");
</script>

从第二位之后开始取值至末尾

- 指令

1.v-html：绑定元素的innerHTML

<div id="app">
  <p>{{title}}</p>
  <p v-html="title"></p>
</div>
<script>
  var vm = new Vue({
    data: {
      title: `<span style="color:red">商品管理</span>`,
    },
  });
  vm.$mount("#app");
</script>

2.v-bind:属性名：绑定属性（无法实现数据的双向绑定）

<div id="app">
      <a v-bind:href="link">{{title}}</a>
    </div>
    <script>
      var vm = new Vue({
        data: {
          title: `殷志源`,
          link:
           "https://baike.baidu.com/item/%E6%AE%B7%E5%BF%97%E6%BA%90/6644026?fr=aladdin",
        },
      });
      vm.$mount("#app");
    </script>

3.v-on:事件名(简写 @事件名)：绑定事件（事件名：click、mouseover、mouseenter、mouseleave等等）

4.v-if（v-else-if v-else）：判断元素是否需要渲染（是否存在）

5.v-show：判断元素是否应该显示（存在，改变display属性）

<div id="app">
  <ul v-show="flag">//v-if = "flag"
    <li v-for="item in items" :key="item.id">
      {{item.name}}
    </li>
  </ul>
  <button @click="change">点我</button>
</div>
<script>
  var vm = new Vue({
    data: {
      items: [
        { name: "殷志源", id: "01" },
        { name: "姜成勋", id: "02" },
      ],
      flag: true,
    },
    methods: {
      change() {
        this.flag = !this.flag;
      },
    },
  });
  vm.$mount("#app");
</script>

6.v-for：用于循环生成元素
7.v-bind:key(简写 :key)：唯一，用于帮助在重新渲染时元素的比对，通常和v-for配合使用，以提高渲染效率

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">
      {{item.name}}
    </li>
  </ul>
</div>
<script>
  var vm = new Vue({
    data: {
      items: [
        { name: "殷志源", id: "01" },
        { name: "姜成勋", id: "02" },
      ],
    },
  });
  vm.$mount("#app");
</script>

8.v-model：用于实现双向绑定，实际上，是自动绑定了value属性值，和注册了input事件

<div id="app">
 <a v-bind:href="link">{{text}}</a>
  <p>
    链接地址:<input type="text" v-model="link" /> 文本:<input
      type="text"
      v-model="text"
      //等同于 :value="text"(绑定文本框的value属性) + @input="text=$event.target.value"（绑定文本框改变事件 $event表示事件参数e target表示触发事件的元素 value触发事件元素的value值）
    />
  </p>
</div>
<script>
  var vm = new Vue({
    data: {
      text: `殷志源`,
      link:
        "https://baike.baidu.com/item/%E6%AE%B7%E5%BF%97%E6%BA%90/6644026?fr=aladdin",
    },
  });
  vm.$mount("#app");
</script>

更改文本框内的内容，对应绑定的属性值也会改变

4.模板中的代码环境

模板中所有的JS代码，它的环境均为vue实例，例如{{title}}，得到的结果相当于是vue实例.title