随笔分类 - vue搬运工
好的学习地址小马视频
https://gitee.com/komavideo/LearnVueJS
http://komavideo.com
本人是小马的搬运工，仅用于记录使用
摘要：组件：参数验证 知识点 props:组件参数验证语法 组件的数据 为组件中接受到的变量进行逻辑验证。 综合例 <div id="myApp"> <h1>身世之谜</h1> <show-member-info name="koma" :age="25" :detail="{address:'earth
阅读全文
摘要：组件：传递变量 知识点 为组件传递变量数据 组件的数据 制作可接受变量参数的组件。 综合例 <div id="myApp"> <div>请输入您的名字：<input v-model="myname"></div> <hr/> <say-hello :pname="myname" /> </div>
阅读全文
摘要：组件：传递数据 知识点 为组件传递数据 组件数据传递 制作可接受参数的组件。 综合例 <div id="myApp"> <h1>您的成绩评价</h1> <test-result :score="50"></test-result> <test-result :score="65"></test-re
阅读全文
摘要：组件：数据 知识点 组件的数据函数 组件的数据 为Vue.js组件添加数据，使组件可以动态显示各种数据，注意是数据函数，不是数据属性。 综合例 <div id="myApp"> <div>今天的天气是<today-weather/></div> </div> <script> Vue.compone
阅读全文
摘要：组件：表行组件 知识点 制作表行组件 表行组件 为自己的页面表格编写表行组件。 综合例 <div id="myApp"> <h1>2017年最期待的游戏是：</h1> <table border="1"> <tr> <td>编号</td> <td>游戏名称</td> </tr> <my-row1><
阅读全文
摘要：组件：局部的组件 知识点 组件的局部注册 组件 Vue.js的组件不仅可以单独声明注册使用，还可以在Vue实例中进行局部注册使用。 综合例 <div id="myApp"> <my-weather></my-weather> </div> <script> var WeatherComponent
阅读全文
摘要：组件：基础的基础 知识点 组件（Component,Portlet） 组件 组件就是页面上的一小块区域内容，完成一个小的页面功能，请参照视频第六课。 综合例 <div id="myApp"> <today-weather></today-weather> </div> <script> Vue.co
阅读全文
摘要：表单修饰符 知识点 .lazy .number .trim .lazy 用户输入内容时不做绑定数据的更新处理，在控件的onchange事件中更新绑定的变量。 用户名：<input v-model.lazy="username"> .number 将用户输入的内容转换为数值类型，如果用户输入非数值的时
阅读全文
摘要：表单下拉框 知识点 v-model select 表单下拉框绑定 <div id="myApp"> <h3>你最喜欢的NBA球星是：</h3> <select v-model="likedNBAStar" style="width:210px;"> <option>科比</option> <opti
阅读全文
摘要：表单单选按钮 知识点 v-model input[type="radio"] 表单单选按钮绑定 <div id="myApp"> <h1>表单单选按钮</h1> <h3>选择性别</h3> <input type="radio" id="male" value="男" v-model="picked
阅读全文
摘要：表单复选框 知识点 v-model input[type="checkbox"] 表单复选框绑定 <div id="myApp"> <h1>表单复选框</h1> <input type="checkbox" id="生化危机7" value="生化危机7" v-model="checkedGames
阅读全文
摘要：表单控件绑定 知识点 v-model input[type="text"] v-model 为表单控件元素创建双向数据绑定。（将JS变量的值“快速”设定到控件上，然后将用户输入的内容“快速”设置回JS变量） <div id="myApp"> <h1>表单控件绑定</h1> <input type="
阅读全文
摘要：事件处理器 知识点 v-on:(event)/@(event) v-on:(event) 页面元素的事件绑定。（click,keyup,load等等） <div id="myApp"> <h1>事件处理器</h1> <input id="txtName" v-on:keyup="txtKeyup($
阅读全文
摘要：JS对象迭代 知识点 v-for v-for 循环JS对象，把对象内容循环显示到页面上。 <div id="myApp"> <h1>JS对象迭代</h1> <div v-for="(value, key) in mygame"> {{ key }} : {{ value }} </div> </di
阅读全文
摘要：列表渲染 知识点 v-for v-for 循环数组元素，整理内容显示到页面上。 <div id="myApp"> <ul> <li v-for="(game, index) in games">({{index}}) {{game.title}} / 售价：{{game.price}}元</li>
阅读全文
摘要：元素显示 知识点 v-show v-show 标记是否显示html元素。(注意：v-show设置的标记在html DOM中不会消失) <div id="myApp"> <h1 v-show="result">任天堂新一代主机Switch</h1> <button @click="btnClick">
阅读全文
摘要：条件渲染 知识点 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
阅读全文
摘要：Class对象绑定 知识点 v-bind:class v-bind:class 为html标记绑定样式单class对象。 <div id="myApp"> <div :class="myClass">红色文本</div> <button @click="btnClick">改变class吧</but
阅读全文
摘要：Class绑定 知识点 v-bind:class v-bind:class 为html标记绑定样式单class属性。 <div id="myApp"> <div v-bind:class="{active:isActive}">红色文本1</div> <div :class="{active:isA
阅读全文
摘要：设定计算属性 知识点 setter setter 设置计算属性，同步更新元数据的值。（又是令人费解的描述） <div id="myApp"> <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceC
阅读全文
浙公网安备 33010602011771号