VUE框架

MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel

MVVM中的第一位（m）指的是model（也就是数据data）第二位（v）指的是view（视图HTML）剩余的（vm）指的是驱动器（也叫调度者 即 new Vue实例）

Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发

1.Vue框架的特点

1>高效的数据绑定
数据驱动视图
2>灵活的组件

写法

var vm=new Vue({
   el:"#box",//定义vue的实例操作的范围
   data:{
      msg:"hello world",
   }
})

2.指令放在行间的位置 用来执行一些命令 用V- 表示

指令后面跟指的话 按照属性的写法v-text="" 这个双引号里的是一个JS表达式，不加引号就是一个变量加上引号就是一个字符串

vue常用的指令

1.v-cloak用来解决vue插值闪烁的问题。当vue实例加载完成的时候这个指令会被自动删除

<style>
  [v-cloak]{
      display: none;
  }
</style>
<h1 v-cloak >{{msg}}</h1> 
//插值闪烁的问题：当vue没有加载完成的时候 会看到未编译的{{}} 

2.v-text和v-html 相当于之前的innerHTML和innertext

<h2 v-text="5<4?'111':msg" ></h2>
<h3 v-html="msg"></h3>

3.v-bind(可以简写为:) 给标签绑定属性跟普通属性的区别是 用v-bind绑定的属性后可以跟JS表达式

<img v-bind:src="imgSrc" alt="">
<img :src="imgSrc1" alt="">

4.v-on绑定事件（可以简写为@）

<button v-on:mouseover="msg='world world'">change</button>
<button @mouseover="msg='world world2222'">change</button>

3.methods

vue里的方法定义在methods参数里，在methods里的方法如果要用到data里的数据的话需要加上this

写法

 countNum:function(x){
    console.log("方法countnum")
     // console.log(this)
     this.num=this.num+x
} 
或写成json的方法的简写形式
count(){
   this.num=this.num+x            
}

实例

<div id="app">
    <p v-text="num"></p>
    <button @click="countNum(5)">num++</button>
    <!-- //方法后面的()没有参数的时候加不加都可以 -->
</div>
var vm=new Vue({
   el:"#app",
   data:{
       num:0
   },
   methods:{
      countNum:function(x){
          console.log("方法countnum")
           // console.log(this)
           this.num=this.num+x
      } 
   }
})