vue初探

Posted 2020-10-22 kkform

Vue初探

当初javascript的诞生是因为网络受限，把部分逻辑交给客户端实现。但随着页面复杂和需求增加，代码变得越来越臃肿，即使jQuery这样的js框架也还是没能彻底解决。意识到问题后逐步将前端组件化，就是把css、html、js放在一个文件夹下，直到Vue的出现才打开了组件化开发的新大门。

使用方法

1. 引入vue.js

2. 新增div标签

   <div id="app">{{ message }}</div>

3. 
   <script>
     var vm = new Vue({
       el:‘#app‘,//element的简写
       data:{
         message:‘hello world‘
       }
     })
   </script>

4. 这样页面就是输出<div id="app">hello world</div>了。

   官方的demo就是这样啦

 

常用的有:v-if v-for v-model v-on v-for v-bind ,接下来再逐一了解

• v-if 显示和隐藏元素

  
  <script>
    var vm = new Vue({
      el:‘#app‘,
      data:{
        show:true
      }
    })
  <script>

  
  <div id="#app">
    <span v-if="show">hello world</span>
  </div>

  现在span 能正常显示，如果show:false 则会被注释（注意不是隐藏）,可以在console页面输入vm.show=false 查看效果

• v-for 循环输出数组和对象

  
  <script>
    var vm = new Vue({
      el:‘#app‘,
      data:{
        books:[
          {name:‘水浒传‘,author:‘施耐庵‘,price:50},
          {name:‘三国演义‘,author:‘罗贯中‘,price:20},
          {name:‘西游记‘,author:‘吴承恩‘,price:40}
        ]
      }
    })
  </script>

  
  <div id="app">
    <ul>
      <li v-for="book in books">书名：{{book.name}},作者：{{book.author}},价格：{{book.price}}</li>
    </ul>
  </div>

  这样就能循环输出了，当然也可以嵌套v-if 使用。

  数组还能循环出下角标,v-for=‘(book, index) in books‘

  对象还能循环出键值对v-for=‘(value, key, index) in object‘

• v-model 绑定input 和textarea 标签的值

  
  <script>
    var vm = new Vue({
      el:‘#app‘,
      data:{
        name:‘‘
      }
    })
  </script>

  
  <div id="app">
    {{name}}
    <input v-model="name" />
  </div>

  修改input的值会同事修改关联name的值。

• v-on 绑定事件常见的有鼠标和键盘事件

  
  <script>
    var vm = new Vue({
      el:‘#app‘,
      methods:{
        alertsth: function(){
          alert(‘click me‘);
       }
      }
    })

  
  <div id="#app">
    <button v-on=‘alertsth‘>点击</button>
  </div>

  这样点击按钮会弹出click me ，同样还有众多修饰符。

  键盘事件keyup 同样有多个修饰符，就不一一罗列了，https://cn.vuejs.org/v2/guide/events.html

  v-on 可简写为@ 。

• v-bind 绑定元素的属性

  
  <a v-bind:href=‘href‘ :class=‘class‘></a>

  同样的能简写为: