vue个人总结

vue和小程序的一些区别

小程序的数据展示

小程序标签的属性和内容都可以用mustache语法来引用data中的数据

Page({
  data: {
    src: "www.baidu.com"
  },
})

<image class="image" src="{{src}}"></image>
<view>{{src}}</view>

小程序前端调用函数传值

<view bindtap="setname" data-name="mxc" data-age="18">aa</view>

Page({
  setname:function(e){
    console.log(e);
  }
})

vue数据展示

标签内容用mustache语法展示

<script>
    let vue = new Vue({
        el: "#app",     //挂载点
        data:{
            msg: "aaa",
            size1: '10px',
            size: '10',
        },
        methods:{
            dianji(){
                this.size = parseInt(this.size)+10
            }
        }
    })
</script>

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

标签属性用v-bind展示

<h2 :style="{fontSize: size+'px'}">{{msg}}</h2>

vue调用函数传值

 <button @click="dianji()">放大</button>

vue循环遍历

<table id="app">
	<tbody>
		<!--遍历数组-->
		<tr v-for="(item, index) in list">
			<!--遍历对象-->
			<td v-for="(value, key, index) in item">
				{{value}}--{{key}}--{{index}}
			</td>
		</tr>
	</tbody>
</table>

new Vue({
  el: '#app',
  data: {
    list: [
    	{
			name: "zhangsan",
			age: 18
		},
		{
			name: "lisi",
			age: 19
		}
    ]
  }
})