最新新闻热点大事件,泉州seo搜索优化合作,民治网站建设公司,软件设计师工资一般多少今天小颖在跟着慕课网学习vue#xff0c;不学不知道#xff0c;一学吓一跳#xff0c;学了才发现#xff0c;我之前知道的只是vue的冰山一角#xff0c;嘻嘻#xff0c;今天把小颖跟着慕课网学习的demo#xff0c;给大家分享下#xff0c;希望对大家有所帮助嘻嘻。 环境… 今天小颖在跟着慕课网学习vue不学不知道一学吓一跳学了才发现我之前知道的只是vue的冰山一角嘻嘻今天把小颖跟着慕课网学习的demo给大家分享下希望对大家有所帮助嘻嘻。 环境搭建 参考vue API vue2.0elementnodewebpack搭建的一个简单的后台管理界面 详情 npm install --global vue-cli vue init webpack vue-project 然后 cd vue-project npm install 如果你配置了淘宝镜像也可以用cnpm install npm run dev 我们就在浏览器看到 但我们最终要实现 如何实现如图的效果呢 1.将App.vue修改为 templatediv idappdiv classvue-demoinput typetext classtxt v-modelnewItem keyup.enteraddItemFunulli v-forits in items{{its.name}}/li/ul/div/div
/template
script
import store from ./store
export default {name: app,data() {return {newItem: ,items: store.fetch()}},watch: {items: {handler: function(val, oldVal) {store.save(val);},deep: true}},methods: {addItemFun() {var _this this;_this.items.push({ name: _this.newItem });_this.newItem ;}}
}/script
style
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}.vue-demo {width: 400px;margin: 0 30px;
}.txt {width: 200px;height: 25px;line-height: 24px;border-radius: 5px;
}/style 对于初学vue的同学可能对于watch可能不太熟悉那就麻烦大家移步到 vue API 或参考下小颖之前写的文章vue——实例方法 / 数据 2.在与App.vue同级目录下新建store.js文件 const STORAGE_KEY todos-vuejsexport default {fetch: function() {return window.JSON.parse(window.localStorage.getItem(STORAGE_KEY) || [])},save: function(items) {window.localStorage.setItem(STORAGE_KEY, window.JSON.stringify(items))}} 3.在项目中打开cmd窗口运行npm run dev,就完成啦嘻嘻。 转载于:https://www.cnblogs.com/yingzi1028/p/7774954.html
