美文网首页
学习笔记——Vue的template属性

学习笔记——Vue的template属性

作者: SleepWalkerLj | 来源:发表于2022-02-06 21:06 被阅读0次
<div id="app"></div>
引入vue
<script>
// 这是传入createApp()函数中的对象，此函数可以解析所包含的属性，比如作模板用的template属性，放置响应式数据的data属性等等。
const obj={
    template:'<div><h2>你好啊</h2></div>',
    // data属性在vue3中如果不写成函数的形式会报错，vue2中则是警告
    data:function(){
        return {
            msg:'加油'
        }
    }
}
// createApp会返回一个对象
const app = Vue.createApp(obj)

// 把app挂载到id为app的元素上,mount内部会自动执行document.queryselector("#app")方法
app.mount("#app")
</script>

template属性：表示的是Vue需要帮助我们渲染的模板信息

  • template里的标签会替换掉我们挂载到的元素（id为app的div）的innerHTML，其实源码就是做了清空操作，然后替换了<div id="app"></div>里的内容

在template中直接写字符串的标签比较麻烦，可以使用Vue提供的两种编写template属性的方式

  1. 第一种是写在script中，但是要写上type="x-template"和一个id，然后在template属性中以#id名的形式写好
<script type="x-template" id="aaa">
    <div>
      <h2>{{message}}</h2>
    </div>
</script>
<script>
    Vue.createApp({
      // 以#号开头就不会直接解析了，会去执行querySelector
      template: '#aaa',
      data: function() {
        return {
          message: "Hello World",
        }
      }
    }).mount('#app');
 </script>
  1. 第二种是写在<template></template>标签中，template标签不是Vue特有的，而是html中定义的，template里的内容不会被浏览器渲染。
<div id="app"></div>
<template id="bbb">
  <div>
    <h2>{{message}}</h2>
  </div>
</template>
<script src="../js/vue.js"></script>
<script>
  Vue.createApp({
    template: "#bbb",
    data: function () {
      return {
        message: "Hello World",
      };
    },
  }).mount("#app");
</script>

当然，把template标签换成div也是可以的，因为本质上还是通过id找到对应的元素，但是用div的话，里面的内容会显示出来，因为template里的内容不会被浏览器渲染出来。


显示多个内容.png

架构模式

MVC：

Model-View-Controller，比如Android就是典型mvc，controller就是连接视图和数据的桥梁

MVVM：

Model-View-ViewModel，Vue中template相当于View视图，model就是数据，而Vue就是ViewModel了。


mvvm.png

图中的Data Bindings会把model里的数据绑定到View上，DOM Listeners会监听DOM，可以对数据做出改变。这个过程就像是学习一个篮球动作，看了视频（数据）后，大脑开始让身体（View）去学习（Data Bindings）这个动作，然后再看看（DOM Listeners）这个动作做对没，人做的过程中可能还会产生自己的想法，于是对脑中的这个动作做了些微调（监听修改数据的过程）。

相关文章