0
点赞
收藏
分享

微信扫一扫

Vue基础语法(细节)

梦想家们 2022-01-11 阅读 33

Vue中模板语法:

1.插值语法:

功能:用于解析标签体内容,

写法:{{xxx}},xxx是js表达式,下面写一个入门helloworld案例,用插值语法实现.

<div id="root">

    {{name}}

  </div>

<script>
      Vue.config.production = false  

      new Vue({
        el:'#root',
        data:{
          name:'helloworld'
        }
      })
    </script>

 效果:

 2.指令语法:

功能:用于解析标签(标签属性,标签体内容,绑定事件)

举例:指令写一个前往bilibili官网小案例

<div id="root>

 <!--指令语法书写-->
     <a v-bind:href="url">前往b站</a>

</div>
 <script>
      Vue.config.production = false  

      new Vue({
        el:'#root',
        data:{
          url:'https://www.bilibili.com'
        }
      })
    </script>

解析:其实就是我们把href属性与‘url’表达式绑定了,Vue中有很多指令,形式都是v-???,当我使用指令的时候,v-bind:href="xxx",中'xxx'要写表达式,这样的话Vue就会介入解析url,即读取data中的url属性。

不了绑定是啥的小伙伴可以看下:

概念:

这些语法(插值语法与指令)都是基于mvvvm模型,下面我们简单的了解一下吧

  • 1. M:模型(model) : data 中数据
  • 2. v : 视图 (view) : 模板代码
  • 3. vm :视图模型(viewModel) vue实例

小总结:

  • new Vue() //里面有很多复杂的操作
  • data中所有的属性,最后都出现在了vm身上(vue实例),在vue模板中都可以直接用。
  • MVVM模型(桥梁纽带)

mvvn代码实例,其实vue的语法基本都是基于这个模型,下面用插值语法一个例子,解析这个mvvm模型:

 结束了,欢迎指正哦。

举报

相关推荐

0 条评论