初学VUE（如何创建vue实例和vue的基本语法）

什么是vue？

Vue 是一套用于构建用户界面的渐进式框架，是一种自底向上逐层应用。Vue的核心库只关心视图层，能够与其它第三方库或已有项目结合。

如何引入使用vue？

1. script标签引入
2. NPM安装使用

vue的基本语法

Mustache语法

{{}} ： 通过mustache语法插入 数据是响应式的

mustache对数据类型的支持；
数据类型：
基础数据类型：number、string 、boolean；
复杂数据类型：object、（array、function）；
特殊数据类型：null、undefined；（在页面中不会显示）
if ，console.log 和 alert 在mustache语法是不支持的！

插值操作

Mustache ：{{}}

通过mustache语法插入 数据是响应式的

v-once:

该指令后面不需要跟任何表达式，表示元素和组件值渲染一次，不会随着数据的改变而改变

v-html:

该指令后面往往会跟上一个string类型，会将string的html解析出来并且进行渲染

v-text:

v-text作用和Mustache比较相似：都是用于将数据显示在界面中,v-text通常情况下，接受一个string类型

v-pre:

v-pre用于跳过这个元素和它子元素的编译过程，用于显示原本的Mustache语法

v-cloak:

在某些情况下，我们浏览器可能会直接显然出未编译的Mustache标签。

属性绑定

v-bind：

动态绑定属性 v-bind有一个对应的语法糖，也就是简写方式“ ：”

v-bind用于绑定一个或多个属性值，或者向另一个组件传递props值，

比如图片的链接src、网站的链接href、动态绑定一些类、样式等等

v-bind绑定class属性

普通绑定：

<div id="app">
      <img v-bind:src="imgUrl" alt="">
      <a v-bind:href="srcUrl">百度一下</a>
  </div>
   var vm = new Vue({
      el: '#app',
      data: {
          imgUrl: '../1.gif',
          srcUrl: 'http://www.baidu.com' 
      }
    });

对象方法:

 <div id="app">
        <h1>{{ msg }}</h1>
        <h2 v-bind:class = "{ active : isActive , line : isLine}">{{ msg }}</h2>
        <h3 v-bind:class = "getClass()">{{ msg }}</h3>
        <button v-on:click="btnclick">按钮</button>
    </div>
    var vm = new Vue({
      el:'#app',
      data: {
        msg:'hello vue',
        isActive : true ,
        isLine : true
      },
      methods : {
            btnclick: function () {
              this.isActive = !this.isActive
            },
            getClass: function () {
              return {active: !this.isActive, line: !this.isLine}
            }
      }
    });

数组方法:

 <div id="app">
          <h4 class="title" :class='[active,line]'>{{ msg }}</h4>
          <h4 class="title" :class='getClass()'>{{ msg }}</h4>
    </div>
    const vm = new Vue({
          el: '#app',
          data: {
            msg: 'hello vue',
            active: 'a',
            line: 'bb'
          },
          methods: {
            getClass: function () {
              return [this.active,this.line]
            }
          }
      });