Vue基础语法(细节)

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属性。

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

概念：

 <a>标签有一个属性href,href的值得看粉红色这个表达式的结果,就比如吧这个粉红色表达式的值是1 ，那么href这个属性的值也就是1，这样的话红色的属性与粉红色的表达式之间就有了一个绑定的关系。

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

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

小总结:

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

  

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

 结束了，欢迎指正哦。