vue简章

 什么是vue？

　　可以独立完成前后端分离式web项目的javaScript框架

为什么使用vue？

　　三大主流框架之一：Angular React Vue
　　先进的前端设计模式：MVVM
　　可以完全脱离服务器端，以前端代码复用的方式渲染整个页面：组件化开发

特点（使用vue的优点）

　　单页面web应用

　　数据驱动

　　数据的双向绑定

　　虚拟DOM

简单使用vue

　　<div id="app">
 　　{{ }}
　　</div>
　　<script src="js/vue.min.js"></script>
　　<script>
 　　new Vue({
 　　 el: '#app'
　　 })
　　</script>

vue的‘挂钩’（挂载点）

　　new Vue({
 　　   el: '#app'
　　})

vue的data（数据）

　　<div id='app'>
　　    {{ msg }}
　　</div>
　　<script>
  　　  var app = new Vue({
  　　   el: '#app',
  　　   data: {
 　　     msg: '数据',
  　　   }
 　　   })
 　　   console.log(app.$data.msg)；//还可以直接写app.msg
　　</script

vue的methods（方法）

　　<style>
  　　  .box { background-color: orange }
　　</style>
　　<div id='app'>
  　　  <p class="box" @mouseover="pOver">测试</p>
　　</div>
　　<script>
  　　  var app = new Vue({
    　　 el: '#app',
   　　  methods: {
         　　   pOver () {
        　　        // 悬浮测试
     　　       }
  　　   }
 　　   })
　　</script>

vue的computed（计算）

　　<div id="app">
 　　 <input type="text" v-model="a">
  　　  <input type="text" v-model="b">
 　　   <div>
     　　   {{ c }}
   　　 </div>
　　</div>

　　<script>
 　　// 一个变量依赖于多个变量
  　　  new Vue({
    　　    el: "#app",
   　　     data: {
  　　          a: "",
    　　        b: "",
    　　    },
      　　computed: {
           　　 c: function() {
              　　  // this代表该vue实例，c的内容是输入内容a和b的计算后样式
                　　return this.a + this.b;
          　　  }
        　　}
　　    })
　　</script>

 

 

vue的watch（监听）

<div id="app">
<input type="text" v-model="ab">
<div>
   {{ a }}
    {{ b }}
   </div>
</div>

<script>
 // 多个变量依赖于一个变量
  new Vue({
    el: "#app",
    data: {
        ab: "",
      a: "",
        b: "",
     },
       watch: {
      ab: function() {
         // 逻辑根据需求而定
          this.a = this.ab[0];
       this.b = this.ab[1];
         }
       }
    })
</script>

 

vue的delimiters（分隔符）

 

　　<div id='app'>
   　　 ${ msg }
　　</div>
　　<script>
   　　 new Vue({
  　　   el: '#app',
  　　   data: {
   　　   msg: 'message'
  　　   },
     　　   delimiters: ['${', '}']
  　　  })
　　</script>