MVVM是什么?vue的基本语法结构

基本语法结构

    Vue是重视图开发的，会根据数据的变化自动响应Dom的变化。这样我们可以将更多的时间和精力用于处理View和业务逻辑的实现。在学习基本语法之前我们先看一个例子来理解什么是MVVM。

MVVM是什么?**

    通过下面的例子我们可以看出vue在实例化过程中将id为app的层与vue对象进行映射这个过程我们暂成为“MV”，
input标签中的v-model=“message”，实现了当输入框的值变化后改变message的值，这样实现了“VM”的过程，这就实现了数据的M和V的双向绑定，即MVVM。

例如：文本值插入

html:

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

脚本：

<script>
//实例化vue对象
new Vue({
  el: '#app', //指向容器的id或者name
  data: {
    message: 'SingleHero'    //需要展示的文本
  }
})
</script>

1.文本,插值表达式与v-text属性的区别
插值表达式是插入文本，v-text是替换文本
html:

 <div id="app">
    <p>测试：{{ message }}</p>
    <p v-text="message">测试：</p>
 </div>

脚本：

<script>
   new vue({
        el:'#app',
        data:{
          message:'SingleHero'
       }
       })
</script>

输出:

   测试：SingleHero
     SingleHero

2.html,动态添加html
插值表达式是插入文本，v-text是替换文本
html:

<div id="app">
    <p v-html="message"></p>
 </div>

脚本：

<script>
   new vue({
        el:'#app',
        data:{
          message:'<h1>SingleHero</h1>'
       }
       })
</script>

输出:SingleHero

3.属性，HTML 属性中的值应使用 v-bind 指令。
例如:以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

 <div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
   SingleHero
  </div>
</div>

<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

4.表达式，Vue都提供了完全的 JavaScript 表达式支持。

<div id="app">
    {{3+2}}<br>
    {{ ok ? 'I Do' : 'NO' }}<br>
    {{ message.toUpperCase()}}
    <div v-bind:id="'list-' + id">SingleHero</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'SingleHero',
    id : 1
  }
})
</script>

5.缩写,v-bind 缩写
Vue.js 为两个最为常用的指令提供了特别的缩写：
//完整语法

<a v-bind:href="url"></a>

//缩写

<a :href="url"></a>

v-on 缩写
// 完整语法

<a v-on:click="doSomething"></a>

//缩写

<a @click="doSomething"></a>

6.指令，指令是带有 v- 前缀的特殊属性。
例如：v-bind ,v-on,v-html,v-text,v-if

总结：
    vue的语法结构其实并不复杂有js或jquery基础的人一看就明白，主要是大家要体会与Dom方式编程的变化。