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>
上一篇:利用java编写的盲注脚本


下一篇:ansible常用命令大全