Vue笔记-上

Vue笔记

零、简易构建代码

<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>

在button上可以通过 v-on:click访问 也可以通过 @click访问

一、监听事件

监听事件类型

//当子对象的事件冒泡上来时候，到此停止
.stop
//添加在按钮或者链接后可以防止页面跳转   【可以不加方法名】
.prevent
//当子事件触发时候，优先执行该对象的方法
.capture
//只能自己响应事件
.self
//只能响应一次事件
.once

访问时候可以通过 @click.stop方式访问
###逻辑控制
####if 逻辑

  <div v-if="number==0">大</div>
  <div v-else-if="number==1"> 中</div>
  <div v-else>小</div>
  <script>
    
new Vue({
      el: '#div1',
      data: {
          number:0
      },
      methods:{
          toutai: function(){
             this.number=Math.random()*3
          }
      }
    })
    
</script>

for 逻辑

类似增强for的玩法

<tr v-for="hero in heros">
	<td>{{hero.name}}</td>
	<td>{{hero.hp}}</td>
</tr>

标记处index

<tr v-for="hero,index in heros">
	//start at 0
	<td>{{index+1}}</td>
	<td>{{hero.name}}</td>
	<td>{{hero.hp}}</td>
</tr>

纯数字

//从1开始
<div id="div1">
    <div v-for="i in 10">
     {{ i }}
    </div>
</div>

属性绑定

<div id="div1">
    <a v-bind:href="page">http://12306.com</a>
</div>
<script>
new Vue({
      el: '#div1',
      data:{
          page:'http://12306.com'
      }
    })
</script>

v-bind:href可以简写为 :href

双向绑定

v-model 直接输入在vue中的某个变量
<input v-model="name" >

计算

//vue 中两个变量 rmb  exchange
<td align="center">
     {{ rmb/exchange }}
</td>
//vue 中 方法 dolors
<td align="center">
     {{ dolors }}
</td>

new Vue({
      el: '#div1',
      data: {
          exchange:6.4,
          rmb:0
      },
      computed:{
          dollar:function() {
              return this.rmb / this.exchange;
          }
      }
    })
</script>

computed 和 methods 的区别 computed 是由缓存的，下次回直接返回以前计算的值，而不会再次计算，methods没有。

监视

通过watch来监视属性变化，然后如果变化则执行某个方法

new Vue({
      el: '#div1',
      data: {
          exchange:6.4,
          rmb:0,
          dollar:0
      },
      watch:{
          rmb:function(val) {
              this.rmb = val;
              this.dollar = this.rmb / this.exchange;
          },
          dollar:function(val) {
              this.dollar = val;
              this.rmb = this.dollar * this.exchange;
          },
      }
    })

过滤器

<td align="center">
                {{ data|capitalize|capitalizeLastLetter }}
</td>
<script>
new Vue({
      el: '#div1',
      data: {
          data:''
      },
      filters:{
          capitalize:function(value) {
                if (!value) return '' //如果为空，则返回空字符串
                value = value.toString()
                return value.charAt(0).toUpperCase() + value.substring(1)
          },
          capitalizeLastLetter:function(value) {
                if (!value) return '' //如果为空，则返回空字符串
                value = value.toString()
                return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
          }
      }
    })
</script>

数据data会一次被capitalize capitalizeLastLetter 处理。

全局过滤器，

有时候多个页面要用到相同的过滤器，此时则将过滤器搞为全局过滤器

Vue.filter('capitalize', function (value) {
	if (!value) return ''
	value = value.toString()
	return value.charAt(0).toUpperCase() + value.slice(1)
})

组件

<div id="div1">
    <product></product>
    <product></product>
    <product></product>
</div>
  
<script>
new Vue({
  el: '#div1',
  components:{
      'product':{
          template:'<div class="product" >MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</div>'
      }
  }
})
</script>

这样可以通过简洁的代码获得获得多个相类似的对象。

全局模式

Vue.component('product', {
	  template: '<div class="product" >MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮</div>'
	})

参数

<div id="div1">
    <product name="MAXFEEL休闲男士手包真皮手拿包大容量信封包手抓包夹包软韩版潮"></product>
    <product name="宾度 男士手包真皮大容量手拿包牛皮个性潮男包手抓包软皮信封包"></product>
    <product name="唯美诺新款男士手包男包真皮大容量小羊皮手拿包信封包软皮夹包潮"></product>
</div>
<script>
Vue.component('product', {
      props:['name'],
      template: '<div class="product" >{{name}}</div>'
    })
new Vue({
  el: '#div1'
})
</script>

自定义指令

<div id="div1">
    <div v-xart> 好好学习，天天向上 </div>
</div>
<script>
Vue.directive('xart', function (el) {
    el.innerHTML = el.innerHTML + ' ( x-art ) '
    el.style.color = 'pink'
})
 
new Vue({
  el: '#div1'
})
</script>

带参指令

<div id="div1">
    <div v-xart="{color:'red',text:'best learning video'}"> 好好学习，天天向上 </div>
</div>
<script>
Vue.directive('xart', function (el,binding) {
    el.innerHTML = el.innerHTML + '( ' + binding.value.text + ' )'
    el.style.color = binding.value.color
})
new Vue({
  el: '#div1'
})
</script>

钩子函数

<div id="div1">
    <div v-xart:hello.a.b="message"> </div>
</div>
<script>
Vue.directive('xart', {
      bind: function (el, binding, vnode) {
            var s = JSON.stringify
            el.innerHTML =
              'name: '       + s(binding.name) + '<br>' +
              'value: '      + s(binding.value) + '<br>' +
              'expression: ' + s(binding.expression) + '<br>' +
              'argument: '   + s(binding.arg) + '<br>' +
              'modifiers: '  + s(binding.modifiers) + '<br>' +
              'vnode keys: ' + Object.keys(vnode).join(', ')
      },
      update: function (newValue, oldValue) {
        // 值更新时的工作
        // 也会以初始值为参数调用一次
      },
      unbind: function () {
        // 清理工作
        // 例如，删除 bind() 添加的事件监听器
      }
    })
new Vue({
  el: '#div1',
  data:{
      message:'hello vue.js'
  }
})
</script>

输出结果

---

name: “xart”
value: “hello vue.js”
expression: “message”
argument: “hello”
modifiers: {“a”:true,“b”:true}
vnode keys: tag, data, children, text, elm, ns, context, fncontext, fnoptions, fnscopeid, key, componentoptions, componentinstance, parent, raw, isstatic, isrootinsert, iscomment, iscloned, isonce, asyncfactory, asyncmeta, isasyncplaceholder

---