Vue学习笔记

Haryliping

已于 2022-04-07 18:11:41 修改

阅读量742

点赞数 1

文章标签：前端

于 2022-04-07 18:04:52 首次发布

本文链接：https://blog.csdn.net/qq_58878479/article/details/124020239

版权

容器和模板

1.首先说说什么是容器和模板，拿个例子来讲：

<div id="root">
      <h1>hello,{
  {name}},你今年{
  {age}}岁了</h1>
    </div>
    <script>
      Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
      const x= new Vue({
        el:'#root',
        data:{
          name:"glp",
          age:21,
        }                         
      })
    </script>

这段代码中的整个div标签就是Vue实例所绑定的容器。容器中的代码被称为Vue模板。容器就是为Vue提供模板的。

Vue的两种模板语法：

1.插值语法：

用于标签体。用法如下列代码所示：

 <div id="root">
      <h1>hello,{
  {name}},你今年{
  {age}}岁了</h1>
    </div>
    <script>
      Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
      const x= new Vue({
        el:'#root',
        data:{
          name:"glp",
          age:21,
        }                         
      })
    </script>

以上代码中，通过 el:"#root" 在Vue实例中绑定了root容器，这样id为 "root" 的div标签就成了Vue实例的容器。在h1标签中使用 { {name}}，即可将Vue实例data中的name属性值展示在模板中。