摘要：
组件的结构 知识点 vue命令行开发模式为我们带来的组件开发方式。 组件文件夹 所有的组件都被统一放在工程中的组件文件夹中。 {myproject}/src/components/* 组件格式 template:组件html内容 script:组件js脚本(ES6) style:组件css样式单 实 阅读全文
posted @ 2021-01-18 19:38
felixtester
阅读(57)
评论(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
阅读(74)
评论(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
阅读(98)
评论(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
阅读(64)
评论(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
阅读(70)
评论(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
阅读(64)
评论(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
阅读(58)
评论(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
阅读(78)
评论(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
阅读(78)
评论(0)
推荐(0)
摘要：
组件：传递变量 知识点 为组件传递变量数据 组件的数据 制作可接受变量参数的组件。 综合例 <div id="myApp"> <div>请输入您的名字：<input v-model="myname"></div> <hr/> <say-hello :pname="myname" /> </div> 阅读全文
posted @ 2021-01-18 18:41
felixtester
阅读(68)
评论(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
阅读(71)
评论(0)
推荐(0)
摘要：
组件：数据 知识点 组件的数据函数 组件的数据 为Vue.js组件添加数据，使组件可以动态显示各种数据，注意是数据函数，不是数据属性。 综合例 <div id="myApp"> <div>今天的天气是<today-weather/></div> </div> <script> Vue.compone 阅读全文
posted @ 2021-01-18 18:29
felixtester
阅读(45)
评论(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
阅读(75)
评论(0)
推荐(0)
摘要：
组件：局部的组件 知识点 组件的局部注册 组件 Vue.js的组件不仅可以单独声明注册使用，还可以在Vue实例中进行局部注册使用。 综合例 <div id="myApp"> <my-weather></my-weather> </div> <script> var WeatherComponent 阅读全文
posted @ 2021-01-18 18:18
felixtester
阅读(68)
评论(0)
推荐(0)
摘要：
组件：基础的基础 知识点 组件（Component,Portlet） 组件 组件就是页面上的一小块区域内容，完成一个小的页面功能，请参照视频第六课。 综合例 <div id="myApp"> <today-weather></today-weather> </div> <script> Vue.co 阅读全文
posted @ 2021-01-18 18:16
felixtester
阅读(58)
评论(0)
推荐(0)
摘要：
表单修饰符 知识点 .lazy .number .trim .lazy 用户输入内容时不做绑定数据的更新处理，在控件的onchange事件中更新绑定的变量。 用户名：<input v-model.lazy="username"> .number 将用户输入的内容转换为数值类型，如果用户输入非数值的时 阅读全文
posted @ 2021-01-18 18:15
felixtester
阅读(72)
评论(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
阅读(86)
评论(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
阅读(83)
评论(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
阅读(97)
评论(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
阅读(94)
评论(0)
推荐(0)
摘要：
事件处理器 知识点 v-on:(event)/@(event) v-on:(event) 页面元素的事件绑定。（click,keyup,load等等） <div id="myApp"> <h1>事件处理器</h1> <input id="txtName" v-on:keyup="txtKeyup($ 阅读全文
posted @ 2021-01-18 18:06
felixtester
阅读(67)
评论(0)
推荐(0)
摘要：
JS对象迭代 知识点 v-for v-for 循环JS对象，把对象内容循环显示到页面上。 <div id="myApp"> <h1>JS对象迭代</h1> <div v-for="(value, key) in mygame"> {{ key }} : {{ value }} </div> </di 阅读全文
posted @ 2021-01-18 18:05
felixtester
阅读(53)
评论(0)
推荐(0)
摘要：
列表渲染 知识点 v-for v-for 循环数组元素，整理内容显示到页面上。 <div id="myApp"> <ul> <li v-for="(game, index) in games">({{index}}) {{game.title}} / 售价：{{game.price}}元</li> 阅读全文
posted @ 2021-01-18 18:03
felixtester
阅读(62)
评论(0)
推荐(0)
摘要：
元素显示 知识点 v-show v-show 标记是否显示html元素。(注意：v-show设置的标记在html DOM中不会消失) <div id="myApp"> <h1 v-show="result">任天堂新一代主机Switch</h1> <button @click="btnClick"> 阅读全文
posted @ 2021-01-18 17:55
felixtester
阅读(41)
评论(0)
推荐(0)
摘要：
条件渲染 知识点 v-if v-else-if v-else v-if 判断vue.js的变量的值，然后执行页面渲染逻辑。（if-elseif-else） <div id="myApp"> <h1 v-if="result == 0">成绩未公布</h1> <h1 v-else-if="result 阅读全文
posted @ 2021-01-18 17:54
felixtester
阅读(66)
评论(0)
推荐(0)
摘要：
Class对象绑定 知识点 v-bind:class v-bind:class 为html标记绑定样式单class对象。 <div id="myApp"> <div :class="myClass">红色文本</div> <button @click="btnClick">改变class吧</but 阅读全文
posted @ 2021-01-18 17:53
felixtester
阅读(73)
评论(0)
推荐(0)
摘要：
Class绑定 知识点 v-bind:class v-bind:class 为html标记绑定样式单class属性。 <div id="myApp"> <div v-bind:class="{active:isActive}">红色文本1</div> <div :class="{active:isA 阅读全文
posted @ 2021-01-18 17:52
felixtester
阅读(66)
评论(0)
推荐(0)
摘要：
设定计算属性 知识点 setter setter 设置计算属性，同步更新元数据的值。（又是令人费解的描述） <div id="myApp"> <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceC 阅读全文
posted @ 2021-01-18 17:50
felixtester
阅读(70)
评论(0)
推荐(0)
摘要：
观察属性 知识点 $watch $watch 与computed属性类似，用于观察变量的变化，然后进行相应的处理。（我从Angular而来） <div id="myApp"> <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}} 阅读全文
posted @ 2021-01-18 17:48
felixtester
阅读(62)
评论(0)
推荐(0)
摘要：
计算属性 知识点 computed computed 处理元数据，便于进行二次利用。（比如：消费税自动计算功能） <div id="myApp"> 今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceC 阅读全文
posted @ 2021-01-18 17:45
felixtester
阅读(66)
评论(0)
推荐(0)
摘要：
过滤器 知识点 filters filters 格式化变量内容的输出。（日期格式化，字母大小写，数字再计算等等） <div id="myApp"> <p>{{message}}</p> <p>{{message | toupper }}</p> <hr> <p>现在的vue.js学习进度是{{num 阅读全文
posted @ 2021-01-18 17:43
felixtester
阅读(64)
评论(0)
推荐(0)
摘要：
组件 知识点 component component 定义页面的局部区域块，完成单独的页面小功能。 还是不明白？看个图吧！ <div id="myApp"> <ol> <game-item v-for="item in games" v-bind:game="item"></game-item> < 阅读全文
posted @ 2021-01-18 17:42
felixtester
阅读(59)
评论(0)
推荐(0)
摘要：
按钮事件 知识点 v-on v-on 为页面元素绑定各种事件。（keydown, keyup, click, dbclick, load, etd.） <div id="myApp"> <p>您最喜欢的游戏是：{{mygame}}</p> <button v-on:click="btnClick(' 阅读全文
posted @ 2021-01-18 17:41
felixtester
阅读(80)
评论(0)
推荐(0)
摘要：
处理用户输入 知识点 v-model v-model 为页面输入框进行数据邦定，例如： input select textarea components 使用例 <div id="myApp"> <p>您最喜欢的游戏是：{{mygame}}</p> <input v-model="mygame"> 阅读全文
posted @ 2021-01-18 17:40
felixtester
阅读(49)
评论(0)
推荐(0)
摘要：
条件与循环 知识点 v-if v-for v-if 条件判断式，根据表达式的真伪进行页面处理。 <p v-if="seen">快看我！</p> v-for 处理数组循环，将数据循环显示到页面上。 <ol> <li v-for="game in games"> {{ game.title }} </l 阅读全文
posted @ 2021-01-18 17:36
felixtester
阅读(53)
评论(0)
推荐(0)
摘要：
从index.html开始 知识点 html5文档 vue.js导入 Vue对象 index.html 从第一个index.html开始吧！ vue.js引用 <script src="https://unpkg.com/vue/dist/vue.js"></script> html代码块 <div 阅读全文
posted @ 2021-01-18 17:34
felixtester
阅读(54)
评论(0)
推荐(0)
摘要：
什么是Vue.js？ Vue.js是一套开发Web页面的Javascript脚本框架，听起来难，其实是Web-Javascript脚本框架中最容易上手的框架，没有之一。 官方网站 https://cn.vuejs.org/ 竞争对手 AngularJS1/AngularJS2 ReactJS Emb 阅读全文
posted @ 2021-01-18 17:31
felixtester
阅读(62)
评论(0)
推荐(0)
摘要：
今天同事遇到一个问题，想要实现一个接口自动化的框架，实现功能需要集成pytest、allure，执行完后，输出可视化的报告。但是他一直解决不了问题，所以找到我，让我帮忙看下 ###想要完成这个功能，需要了解pytest的特性 例如： 脚本文件名需要以test开头或者test结尾 测试类，需要已Tes 阅读全文
posted @ 2021-01-18 16:52
felixtester
阅读(532)
评论(0)
推荐(0)
浙公网安备 33010602011771号