Vue的基础语法

            <
            div 
            id
            ="app"
            >
            <
            h1
            >{{ msg }}</h1></div><script>//2.创建一个vue实例对象  const  MyVue =new Vue({
    //3.告诉vue对象需要控制的界面上的区域    el: "#app",
    //4.告诉vue实例对象，控制区域内的数据    data: {
      msg: "vue的实例模板"
    }
  })
</script>

            <
            body
            >
            <
            div 
            id
            ="app"
            >
            <
            h1
            >{{ msg }}</h1><h1>{{ msg }}，mustache语法</h1><!--  mustache语法中不仅仅能直接写变量，还可以写简单的表达式--><h1>{{ msg + mustache }}</h1><h1>{{ msg + ‘ ‘+ mustache }}</h1><h1>{{ msg }} {{ mustache }}</h1><h1>{{ counter * 2 }}</h1></div><script>//2.创建一个vue实例对象  const  MyVue =new Vue({
    //3.告诉vue对象需要控制的界面上的区域    el: "#app",
    //4.告诉vue实例对象，控制区域内的数据    data: {
      msg: "vue的实例模板",
      mustache: "mustache语法",
      counter: 100
    }
  })
</script></body>

            <
            body
            >
            <
            div 
            id
            ="app"
            >
            <
            h1
            >{{ msg }}</h1><!--  v-once指令：只会将数据的初始值显示，当数据发生改变的时候，使用了v-once指令的视图不会更新数据--><h1 v-once>{{ msg }}</h1><!--  v-html指令：会将数据中含有的标签解析之后进行显示--><h1>{{ htmlTemplate }}</h1><h1 v-html="htmlTemplate"></h1><!--
      v-text指令：与mustache语法相似，都是将数据进行显示，不同的是mustache语法不会替换标签内的文本，
      而v-text1则会将标签内的文本进行覆盖
--><h1>{{ msg }}，v-text</h1><h1 v-text="msg">v-text</h1><!--  v-pre指令：将标签内的内容原封不动的显示出来，不会进行额外的解析--><h1>{{ msg }}</h1><h1 v-pre>{{ msg }}</h1><!--  v-cloak指令：在vue实例对标签进行解析之前，标签上的v-cloak属性存在，当vue实例解析到该标签时，
                   会将该标签上的v-cloak属性删除
--></div><script src="js/vue.js"></script><script>//2.创建一个vue实例对象  const  MyVue =new Vue({
    //3.告诉vue对象需要控制的界面上的区域    el: "#app",
    //4.告诉vue实例对象，控制区域内的数据    data: {
      msg: "vue的实例模板",
      htmlTemplate: "<a href=‘http://www.baidu.com‘>百度一下</a>"
    }
  })
</script></body>

            <
            body
            >
            <
            div 
            id
            ="app"
            >
            <
            h1
            >{{ msg }}</h1><!--  原生写法--><img v-bind:src="imgUrl" alt=""><!--  简写：语法糖--><img :src="imgUrl" alt=""><!--  动态绑定class--><h2 :class="active">你好</h2><!--  class绑定对象:当类名的值为true时会被绑定到class中，为false时则不会绑定--><h2 :class="{active:true}">你好</h2><!--  通过变量控制class--><h2 :class="{active:isActive}">你好</h2><!--  通过方法控制class--><h2 :class="getClass()">你好</h2><!--  v-bind绑定style--><!--  font-size可使用驼峰标识的写法,可以不加引号：fontSize--><p :style="{‘font-size‘: ‘50px‘}">百舸争流</p><p :style="{fontSize: ‘50px‘}">百舸争流</p></div><script src="js/vue.js"></script><script>//2.创建一个vue实例对象  const  MyVue =new Vue({
    //3.告诉vue对象需要控制的界面上的区域    el: "#app",
    //4.告诉vue实例对象，控制区域内的数据    data: {
      msg: "vue的实例模板",
      imgUrl: ‘./img/太极生成.gif‘,
      active: ‘active‘,
      isActive: true
    },
    methods:{
      getClass:function () {
        return {active:this.isActive}
      }
    }
  })
</script></body>

            <
            body
            >
            <!--
            
1、MVVM设计模式
在MVVM设计模式中，有三部分组成
M: Model  数据模型（保存数据，处理数据业务逻辑）
V: View   视图（展示数据，与用户进行交互）
VM: View-Model 数据模型和视图的桥梁

MVVM设计模式最大的特点就是支持数据的双向传递
数据可以从  V -> VM -> M
也可以从  M -> VM -> V

2、Vue中的MVVM划分
Vue是基于MVVM的设计模式的，也就是说是支持数据的双向传递的
其中：
被控制的区域就是MVVM中的view
Vue实例对象就是View-Model
实例对象中的data就是Model

            -->
            <!--
            1、这里就是MVVM中的View
            -->
            <
            div 
            id
            ="app"
            >
            <
            h1
            >{{ msg }}</h1></div><script>//2.创建一个vue实例对象，也就是MVVM中的View-Model  const  MyVue =new Vue({
    //3.告诉vue对象需要控制的界面上的区域    el: "#app",
    //4.告诉vue实例对象，控制区域内的数据    data: {//是MVVM中的model      msg: "vue的实例模板"
    }
  })
</script></body>