自学网站建设教程,网站推广公司兴田德润在哪儿,wordpress后台登陆500错误,聚名网下载之前上课也学过vue.js#xff0c;但是一遍过下来#xff0c;实话#xff0c;没有记住什么#xff0c;所以决定自己在对照着文档过一遍#xff0c;所以之后会弄一些基础的东西#xff0c;还请大神们莫喷~~~~今天先给平台打一个预防针#xff0c;Young C 要来啦~~ 吼吼但是一遍过下来实话没有记住什么所以决定自己在对照着文档过一遍所以之后会弄一些基础的东西还请大神们莫喷~~~~今天先给平台打一个预防针Young C 要来啦~~ 吼吼基础中的基础。那这里不能全是大白话咱们先说点干的吧比如说 如何安装Vue.js。。。。哈哈 ~~ 是不是被简单的惊到了 慢慢来。。。。。所以要淡定淡定。。。。。
复制代码 安装Vue.js 方法 - 直接引用 vue.js 文件script srchttps://cdn.jsdelivr.net/npm/vue2.5.16/dist/vue.js/script
-NPM安装# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖走你
$ cd my-project
$ npm run dev
复制代码 初识vue很多还屡不清所以按照文档敲了下留下来理解. !DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleindex/titlescript src../../node_modules/vue/dist/vue.js/script/headbody!--app--div classappp stylecolor: brownapp/p{{message}}/div!--app2--div classapp2p stylecolor: brownapp2/pspan :titlemessage鼠标悬停几秒钟查看此处动态绑定的提示信息/span/div!--app3--div classapp3p stylecolor: brownapp3/pp v-ifstart现在看到我了/p/div!--app4--div classapp4p stylecolor: brownapp4/pulli v-foritem in list{{item.text}}/li/ul/div!--app5--div classapp5p stylecolor: brownapp5/pp{{message}}/pbutton clickfanzhuan点击翻转/button/div!--app6--div classapp6p stylecolor: brownapp6/pp{{message}}/pinput v-modelmessage/div!--app7--div classapp7p stylecolor: brownapp7/poltodo-itemv-foritem in app7List:todoitem:keyitem.id/todo-item/ol/divscriptlet app new Vue({el:.app,data:{message:hello,word}});//-----------------------app2let app2 new Vue({el:.app2,data:{message:页面加载于 new Date().toLocaleString()}});//--------------------app3let app3 new Vue({el:.app3,data:{start:true}});//--------------------app4let app4 new Vue({el:.app4,data:{list:[{text:从头},{text:再来},{text:一遍}]}});app4.list.push({text:测试});//--------------------app5let app5 new Vue({el:.app5,data:{message:hello,js.vue},methods:{fanzhuan(){this.message this.message.split().reverse().join();}}});//-------------------app6let app6 new Vue({el:.app6,data:{message:hello,js.vue}});//-------------------app7Vue.component(todo-item,{props:[todo],template:li{{todo.text}}/li});let app7 new Vue({el:.app7,data:{app7List:[{id:1,text:蔬菜},{id:2,text:水果},{id:3,text:主食}]}})/script/body/html复制代码以上是根据官方文档敲出来的可忽略。 转载于:https://juejin.im/post/5adeb2b06fb9a07ac021e132
