美文网首页
Vue 基础点

Vue 基础点

作者: AUL | 来源:发表于2018-08-01 14:11 被阅读18次
    • 1 什么是 Vue?
     比JQuery用起来更加精简的前端框架
    
    • 2 Vue 中的监听事件
    1. 在 js 里为 Vue 对象的数据设置为 clickNumber
    2. methods 新建 count 方法
    3. v-on:click 添加事件处理
    4. v-on 可以缩写为 @
    5. 事件修饰符 阻止冒泡 .stop, 点击事件添加 v-on:click.stop
    6. 事件修饰符 优先触发 .capture
    7. 事件修饰符 只有自己能触发,子元素无法触发.self
    8. 事件修饰符 只能提交一次 .once
    9. 事件修饰符 阻止提交 .prevent ?
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
     
    <div id="div1">
      <div>一共点击了  {{clickNumber}}次</div>   
      <button v-on:click="count">点击</button>
    </div>
      
    <script>
    new Vue({
          el: '#div1',
          data: {
              clickNumber:0
          },
          methods:{
              count: function(){
                  this.clickNumber++;
              }
          }
        })
    </script>
    
    
    • 3 Vue 中的条件语句
    1. 同样要在js中设置数据
    2. methods 中添加方法
    3. 元素中 添加v-if 标签
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>
    <div id="div1">
      <button v-on:click="toggle">切换隐藏显示</button>
      <div v-if="show"> 默认这一条是看得见的</div>     
    </div>
    <script>
        
    new Vue({
          el: '#div1',
          data: {
              show:true
          },
          methods:{
              toggle: function(){
                  this.show=!this.show;
              }
          }
        }) 
    </script>
    
    • v-for Vue循环语句

    1 index用法 *** 通过如下方式可以获取遍历下标 <tr v-for="hero,index in heros">

    data:   {
        heros:data
    }
    <tr v-for="hero in heros">
        <td>{{hero.name}}</td>
        <td>{{hero.hp}}</td>
    </tr>   
    
    • 4 v-bind 做属性绑定
    通过v-bind进行属性绑定
    <a v-bind:href="page">http://Google.com</a>
    简写 v-bind:href  可以简写成 :href
    
    • 5 v-model 双向绑定

    修饰符
    .lazy 加上.lazy之后,相当于监听change操作,只有在失去焦点的时候,才会进行数据绑定了
    .number
    .trim trim 去掉前后的空白

    <div id="div1">
         
        hero name: <input v-model="name" >
        <button @click="doClick" >提交数据</button>
         
    </div>
        
    <script>
      
    new Vue({
          el: '#div1',
          data:{
            name:"teemo"
          },
          methods:{
              doClick:function(){
                  alert(this.name);
              }
          }
        })
        
    </script>
    双向绑定是数据与视图的双向绑定,当 数据发生变化 视图也会跟着改变,传统的方式需要先获取标签再更改数据,是单向绑定。
    
    
    • 6 computed计算属性
    * 1 computed 和 methods 的区别
     computed 是有缓存的,  这样如果是复杂计算,就会节约不少时间。 而methods每次都会调用
    
    *2 也可以通过watch 监听属性来设置 
    
    • 7 自定义指令
      像 v-if, v-bind, v-on 以外, 开发者还可以开发 自定义的指令

    1 .简单例子
    2 .带参数的自定义指令

    1. 使用Vue.directive 来自定义
    2. 第一个参数就是 指令名称 xart
    3. el 表示当前的html dom对象
    4. 在方法体力就可以通过 innerHTML style.color 等方式操控当前元素了
     
    Vue.directive('xart', function (el) {
        el.innerHTML = el.innerHTML + ' ( x-art ) '
        el.style.color = 'pink'
    })
    
    使用方式:<div v-xart> 好好学习,天天向上 </div>
    
    v-xart=“xxx” 这个xxx。 此时xxx是一个json对象,所以就可以通过.text, .color取出对应的值出来。
     
    Vue.directive('xart', function (el,binding) {
        el.innerHTML = el.innerHTML + '( ' + binding.value.text + ' )'
        el.style.color = binding.value.color
    })
    视图上用就传递个json 对象进去
    <div v-xart="{color:'red',text:'best learning video'}"> 好好学习,天天向上 </div>
     
    

    相关文章

      网友评论

          本文标题:Vue 基础点

          本文链接:https://www.haomeiwen.com/subject/ueslvftx.html