前端笔记之Vue（二）组件&案例&props&计算属性
一、Vue组件（.vue文件）
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
说白了，就是HTML、CSS、JS行为的一个封装。
Vue中组件的实例化是对程序员不透明的，组件必须在components中进行“注册”才能使用。
Vue中用K:V对的形式定义类，让你自由的注册名字，Vue官方推荐使用含有短横的名字来表示自定义组件。
翻译.vue文件需要安装vue-loader依赖：
https://vue-loader.vuejs.org/zh-cn/
https://vue-loader-v14.vuejs.org/zh-cn/configurations/pre-processors.html
安装其他4个开发依赖：
npm install --save-dev css-loader
npm install --save-dev vue-loader
npm install --save-dev vue-style-loader
npm install --save-dev vue-template-compiler
修改webpack的配置（关于vue-loader的配置）官网找：
https://vue-loader-v14.vuejs.org/zh-cn/configurations/pre-processors.html
1.1组件的写法1
.vue文件的结构：
<template></template> html结构
<script></script> js程序
<style></style> 样式表
App.vue父组件：
<template>
<h1>我是App父组件{{a}}</h1>
</template>
<script>
export default {
data(){
return {
a:100
}
}
}
</script>
<style></style>
示例代码
有了App.vue组件就可以在main.js中通过import引入，并注册：
import Vue from 'vue';
import App from './App.vue'; new Vue({
el : "#app",
data : { },
components : {
App
}
})
在index.html页面中使用即可：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div id="app">
<App></App>
</div>
</body>
<script type="text/javascript" src="dist/all.js"></script>
</html>
此时看见App父组件的内容了
1.2组件的写法2
使用vue2新增的render()函数
index.html页面中就不用放在<App></App>自定义标签了，也不需要注册了。
main.js
import Vue from 'vue';
import App from './App.vue'; new Vue({
el : "#app",
render : (h)=> h(App)
})
Vue中不允许出现片段标签，必须用一个标签包裹所有
<template>
<div>
<h1>我是app组件{{a}}</h1>
<h1>我是app组件{{a}}</h1>
</div>
</template>
错误写法：
<template>
<h1>我是app组件{{a}}</h1>
<h1>我是app组件{{a}}</h1>
</template>
如果有两个组件就需要有一个components的文件夹 里面可以放.vue组件
mian.vue
<style>
</style>
<template>
<div>
<h1>我是mian组件{{a}}</h1>
</div>
</template>
<script>
export default{
data(){
return{
a : 100
}
}
}
</script>
组件在App.vue里面使用
<style>
</style>
<template>
<div>
<vue-main></vue-main>
<VueMain></VueMain>
</div>
</template>
<script>
import VueMain from "./components/main.vue"
export default {
data(){
return {
a: 100
}
},
components:{
VueMain
}
}
</script>
使用的时候以下两种方法：
<VueMain></VueMain>
等价于：
<vue-main></vue-main>
1.3关于data
在前面看到，在new Vue()的时候，创建或注册模板时，传入一个data属性作为用来绑定的数据。是可以给data直接赋值为一个对象的。但是在组件中，data必须是一个函数，而不能直接把一个对象赋值给它。
第1种，在main.js主入口中的写法：
new Vue({
el:'#app',
data:{
}
})
第2种，在组件中data选项必须是一个函数：
new Vue({
el:'#app',
data(){
return { //返回一个唯一的对象，不要和其他组件共用一个对象进行返回
}
}
})
【区别】：
1）在简单的Vue实例中，没什么区别，因为你new出的对象不会被复用。
new Vue({...})
2）但在组件中，因为可能在多处调用同一组件，所以为了不让多处的组件共享同一data对象，只能返回函数。
二、案例
2.1调色板
<template>
<div>
<div class="box" :style="{background:`rgb(${r},${g},${b})`}"></div>
<p>
<input type="range" min="0" max="255" v-model="r">
<input type="number" min="0" max="255" v-model="r">
</p>
<p>
<input type="range" min="0" max="255" v-model="g">
<input type="number" min="0" max="255" v-model="g">
</p>
<p>
<input type="range" min="0" max="255" v-model="b">
<input type="number" min="0" max="255" v-model="b">
</p>
</div> </template>
<script>
export default {
data(){
return {
r : 100,
g : 100,
b : 100
}
}
}
</script>
<style>
.box{
width: 200px;
height: 200px;
}
</style>
示例代码
2.2购物车
<template>
<div>
<table>
<tr>
<th>号码</th>
<th>东西</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
</tr>
<tr v-for="item in carts">
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>{{item.price}}</td>
<td>
<button @click="minus(item.id)">-</button>
<input type="number" min="0" v-model="item.number">
<button @click="add(item.id)">+</button>
</td>
<td>{{item.number * item.price}}</td>
</tr>
</table>
<h1>总价格：{{this.carts.reduce((a,b)=>a + b.price * b.number , 0)}}</h1>
</div>
</template>
<script>
export default {
data(){
return {
carts : [
{"id" : 1 , "title" : "空调" , "price" : 5000, "number" : 1},
{"id" : 2 , "title" : "手机" , "price" : 3000, "number" : 1},
{"id" : 3 , "title" : "鼠标" , "price" : 200 , "number" : 1}
]
}
},
methods : {
add(id){
//this.carts.filter(item=>item.id == id)[0].number++
//vue不能识别数组某个项单独修改！！要改必须直接改变数组！！
this.carts = this.carts.map(item=>item.id == id ? {...item , "number" : item.number +}: item);
},
minus(id){
//this.carts.filter(item=>item.id == id)[0].number--
this.carts = this.carts.map(item=>item.id == id ? {...item , "number" : item.number -}: item);
}
}
}
</script>
<style>
table,tr,td,th{border:1px solid red;}
td{width:200px;height:60px;}
</style>
示例代码
2.3选项卡
<style>
.box {
width: 600px;height: 400px;
margin: 10px auto;
border: 1px solid #333;
header {
ul {
overflow: hidden;
li {
float: left;
width: 33.333%;
height: 40px;
line-height: 40px;
text-align: center;
}
li.cur {
background: red; color: #fff;
}
}
}
}
</style>
<template>
<div class="box">
<header>
<ul>
<li v-for="(item,index) in tabNav" :class="{cur:item.click}" @click="changeTab(dex)">{{item.title}}</li>
</ul>
</header>
<div class="content">
<div v-show="tabIndex == 0">
新闻新闻新闻新闻新闻
</div>
<div v-show="tabIndex == 1">
军事军事军事军事军事
</div>
<div v-show="tabIndex == 2">
图片图片图片图片图片
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tabNav: [
{title: "新闻", click: true},
{title: "军事", click: false},
{title: "图片", click: false}
],
tabIndex: 0
}
},
methods:{
changeTab(index){
// 遍历tabNav数组 进行循环 去掉所有类
this.tabNav.forEach(function(item){
item.click = false
});
// 点击的那个tab 加类
this.tabNav[index].click = true
// 改变索引
this.tabIndex = index
}
}
}
</script>
示例代码
2.4三级联动
<template>
<div>
<select v-model="sheng">
<option v-for="item in info" :value="item.name">
{{item.name}}
</option>
</select> <select v-model="shi">
<option
v-for="item in info.filter(i=>i.name == sheng)[0].city"
:value="item.name"
>
{{item.name}}
</option>
</select> <select v-model="xian">
<option
v-for="item in info.filter(i=>i.name==sheng)[0].city.filter(i=>i.name==shi)[0].area"
:value="item"
>
{{item}}
</option>
</select>
<h1>你的地址{{sheng}}{{shi}}{{xian}}</h1>
</div>
</template>
<script>
import info from "./info.js"; //引入全国省市数据
export default {
data(){
return {
info ,
sheng:"广东省",
shi : "广州市",
xian: "花都区"
}
},
watch : {
sheng(){
//当data中的sheng变化的时候，触发
this.shi = info.filter(i=>i.name == this.sheng)[0].city[0].name;
this.xian=info.filter(i=>i.name==this.sheng)[0].city.filter(i=>i.name==this.shi)[0].area[0]
}
}
}
</script>
示例代码
简化：
<template>
<div>
<!-- <select v-model="sheng" @change="changeSheng($event)"> -->
<select v-model="sheng">
<option v-for="item in info" :value="item.name">
{{item.name}}
</option>
</select> <select v-model="shi">
<option v-for="item in allShi()" :value="item.name">
{{item.name}}
</option>
</select> <select v-model="xian">
<option v-for="item in allXian()" :value="item">
{{item}}
</option>
</select>
</div>
</template>
<script>
import info from "../lib/info.js";
export default {
data(){
return {
info,
sheng:"广东省",
shi:"广州市",
xian:"天河区"
}
},
methods:{
// changeSheng(e){
// this.shi = info.filter(i=>i.name == this.sheng)[0].city[0].name;
// this.xian = info.filter(i=>i.name == this.sheng)[0].city.filter(i=>i.name == this.shi)[0].area[0];
// }
allShi(){
return info.filter(i=>i.name == this.sheng)[0].city;
},
allXian(){
return info.filter(i=>i.name == this.sheng)[0].city.filter(i=>i.name == this.shi)[0].area
}
},
watch:{
//当data中的sheng变化的时候，触发这个函数
sheng(){
this.shi = info.filter(i=>i.name == this.sheng)[0].city[0].name;
this.xian = info.filter(i=>i.name == this.sheng)[0].city.filter(i=>i.name == this.shi)[0].area[0];
}
}
}
</script>
示例代码
三、props（★）
l 使用 Prop 传递数据
组件实例的作用域是孤立的。这意味着不能 (也不应该) 在子组件的模板内直接引用父组件的数据。父组件的数据需要通过 prop 才能下发到子组件中。
l 动态 Prop：
与绑定到任何普通的 HTML属性相类似，可以用v-bind来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件
1) 组件的使用：子组件不能直接改变父组件传入的值，必须调用父组件的函数来改变（引用类型值能直接改）
2) 组件的思维：所有子组件不需要对其它兄弟组件负责，只对父组件负责即可。
3.1传基本类型值
l 如果想让父组件data中的数据传递给子组件，需要使用标签属性传递（如果是动态值用v-bind）
l 子组件需要使用props接收父组件的值，如果父组件中修改a值，同时会影响子组件。
App.vue父组件
<template>
<div>
<Haha a="8"></Haha>
<Haha :b="a"></Haha>
</div>
</template>
<script>
import Haha from "./components/Haha.vue";
export default {
data(){
return {
a : 100
}
},
components : {
Haha
}
}
</script>
Haha.vue子组件
<template>
<div>
<h1>我是子组件{{a}} {{b}}</h1>
</div>
</template>
<script>
export default {
props : ["a","b"], //接收父组件传过来的属性的值
data(){
return {
a : 100 //从父组件接收有a，这里就不能有同名的a了
}
}
}
</script>
3.2子组件要改props必须调用父亲传的函数
l 子组件不能直接改变父组件传入的值，必须调用父组件的函数来改变
l 传值就要传它的改变函数给子组件，本质上还是调用父亲的函数去改变。
App.vue父组件传值：
<template>
<div>
<h1>父组件{{a}}</h1>
<button @click="add">父组件按钮+</button>
<button @click="minus">父组件按钮-</button> <Haha :a="a" :add="add" :minus="minus"></Haha>
</div>
</template>
<script>
import Haha from "./components/Haha.vue";
export default {
data(){
return {
a : 100
}
},
components : {
Haha
},
methods : {
add(){
this.a++;
},
minus(){
this.a--;
}
}
}
</script>
Haha.vue子组件接收
<template>
<div>
<h1>我是子组件{{a}}</h1>
<button @click="add">子组件按钮+</button>
<button @click="minus">子组件按钮-</button>
</div>
</template>
<script>
export default {
//子组件不能直接改父组件的数据，要改就必须传父组件的函数来改变
props : ["a","add","minus"], //接收父组件传过来的属性的值
data(){
return { }
}
}
</script>
3.3传引用类型值可以直接改
如果传入引用类型值，子组件是可以直接改父组件的值，而不报错的。
App.vue父组件
<template>
<div>
<h1>父组件{{obj.a}}</h1>
<Haha :obj="obj"></Haha>
<button @click="add">父组件按钮+</button>
</div>
</template>
<script>
import Haha from "./components/Haha.vue";
export default {
data(){
return {
obj : {
a : 100
}
}
},
components : {
Haha
},
methods : {
add(){
this.obj.a++;
}
}
}
</script>
Haha.vue子组件
<template>
<div>
<h1>我是子组件{{obj.a}}</h1>
<button @click="add">子组件按钮+</button>
</div>
</template>
<script>
export default {
// 子组件不能直接改父组件的数据，要改就必须传父组件的函数来改变
props : ["obj"], //接收父组件传过来的属性的值
methods:{
add(){
this.obj.a++
}
}
}
</script>
l 单向数据流
Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。
3.4字面量语法 vs 动态语法
使用v-bind是动态语法，不使用就是字符串
app.vue父组件：
<div>
<Haha a="a"></Haha>
</div>
<script>
import Haha from "./components/Haha.vue"
export default {
data() {
return {
a: 100
}
}
components:{
Haha
}
}
</script>
Haha.vue子组件：
<template>
<div>
<h1>{{typeof a}}</h1>
</div>
</template>
<script>
export default{
props:["a"]
}
</script>
这样传递得到的是字符串的 "a"
初学者常犯的一个错误是使用字面量语法传递数值：
因为它是一个字面量 prop，它的值是字符串 "a" 而不是一个数值。如果想传递一个真正的 JavaScript 数值，则需要使用 v-bind，从而让它的值被当作 JavaScript 表达式计算。
3.5组件化思维-调色板案例
用组件重新做昨天的调色板和购物车案例。
l v-model可以绑定一个引用类型值。
如果props是一个引用类型值，而不是基本类型值，此时v-model可以直接绑定修改，由vue内部实现对父组件的更改。
App.vue父组件
<template>
<div>
<div class="box" :style="{background:`rgb(${color.r},${color.g},${color.b})`}"></div>
<!-- <Bar :v="r" name="r"></Bar>
<Bar :v="g" name="g"></Bar>
<Bar :v="b" name="b"></Bar> -->
<Bar :color="color" name="r"></Bar>
<Bar :color="color" name="g"></Bar>
<Bar :color="color" name="b"></Bar>
</div>
</template>
<script>
import Bar from "./components/Bar.vue";
export default{
data(){
return {
// 这里为什么要封装一个对象
// 因为vue有一个机制，如果子组件的v-model与父组件传入的引用类型值绑定
// 会自动帮你改父组件的值，而不会报错。
color : {
r : 100,
g : 100,
b : 100
}
}
}
components : {
Bar
}
}
</script>
<style>
.box{
width: 200px;
height: 200px;
}
</style>
示例代码
Bar.vue子组件
<template>
<div>
<input type="range" max="255" v-model="color[name]">
<input type="number" max="255" v-model="color[name]">
</div>
</template>
<script>
export default{
props:["color","name"],
data(){
return { }
}
}
</script>
示例代码
3.6组件化思维-购物车案例
is属性解释：https://segmentfault.com/q/1010000007205176
说白了，就是让它显示哪个组件。
Bar.vue子组件：
<template>
<tr>
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>{{item.price}}</td>
<td>
<button @click="minus">-</button>
<input type="number" min="0" v-model.number="item.number">
<button @click="add">+</button>
</td>
<td>
{{item.number * item.price}}
</td>
</tr>
</template>
<script>
export default {
props : ["item"],
data(){
return { }
},
methods : {
add(){
// 可以直接改，因为父亲传入引用类型值
this.item.number++
},
minus(){
if(this.item.number <= 0 ) return;
this.item.number--
}
}
}
</script>
示例代码
App.vue父组件
<template>
<div>
<table>
<tr>
<th>编号</th>
<th>商品</th>
<th>价格</th>
<th>数量</th>
<th>小计</th>
</tr>
<!-- <Bar v-for="item in carts" :item="item"></Bar> -->
<tr is="Bar" v-for="item in carts" :item="item"></tr>
</table>
<h1>总价格：{{this.carts.reduce((a,b)=>a + b.price * b.number , 0)}}</h1>
</div>
</template>
<script>
import Bar from "./components/Bar.vue";
export default {
data(){
return {
carts : [
{"id":1,"title":"空调", "price":5000, "number":1},
{"id":2,"title":"手机", "price":4999, "number":1},
{"id":3,"title":"电脑", "price":6000, "number":1},
{"id":4,"title":"冰箱", "price":8000, "number":1}
]
}
},
components : {
Bar
}
}
</script>
示例代码
3.7组件化思维-所有子组件不需要对其它兄弟组件负责
组件的思维：所有子组件不需要对其它兄弟组件负责，只对父组件负责即可。
教室：黑板、桌椅、侧面宣传栏、后黑板
只对父组件负责，不对其他组件负责！！！
App.vue父组件：
<template>
<div>
<Heiban class="heiban" :banzhang="banzhang"></Heiban>
<Zhuoyi :students="students" :changeBanzhang="changeBanzhang"></Zhuoyi>
<Xuanchuanlan class="xuanchuanlan" :banzhang="banzhang"></Xuanchuanlan>
<Houheiban class="houheiban" :banzhang="banzhang"></Houheiban>
</div>
</template>
<script>
import Zhuoyi from "./components/Zhuoyi.vue";
import Houheiban from "./components/Houheiban.vue";
import Xuanchuanlan from "./components/Xuanchuanlan.vue";
import Heiban from "./components/Heiban.vue";
export default {
data(){
return {
students : ["小明","小红","小强","小黑","小刚"],
banzhang : "小明"
}
},
components : { //注册组件
Heiban,Zhuoyi,Xuanchuanlan,Houheiban
},
methods : {
changeBanzhang(banzhang){
this.banzhang = banzhang; //改变班长
}
}
}
</script>
<style>
.heiban, .houheiban{ width:650px; height:100px; border:1px solid #000; }
.zhuoyi{ float:left; width:400px;height:300px; border:1px solid #000; }
.xuanchuanlan{float:left; width:250px;height:300px; border:1px solid #000; }
</style>
Heiban.vue，Houheiban.vue，Xuanchuanlan.vue子组件，都一样：
<template>
<div>
我是黑板。我班班长：{{banzhang}}
</div>
</template>
<script>
export default {
props : ["banzhang"]
}
</script>
Zhuoyi.vue子组件：
<template>
<div>
<ul>
<li v-for="item in students">
{{item}}
<button @click="changeBanzhang(item)">成为班长</button>
</li>
</ul>
</div>
</template>
<script>
export default {
props : ["students" , "changeBanzhang"]
}
</script>
<style>
li{float:left;width:100px;height:100px;margin:10px;background:orange;}
</style>
四、计算属性（computed ）★
4.1 computed属性的使用
我们现在export default(){ }中只写了：data(){}、methods、components、props、watch
现在学习computed，表示计算后的值，做实验看看什么意思。
注意：{{}}中如果放computed的值，是没有圆括号的，虽然它是函数。
计算属性的结果会被缓存，除非依赖的属性（data、props中的值）变化才会重新计算。
当data/props中对应数据发生改变时，计算属性的值也会发生改变。
如果想触发computed的函数，必须在页面中使用，哪怕是display:none了
computed就是返回一些和data、props相关的值，data或props的值变化时能够自动触发。
computed就是计算最多的一个地方，这里算法很重。
4.2关于methods和computed的区别
https://www.cnblogs.com/coderL/p/7506957.html
l computed就是要监听哪些数据变化时要用到的。当监听的数据发生变化时，立刻会执行计算，并返回结果。
l methods只是定义函数的。如要执行，还得自己手动执行，来动态当作方法来用的。
l 相同：两者达到的效果是同样的。
l 不同：
1.最明显的不同，就是调用的时候，methods要加上()
2.可以使用methods替代computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。只要相关依赖未改变，只会返回之前的结果，不再执行函数。
而使用 methods，在重新渲染时，函数总会重新调用执行。
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：所以其实computed也是可以传参的。
<template>
<div>
<h1>{{a}}</h1>
<h2>{{pingfang}}</h2>
<button @click="add">+</button>
</div>
</template>
<script>
export default {
data(){
return {
a:100
}
},
computed:{
pingfang(){
return this.a * this.a
}
},
methods:{
add(){
this.a++
}
}
}
</script>
<style></style>
前端笔记之Vue（二）组件&案例&props&计算属性的更多相关文章
- 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法
Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...
- 前端笔记之Vue（四）UI组件库&Vuex&虚拟服务器初识
一.日历组件 new Date()的月份是从0开始的. 下面表达式是:2018年6月1日 new Date(2018, 5, 1); 下面表达式是:2018年5月1日 new Date(2018, 4 ...
- 前端笔记之Vue（三）生命周期&CSS预处理&全局组件&自定义指令
一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...
- 前端笔记之Vue（六）分页排序|酷表单实战&Vue-cli
一.分页排序案例 后端负责提供接口(3000) 前端负责业务逻辑(8080) 接口地址:从8080跨域到3000拿数据 http://127.0.0.1:3000/shouji http://127. ...
- 前端笔记之Vue（五）TodoList实战&拆分store&跨域&练习代理跨域
一.TodoList 1.1安装依赖 安装相关依赖: npm install --save-dev webpack npm install --save-dev babel-loader babel- ...
- 前端笔记之Vue（一）初识SPA和Vue&webpack配置和vue安装&指令
一.单页面应用(SPA) 1.1 C/S到B/S页面架构的转变 C/S:客户端/服务器(Client/Server)架构的软件. C/S 软件的特点: ① 从window桌面双击打开 ② 更新的时候会 ...
- Vue评论组件案例
最近学习了Vue前端框架,在这里记录一下组件的用法,我自己试着写了一个评论的组件,大神看到勿喷,欢迎提出宝贵意见. 首先看一下效果图 用到的文件有: <link rel="styles ...
- 在vue中子组件修改props引发的对js深拷贝和浅拷贝的思考
不管是react还是vue,父级组件与子组件的通信都是通过props来实现的,在vue中父组件的props遵循的是单向数据流,用官方的话说就是,父级的props的更新会向下流动到子组件中,反之则不行. ...
- 前端框架之Vue(9)-组件基础&vue-cli
组件基础 基本示例 这里有一个 Vue 组件的示例: <!DOCTYPE html> <html lang="en"> <head> <m ...
随机推荐
- HTML Meta信息的优先级
一般来讲meta的信息都是不同维度的不会有冲突,不过下面两个有一定冲突: <meta name="renderer" content="webkit"&g ...
- Play Framework, Server Sent Events and Internet Explorer
http://www.tuicool.com/articles/7jmE7r Next week I will be presenting at Scala Days . In my talk I w ...
- Java基础知识总结【转+整合】
写代码: 1.明确需求.自己要做什么? 2.分析思路.怎么做? 3.确定步骤.每个思路部分用到哪些语句,方法和对象. 4.代码实现.用具体的java语言代码把思路体现出来. 学习新技术的四点: 1,该 ...
- Html5列表元素
<ol> 有序列表: 属性:type(设置样式),reversed(倒序) <ul>无序列表 <li>表示列表中的项(在<ol>和<ul>中 ...
- 解决150%DPI下Photoshop不能显示成合适大小的问题
Adobe官方这里一直不给力,只能靠自己动手了. 和解决CHM高分屏显示的步骤差不多: Ctril+R,输入regedit编辑注册表. 进入到 HKEY_LOCAL_MACHINE > SOFT ...
- 3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）
前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...
- 战争热诚的python全栈开发之路
从学习python开始,一直是自己摸索,但是时间不等人啊,所以自己为了节省时间,决定报个班系统学习,下面整理的文章都是自己学习后,认为重要的需要弄懂的知识点,做出链接,一方面是为了自己找的话方便,一方 ...
- Mac命令行
参考:http://www.cnblogs.com/-ios/p/4949923.html 必读 涵盖范围: 这篇文章对刚接触命令行的新手以及具有命令行使用经验的人都有用处.本文致力于做到覆盖面广(尽 ...
- String和StringBuffer的区别？
这个我经常用的是String,说真的,用StringBuffer的次数还真是少,唯一让我觉得特别的方法就是appand这个方法是StringBuffer独有的,那么他们到底有什么区别呢,我们知道Str ...
- 解决fatal error LNK1168的终极方法
很多人的VC++或Visual studio 会出现fatal error LNK1168错误很是头疼,MS也说不清, 什么改权限.用户名.注册表.CMD,卸载杀毒软件...一切都瞎扯,除非reins ...