Vue 个人笔记（一）

**

本文为个人感悟，仅供参考

**
Vue (读音 /vjuː/，类似于 view) ，Vue官网

v-bind：绑定数据和元素属性
v-bind:value=“name”，使用v-bind绑定了input标签的value属性，input中显示vue实例中的name，不仅可以绑定value，任何属性都可以被绑定。

		<div id="app">
        	<p>{{name}}-{{age}}</p>
			<p>{{age*3}}</p><!-- 年龄*3 -->
			<p>{{random()}}</p><!-- 随机数，调用vue实例中函数 -->
			<img v-bind:src="img" style="width: 10%; height: 10%;"><!-- 引用图片 -->
			<input type="" name="" id="" v-bind:value="name" />
        </div>

下列代码中所使用的math函数：Math函数介绍

<script type="text/javascript">
	var app = new Vue({//Vue 函数创建一个新的 Vue 实例
		el:'#app',//Vue实例挂载的元素节点
		data:{	//data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例
			name:'Ali',
			age:'999',
			img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607268121011&di=d7e155034ce41c10384cb059cc3018ef&imgtype=0&src=http%3A%2F%2Fimg1.dzwww.com%3A8080%2Ftupian%2F20160811%2F90%2F13454468189742654138.png'
		},
		methods:{	// methods 属性给 Vue 定义方法
			random:function(){
				return Math.random();//返回 0 ~ 1 之间的随机数。
			}
		}
	});
</script>