Vue.js

最新推荐文章于 2024-07-08 10:04:44 发布

oJuePeiLian

最新推荐文章于 2024-07-08 10:04:44 发布

阅读量295

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/oJuePeiLian/article/details/122132191

版权

引用vue.js

<script src="vue.min.js"></script>

监听事件

<button v-on:click="count">点击</button>

v-on：可以缩写成@，即

<button @click="count">点击</button>

基本写法

<script src="vue.min.js"></script>
<div id="ces">
<div>一共点击了{{clicknumber}}次</div>
<button v-on:click='count'>点击</button>
</div>
<script>
	new Vue({
		el:'#ces',
		data:{
			clicknumber:0
	},
		methods:{
		count:function(){
		this.clicknumber++
		}	
	}
})
</script>

v-if语句

<script src="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语句

可以用来遍历数组

<script src="vue.min.js"></script>
<style>
table tr td{
	border:1px solid gray;
}
table{
	border-collapse:collapse;
	width:300px;
}
tr.firstLine{
	background-color: lightGray;
}
</style>

<div id="div1">
  
	<table align="center" >
		<tr class="firstLine">
			<td>name</td>
			<td>hp</td>
		</tr>
		//hero in heros中的hero为任意变量
		<tr v-for="hero in heros">
			<td>{{hero.name}}</td>
			<td>{{hero.hp}}</td>
		</tr>	
		
	</table>

</div>
   
<script>
 
var data = [
   		  {name:"盖伦",hp:341},
		  {name:"提莫",hp:225},
		  {name:"安妮",hp:427},
		  {name:"死歌",hp:893}
    ];
new Vue({
      el: '#div1',
      data:	{
    	  heros:data
      }
    })
   
</script>

index可以得到数组的下标，下标基于0。

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

纯数字遍历

<div v-for="i in 10"></div>

V-bind属性绑定

<script src="vue.min.js"></script>
<div id="ces">
  <a v-bind:href="page">百度一下，你就知道</a>
</div>
<script>
  new Vue({
    el:'#ces',
    data:{
      page:'//www.baidu.com'
    }
  })
</script>

可以将v-bind：href简写成：href，即

<script src="vue.min.js"></script>
<div id="ces">
  <a :href="page">百度一下，你就知道</a>
</div>
<script>
  new Vue({
    el:'#ces',
    data:{
      page:'//www.baidu.com'
    }
  })
</script>

双向绑定V-model

<script src="vue.min.js"></script>
<div id="ces">
  heroname:<input v-model="name"/>
  <button @click="sendinformation">提交</button>
</div>
<script>
  new Vue({
    el:"#ces",
    data:{
      name:''
    },
    methods:{
      sendinformation:function (){
        alert(this.name)
      }

    }
  })
</script>

Computed计算属性

  <style>
  table tr td{
    border:1px solid gray;
    padding:10px;

  }
  table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;
  }
  tr.firstLine{
    background-color: lightGray;
  }
</style>
<body>
<script src="vue.min.js"></script>

<div id="div1">

  <table align="center" >
    <tr class="firstLine">
      <td>人民币</td>
      <td>美元</td>
    </tr>
    <tr>
      <td colspan="2" align="center">汇率:<input type="number" v-model.number="exchange"></td>
    </tr>
    <tr>
      <td>￥:<input type="number" v-model.number="rmb"></td>
      <td>$:{{dollar}}</td>
    </tr>
  </table>
  <script>
    new Vue({
      el:'#div1',
      data:{
        exchange:6.4,
        rmb:0
      },
      computed:{
        dollar:function (){
          return this.rmb/this.exchange
        }
      }

    })
  </script>
</div>

watch监听属性

<script src="vue.min.js"></script>

<div id="div1">

  <table align="center" >
    <tr class="firstLine">
      <td>人民币</td>
      <td>美元</td>
    </tr>
    <tr>
      <td colspan="2" align="center">汇率:<input type="number" v-model.number="exchange"></td>
    </tr>
    <tr>
      <td>￥:<input type="number" v-model.number="rmb"></td>
      <td>$:<input type="number" v-model.number="dollar"></td>
    </tr>
  </table>
  <script>
    new Vue({
      el:'#div1',
      data:{
        exchange:6.4,
        rmb:0,
        dollar:0
      },
      watch:{
        rmb:function (value){
          this.rmb=value;
          this.dollar=this.rmb/this.exchange;
        },
        dollar:function (value){
          this.dollar=value;
          this.rmb=this.dollar*this.exchange;
        }
      }
      /*computed:{
        dollar:function (){
          return this.rmb/this.exchange
        }
      }*/

    })
  </script>
</div>

过滤器

将字符串开头以及结尾转化成大写字母

<script src="vue.min.js"></script>
<style>
table tr td{
    border:1px solid gray;
    padding:10px;
     
}
table{
    border-collapse:collapse;
    width:800px;
    table-layout:fixed;	
}
tr.firstLine{
    background-color: lightGray;
}
</style>
  
<div id="div1">
    
    <table align="center" >
        <tr class="firstLine">
            <td>输入数据</td>
            <td>过滤后的结果</td>
        </tr>       
        <tr>
        	<td align="center">
        		<input v-model= "data"  />
        	</td>
        	<td align="center">
        		{{ data|capitalize|capitalizeLastLetter }}
        	</td>
        </tr>
    </table>
  
</div>
     
<script>
   
new Vue({
      el: '#div1',
      data: {
    	  data:''
      },
      //capitalize和capitalizeLastLetter可自行定义
      filters:{
    	  capitalize:function(value) {
    		    if (!value) return '' //如果为空，则返回空字符串
    		    value = value.toString()
    		    return value.charAt(0).toUpperCase() + value.substring(1)
          },
          //charAt(0)为字符串第一个字符，substring(1)为截取字符串第2个字符往后的字符，toUpperCase()将小写字母转化为大写
      	  capitalizeLastLetter:function(value) {
    		    if (!value) return '' //如果为空，则返回空字符串
    		    value = value.toString()
    		    return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
          }
      }
    })
     
</script>

全局过滤无非就是把Vue对象里的代码移出外面来

Vue.filter('capitalize', function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
})
     
Vue.filter('capitalizeLastLetter', function (value) {
    if (!value) return '' //如果为空，则返回空字符串
    value = value.toString()
    return value.substring(0,value.length-1)+ value.charAt(value.length-1).toUpperCase()
})

组件

<script src="vue.min.js"></script>
<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>

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

new Vue({
  el: '#div1'
})
</script>

参数

<script src="vue.min.js"></script>
<style>
div.product{
  float:left;
  border:1px solid lightGray;
  width:200px;
  margin:10px;
  cursor: pointer;
}
</style>

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

动态参数

  <script src="vue.min.js"></script>
  <style>
    div.product{
      float:left;
      border:1px solid lightGray;
      width:200px;
      margin:10px;
      cursor: pointer;
    }
  </style>
<body>
<script src="vue.min.js"></script>
<div id="div1">
  组件外的值：<input v-model="outname">
  <product v-bind:name="outname"></product>
</div>
<script>
  Vue.component('product',{
    props:['name'],
    template:'<div class="product">{{name}}</div>'
  })
  new Vue({
    el:"#div1",
    data:{
      outname:'123'
    }
  })
</script>

…
本文内容为本人学习笔记，详细内容可看how2j

oJuePeiLian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js

引用vue.js<script src="vue.min.js"></script>监听事件<button v-on:click="count">点击</button>v-on：可以缩写成@，即<button @click="count">点击</button>基本写法<script src="vue.min.js"></script><div id="ces"><div
复制链接

扫一扫