补充:环境安装和代码下载:
http://nodejs.org下载node
下载好安装包后,打开终端:
搜索:terminal.app 或者终端
terminal中:clear:清屏
node -v 查看版本号 --version
安装包:傻瓜式安装
node -v 版本更新了
终端:history:查看以往的命令
mac中右键可以整理项目,让各个文件夹对齐
代码地址:https://github.com/hemiahwu/vue-basic
master分支只有readme文件,其他课程代码都在分支上。查看分支:每个分支对应一个课程。
lesson-1:
vue:渐进式js框架
渐进式:易用,灵活,高效(没有很多限制,可以配合其他的插件与框架使用)
看官方文档
- 安装
兼容性:Vue 不支持 IE8 及以下版本
版本:目前(2018年09月23日13:47:56)最新稳定版本:2.5.17
推荐:我们推荐在你的浏览器上安装 Vue Devtools。
安装方法:
1.下载源码用script引入
2.cdn<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
3.npmnpm install vue
4.cli - 介绍
切换应用的时候,可以用搜索app的方式切换:eg:
搜索webstorm可以快速切换到该应用
lesson-2: 实例化vue对象
new Vue({
el:"#vue-app", // element 需要获取的元素,一定是html中的根容器元素
data:{
name: "misitewu",
}, // data:用于数据的存储(各种数据类型)
});
页面中{{ name }} 并没有花括号,是因为虚拟dom的问题
lesson-3: 数据和方法
el: "#vue-app", // element 需要获取的元素,一定是html中的根容器元素
data: {
name: "misitewu",
job:"web开发",
}, // data:用于数据的存储(各种数据类型)
methods:{
greet:function (value) {
return '早上好'+value;
}
},// methods(写死的):存储方法:可以在html中使用
});
在methods中取到data中的属性:
直接用this.name就ok
lesson-4:数据绑定
数据中:
website:‘www.baidu.com’;
html中:
我的网站
并没有成功
去掉花括号也不对
我的网站
正确:
<a v-bind:href="website">我的网站</a>
<input type="text" v-bind:value="name">
data: {
name: "misitewu",
job:"web开发",
website:"http:www.baidu.com",
tag:'<a href="www.baidu.com">我是标签</a>',
}, // data:用于数据的存储(各种数据类型)
把tag标签显示在页面上:
lesson-6:事件
<button v-on:click="addAge"> 长一岁</button>
addAge是事件,加不加括号都行的
插值时候的时候,一定要带 括号,要不然不能区分是属性还是方法;
v-on的时候,知道是事件,加不加都行;传参需要括号;
<button @click="addAge()"> 长一岁</button>
等同于:
<button v-on:click="addAge()"> 长一岁</button>
mousemove事件:
lesson-6:修饰符
.stop:组织冒泡
.once:只执行一次
.prevent:阻止默认事件
lesson-7:键盘事件和键值修饰符
<input @keyup="logName" type="text">
<input @keyup.enter="logName" type="text">
<input @keyup.alt.enter="logAge" type="text">
可以使用链式,但是是并且的关系!
lesson-8:双向数据绑定
双向绑定:input,select,textarea
双向数据绑定一种方法:ref
html:
<input ref="name" @keyup="logName" type="text">
// ts:
logName:function () {
console.log("正在输入你的名字");
this.name=this.$refs.name.value;
},
使用双向绑定:
<input v-model="name" type="text">
lesson-9:计算属性
<h1>computed 计算属性</h1>
<button @click="a++">A+</button>
<button @click="b++">B+</button>
<P>A:{{a}}</P>
<P>B:{{b}}</P>
<p>{{addToA()}}</p>
<p>{{addToB()}}</p>
<button @click="abc">abc按钮</button>
<!--<p>{{abc()}}</p>-->
ts:
data: {
a:0,
b:0,
age:20,
}, // data:用于数据的存储(各种数据类型)
methods:{
addToA:function () {
console.log("aaa");
return this.a+this.age;
} ,
addToB:function () {
console.log("bbb");
return this.b+this.age;
},
abc:function () {
console.log("abc");
}
},// methods(写死的)=>方法:可以在html中使用
computed:{ // 计算属性,不是函数了,不能带括号
/* addToA:function () {
console.log("aaa");
return this.a+this.age;
} ,
addToB:function () {
console.log("bbb");
return this.b+this.age;
}*/
}, // 搜索时候(耗时),使用计算属性;vue使用虚拟dom,就是把真实dom拷贝一份,操作的是虚拟dom,只有两者不同的话,才触发方法
html中属性方法都会执行的;但是函数是不受影响的;
eg:
<p>{{addToA()}}</p> // 会执行的
<button @click="abc">abc按钮</button> // 不会执行的
注:computed是计算属性,不用带括号了
lesson-10:动态绑定css样式
问题:为什么我修改了页面后,并没有生效啊!必须重新打开一个页面?
<h2 v-bind:class="{red:true,blue:true}">实例1</h2>
<button @click="changeColor=!changeColor">改变颜色</button>
<button @click="changeLength=!changeLength">改变长度</button>
<div v-bind:class="compClasses">
<span>李凯水</span>
</div>
// ts:
data: {
changeColor:false,
changeLength:false,
}, // data:用于数据的存储(各种数据类型)
computed:{ // 计算属性,不是函数了,不能带括号
compClasses:function () {
return {
red:this.changeColor,
changeLength:this.changeLength,
}
}
},
// 跟这个有区别么?
<div v-bind:class="{red:changeColor,changeLength:changeLength}">
<span>李凯水</span>
</div>
lesson-11:v-if:
<div v-if="error">我是error的时候</div>
<div v-else-if="success">我是success的时候</div>
<div v-show="error">我是error的时候</div> // display:none;
lesson-12:v-for:
<li v-for="user in users">{{user.name}},年龄:{{user.age}}</li>
<li v-for="(user,index) in users"></li>
渲染盒子有时候是没有用的,那么我可以使用:template,那么渲染盒子最后是没有的!
在:起步=>列表渲染=>v-for on a < template > 中
// 可以遍历数组,也可以遍历对象
<template v-for="user in users">
<div v-for="(val,key) in user">
<p>{{key}}---{{val}}</p>
</div>
</template>
lesson-13:实战demo:
<div class="img-box" v-bind:class="{bad:!canBang}">
</div>
<div class="progress-box">
<div class="bar" v-bind:style="{width:progress+'%'}">
</div>
</div>
<div class="btn-box">
<button @click="bang" v-if="canBang">使劲敲</button>
<button @click="reset">重新开始</button>
</div>