vue笔记-2（脚手架搭建，动态设置图片，moment.js的使用）

? 1.v-for

普通循环

<div id="example">
	<p v-for="(item,i) in list">索引值:{{i}}---每一项{{item}}</p>
</div>
<script>
	var vm=new Vue({
		el:'#example',
		data:{
			list:[1,2,3,4,5,6,7,8,9]
		}
	})
</script>

循环对象

<div id="example">
	<p v-for="(value,key) in user">{{value}}---{{key}}</p>
</div>
<script>
	var vm=new Vue({
		el:'#example',
		data:{
			user:{
				id:1,
				name:'tuoni',
				gender:'男'
			}
		}
	})
</script>

? 2.生命周期创建时的四个函数

1.beforeCreate
此时生命函数周期执行的时候data和methods中的数据都还没有初始化
2.created
data和methods都已经被初始化好了
3.beforeMount
模板已经在内存中编译好了，但是还没有把模板渲染到页面中去
4.mounted

• beforeUpdate：此时页面中显示的数据还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
• updated：此时页面和数据已经同步了，都是最新的

内存中的模板已经真实地挂载到了页面中，用户已经可以看到渲染好的页面了
注意： mounted是实例创建周期的最后一个生命周期函数，执行完了此函数就表示实例已经完全创建完毕，如果没有其它的操作的话，就静静躺在内存中了

? 3.Vue-cli 3.x脚手架的搭建

有效，无坑

? 4.Vue动态设置背景图片和img

<div class="top" :style="{backgroundImage: 'url(' + avatar_url + ')', backgroundSize:'100%',backgroundPosition:'12px'}">
</div>
//显示图片，敲重点！！！注意这个格式
<img :src="avatar_url" />

? 5.Window localStorage属性

使用 localStorage 创建一个本地存储的 name/value 对，name=“lastname” value=“Smith”, 然后检索 “lastname” 的值，并插入到 id=“result” 的元素上:

// 存储
localStorage.setItem("lastname", "Smith");
// 检索
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
//保存数据语法
localStorage.setItem("key", "value");
//读取数据语法
var lastname = localStorage.getItem("key");
//删除数据语法
localStorage.removeItem("key");

? 6.vue moment的安装和使用

安装
bower install moment --save //bower
npm install moment --save  // npm
Install-Package Moment.js  //NuGet
spm install moment --save  // spm
meteor add momentjs:moment // meteor

?

具体的时间格式，官网走一波 ?点击