vue中如何使用localstorage来存储页面信息

vue具体轻量级框架,简单易学,双向数据绑定,组件化,数据和结构的分离,虚拟DOM,运行速度快等优势,vue中页面使用的是局部刷新,不用每次跳转页面都要请求所有数据和DOM,可以大大提升访问速度和用户体验。

<强>环境搭建:

参考:vue API

超简单的vue。js环境搭建教程

<强>详情:

<代码> npm安装——全球vue-cli

<代码>,vue init webpack vue-project

然后:

,

<代码> cd vue-project

npm install ,,如果你配置了淘宝镜像,也可以用cnpm安装

<代码> npm运行dev

我们就在浏览器看到:

& lt; template> 　　,& lt; div  id=癮pp"比; 　　& lt;才能div 类=& # 39;vue-demo& # 39;比; 　　,,& lt; input 类型=皌ext",类=皌xt", v模型=& # 39;newItem& # 39;, @keyup.enter=& # 39; addItemFun& # 39;比; 　　,,& lt; ul> 　　,,,& lt; li  v=癷ts 拷贝items"在{{its.name}} & lt;/li> 　　,,& lt;/ul> 　　& lt;才能/div> 　　,& lt;/div> 　　& lt;/template> 　　& lt; script> 　　import  store 得到& # 39;。/商店# 39; 　　export  default  { 　　,名字:& # 39;应用# 39; 　　,数据(){ 　　return {才能 　　,,,newItem: & # 39; & # 39; 　　,,,项目:store.fetch () 　　,,} 　　}, 　　,看:{ 　　,,项目:{ 　　,,,处理程序:函数(val, oldVal), { 　　,,,store.save (val); 　　,,}, 　　,才能深:真实 　　,,} 　　}, 　　,方法:{ 　　addItemFun才能(),{ 　　,,var  _this =,; 　　,,_this.items.push({, & # 39;名字# 39;:,_this.newItem }); 　　,,_this.newItem =, & # 39; & # 39;; 　　,,} 　　,} 　　} 　　 　　& lt;/script> 　　& lt; style> 　　# app  { 　　,字体类型:& # 39;Avenir& # 39;,, Helvetica,, Arial,,无衬线; 　　,-webkit-font-smoothing:平滑; 　　,-moz-osx-font-smoothing:灰度; 　　,text-align:中心; 　　,颜色:# 2 c3e50; 　　,margin-top: 60 px; 　　} 　　 　　.vue-demo  { 　　,宽度:400 px; 　　,保证金:0,30 px; 　　} 　　 　　.txt  { 　　,宽度:200 px; 　　25,身高:px; 　　,行高:24 px; 　　,这个特性:5 px; 　　} 　　 　　& lt;/style>

对于初学vue的同学,可能对于手表可能不太熟悉,那就麻烦大家移步到vue API或参考下小颖之前写的文章:vue -实例方法/数据

2。在与App.vue同级目录下,新建店。js文件: