欢迎来到Felix的博客

雨恨云愁,江南依旧称佳丽。水村渔市。一缕孤烟细。天际征鸿,遥认行如缀。平生事。此时凝睇。谁会凭阑意
返回顶部
摘要: 组件的结构 知识点 vue命令行开发模式为我们带来的组件开发方式。 组件文件夹 所有的组件都被统一放在工程中的组件文件夹中。 {myproject}/src/components/* 组件格式 template:组件html内容 script:组件js脚本(ES6) style:组件css样式单 实 阅读全文
posted @ 2021-01-18 19:38 felixtester 阅读(55) 评论(0) 推荐(0)
摘要: 自定义css样式 知识点 定义属于自己的样式单文件my.css 实战演习 $ cd assets $ nano my.css ... .myclass1 { color: red; border: 1px solid blue; } ... $ cd ../ $ nano App.vue ... # 阅读全文
posted @ 2021-01-18 19:37 felixtester 阅读(73) 评论(0) 推荐(0)
摘要: 使用Ajax库-axios 知识点 为网页增加远程数据存取能力(Ajax) HTTP库axios(浏览器 or Node.js) axios:Promise based HTTP client for the browser and node.js https://github.com/axios/ 阅读全文
posted @ 2021-01-18 19:36 felixtester 阅读(91) 评论(0) 推荐(0)
摘要: webpack模板工程 知识点 建立webpack模板工程 官网 http://vuejs-templates.github.io/webpack/ 实战演习 $ vue init webpack myweb $ cd myweb $ npm run dev $ npm run build $ co 阅读全文
posted @ 2021-01-18 19:34 felixtester 阅读(62) 评论(0) 推荐(0)
摘要: 命令行安装 知识点 vue命令工具安装 官网 https://github.com/vuejs/vue-cli 实战演习 #最新版本确认 $ npm show vue-cli $ [sudo] npm install -g vue-cli@2.9.3 #安装版本确认 $ vue -V #命令帮助 $ 阅读全文
posted @ 2021-01-18 19:26 felixtester 阅读(68) 评论(0) 推荐(0)
摘要: 组件:组合slot 知识点 slot命名 slot命名 在子组件中通过为多个slot进行命名,来接受父组件的不同内容的数据。 综合例 <div id="myApp"> <nba-all-stars c="奥尼尔" pf="加内特"> <span slot="sf">皮尔斯</span> <span 阅读全文
posted @ 2021-01-18 19:21 felixtester 阅读(62) 评论(0) 推荐(0)
摘要: 组件:slot插槽 知识点 slot slot slot是父组件与子组件的通讯方式,可以将父组件的内容显示在子组件当中。 综合例 <div id="myApp"> <say-to pname="koma"> 你的视频做的太差了。 </say-to> <say-to pname="mike"> 你千万 阅读全文
posted @ 2021-01-18 19:13 felixtester 阅读(55) 评论(0) 推荐(0)
摘要: 组件:事件传递 知识点 v-on $emit v-on 侦听组件事件,当组件触发事件后进行事件处理。 $emit 触发事件,并将数据提交给事件侦听者。 综合例 <div id="myApp"> <h1>人生加法</h1> <add-method :a="6" :b="12" v-on:add_eve 阅读全文
posted @ 2021-01-18 18:48 felixtester 阅读(77) 评论(0) 推荐(0)
摘要: 组件:参数验证 知识点 props:组件参数验证语法 组件的数据 为组件中接受到的变量进行逻辑验证。 综合例 <div id="myApp"> <h1>身世之谜</h1> <show-member-info name="koma" :age="25" :detail="{address:'earth 阅读全文
posted @ 2021-01-18 18:46 felixtester 阅读(72) 评论(0) 推荐(0)
摘要: 组件:传递变量 知识点 为组件传递变量数据 组件的数据 制作可接受变量参数的组件。 综合例 <div id="myApp"> <div>请输入您的名字:<input v-model="myname"></div> <hr/> <say-hello :pname="myname" /> </div> 阅读全文
posted @ 2021-01-18 18:41 felixtester 阅读(61) 评论(0) 推荐(0)
摘要: 组件:传递数据 知识点 为组件传递数据 组件数据传递 制作可接受参数的组件。 综合例 <div id="myApp"> <h1>您的成绩评价</h1> <test-result :score="50"></test-result> <test-result :score="65"></test-re 阅读全文
posted @ 2021-01-18 18:34 felixtester 阅读(69) 评论(0) 推荐(0)
摘要: 组件:数据 知识点 组件的数据函数 组件的数据 为Vue.js组件添加数据,使组件可以动态显示各种数据,注意是数据函数,不是数据属性。 综合例 <div id="myApp"> <div>今天的天气是<today-weather/></div> </div> <script> Vue.compone 阅读全文
posted @ 2021-01-18 18:29 felixtester 阅读(39) 评论(0) 推荐(0)
摘要: 组件:表行组件 知识点 制作表行组件 表行组件 为自己的页面表格编写表行组件。 综合例 <div id="myApp"> <h1>2017年最期待的游戏是:</h1> <table border="1"> <tr> <td>编号</td> <td>游戏名称</td> </tr> <my-row1>< 阅读全文
posted @ 2021-01-18 18:22 felixtester 阅读(71) 评论(0) 推荐(0)
摘要: 组件:局部的组件 知识点 组件的局部注册 组件 Vue.js的组件不仅可以单独声明注册使用,还可以在Vue实例中进行局部注册使用。 综合例 <div id="myApp"> <my-weather></my-weather> </div> <script> var WeatherComponent 阅读全文
posted @ 2021-01-18 18:18 felixtester 阅读(61) 评论(0) 推荐(0)
摘要: 组件:基础的基础 知识点 组件(Component,Portlet) 组件 组件就是页面上的一小块区域内容,完成一个小的页面功能,请参照视频第六课。 综合例 <div id="myApp"> <today-weather></today-weather> </div> <script> Vue.co 阅读全文
posted @ 2021-01-18 18:16 felixtester 阅读(56) 评论(0) 推荐(0)
摘要: 表单修饰符 知识点 .lazy .number .trim .lazy 用户输入内容时不做绑定数据的更新处理,在控件的onchange事件中更新绑定的变量。 用户名:<input v-model.lazy="username"> .number 将用户输入的内容转换为数值类型,如果用户输入非数值的时 阅读全文
posted @ 2021-01-18 18:15 felixtester 阅读(65) 评论(0) 推荐(0)
摘要: 表单下拉框 知识点 v-model select 表单下拉框绑定 <div id="myApp"> <h3>你最喜欢的NBA球星是:</h3> <select v-model="likedNBAStar" style="width:210px;"> <option>科比</option> <opti 阅读全文
posted @ 2021-01-18 18:14 felixtester 阅读(75) 评论(0) 推荐(0)
摘要: 表单单选按钮 知识点 v-model input[type="radio"] 表单单选按钮绑定 <div id="myApp"> <h1>表单单选按钮</h1> <h3>选择性别</h3> <input type="radio" id="male" value="男" v-model="picked 阅读全文
posted @ 2021-01-18 18:12 felixtester 阅读(81) 评论(0) 推荐(0)
摘要: 表单复选框 知识点 v-model input[type="checkbox"] 表单复选框绑定 <div id="myApp"> <h1>表单复选框</h1> <input type="checkbox" id="生化危机7" value="生化危机7" v-model="checkedGames 阅读全文
posted @ 2021-01-18 18:11 felixtester 阅读(85) 评论(0) 推荐(0)
摘要: 表单控件绑定 知识点 v-model input[type="text"] v-model 为表单控件元素创建双向数据绑定。(将JS变量的值“快速”设定到控件上,然后将用户输入的内容“快速”设置回JS变量) <div id="myApp"> <h1>表单控件绑定</h1> <input type=" 阅读全文
posted @ 2021-01-18 18:09 felixtester 阅读(90) 评论(0) 推荐(0)