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

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