Vue的基础语法

------------恢复内容开始------------

1、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>

2、Mustache语法

<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>

3、v-once、v-html，v-text，v-pre，v-cloak语法

<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>

4、v-bind：动态绑定

<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>

5、MVVM设计模式

<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>

------------恢复内容结束------------

<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>

Vue的基础语法

推荐阅读