分类 Vue 下的文章

Vue learning(进阶)第一篇


vue命令工具的安装官网https://github.com/vuejs/vue-cli#最新版本确认 $ npm show vue-cli #安装 $ npm install -g vue-cli@2.9.3 #安装版本确认 $ npm -V #命令帮助 $ vue -hvue-cli命令选项init 初始化Projectlist 当前可用的模板build 组件打包发布help [cmd]$ vue help init Usage: vue-init <template-name> [project-name] Options: -c, --clone use git clone --offline use cached template -h, --help output usage information...

Vue leaning(入门)第四弹


组件:基础的基础组件 (Component, portlet)组件就是页面上的一小块区域内容,完成一个小的页面功能<div id="myApp"> <today-weather></today-weather> </div> <script> Vue.component('today-weather', { template: '<div>今天下雨,出不去啦,干什么呢?看YouTube吧!</div>' }); var myApp = new Vue({ el: '#myApp', }); </scrip...

Vue leaning(入门)第三弹


列表渲染v-for循环数组元素(对象、数列)整理内容显示到页面上<div id="myApp"> <ul> <li v-for = "(game, index) in games">({{ index + 1}}) {{ game.title }} / 售价: {{ game.price }}元</li> </ul> </div> <script> var myApp = new Vue({ el: '#myApp', data: { games: [ ...

Vue leaning(入门)第二弹


设定计算属性setter设置计算属性,同步更新元数据的值 =>(反推数据)<div id="myApp"> 原价格:{{ price }}含税价:{{ priceInTax }}折合人民币{{ priceChinaRMB }} <hr> <button @click = "btnClick(10800)">含税价设为10800</button> </div> <script> var myApp = new Vue({ el: '#myApp', data: { price: 29980, ...

Vue learning(入门)第一弹


vue.js导入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>html代码块<div id="myApp"> {{ message }} </div>javascript脚本部分(对html代码块的一个功能性的明述)<script> var myApp = new Vue({ el: '#myApp', data: { message: 'Hello Vue.js World!' } }) </script>v-...

召唤看板娘