vue
Justdoforever
读书是为了更出色的人生!
展开
-
npm 运行vue项目
需要以下装备:node.js环境(npm包管理器) vue-cli 脚手架构建工具 cnpm npm的淘宝镜像接着从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。安装完成之后,打开命令行工具,输入node -v,如下图,如果出现相应的版本号,则说明安装成功。然后在命令行中输入npm install -g cnpm --r...转载 2019-08-06 18:40:14 · 11983 阅读 · 2 评论 -
Vue.js 监听属性
Vue.js 监听属性监听属性监听属性vue可以通过watch来监听属性值的变化。这是一个计算人民币对美元汇率的例子<script src="https://how2j.cn/study/vue.min.js"></script> <style>table tr td{ border:1px solid gray; padding:10px; }table{ border-collapse:collapse;原创 2020-12-25 14:46:48 · 569 阅读 · 2 评论 -
Vue.js 计算属性
Vue.js 计算属性不用.computed.computedmethodsmethods与computed区别不用.computed<script src="https://how2j.cn/study/vue.min.js"></script> <style>table tr td{ border:1px solid gray; padding:10px; }table{ border-collapse:colla原创 2020-12-22 16:44:33 · 82 阅读 · 0 评论 -
Vue.js 双向绑定
Vue.js 双向绑定v-model 双向绑定多种数据风格的数据绑定修饰符.lazy.number.trimv-model 双向绑定前面的例子,都是把 Vue对象上的数据显示在视图上,那么如何把视图上的数据放到Vue对象上去呢?这时就需要用到v-model进行双向绑定像这样,当input里面的值发生变化的时候,就会自动把变化后的值,绑定到Vue对象上去了 <input v-model="name" >如:<script src="https://how2j.cn/stu原创 2020-12-22 15:39:46 · 453 阅读 · 0 评论 -
Vue.js 属性绑定
Vue.js 属性绑定<script src="https://how2j.cn/study/vue.min.js"></script> <div id="div1"> <a v-bind:href="page">http://12306.com</a></div> <script> new Vue({ el: '#div1', data:{ page:'htt原创 2020-12-22 11:39:30 · 68 阅读 · 0 评论 -
Vue.js 循环语句
Vue.js 循环语句v-forv-for首选准备一个数组 var data = [ {name:"盖伦",hp:341}, {name:"提莫",hp:225}, {name:"安妮",hp:427}, {name:"死歌",hp:893} ]; 然后在构建Vue的时候把这个数组作为参数传递进去: data: { heros:data} 最后在视图上,通过v-for 遍历这个数组。 <tr v-for="hero i原创 2020-12-22 11:33:31 · 144 阅读 · 0 评论 -
Vue.js 条件语句
Vue.js 条件语句v-ifv-else 不是v-if的v-else-ifv-if通过toggle函数切换show的值。 通过v-if 语句,当show 是true的时候,显示当前元素 <div v-if="show"> 默认这一条是看得见的</div> v-else 不是v-if的v-else-if<script src="https://how2j.cn/study/vue.min.js"></script> <div id原创 2020-12-22 11:22:50 · 75 阅读 · 0 评论 -
Vue.js 监听事件
Vue.js 监听事件v-on监听事件1. 在 js里为 Vue 对象的数据设置为 clickNumber data: { clickNumber:0} 2. 新建一个方法: count, 其作用是 clickNumber 自增1 methods:{ count: function(){ this.clickNumber++; }} 3. 在按钮上增加 click 监听,调用 count 方法, v-on可缩写为@ <butto转载 2020-12-22 10:55:51 · 729 阅读 · 0 评论