视频地址:https://ke.qq.com/course/list/vue2.0%E5%B0%8F%E7%99%BD
特别感谢 : 米斯特吴
vue2.x 技术交流群 : 540911224
第一到第五节知识点
1. 使用vue 需要引入vue.js
2. 实例化vue
new Vue({
el : "#vue-app",
data: {
name: "mister 吴",
job: "web 开发",
website: "http://www.imooc.com",
websiteTag: "The new step",
},
methods:{
greet: function(time){
return "Good " + time + " " + this.name + '!';
}
}
})
注:
el : element 需要获取的元素,一定是 html中的根容器元素
data : 用于数据的存储
methods : 用于存储各种方法
data-binding : 给属性绑定的响应的值
第六节知识点:
html部分
My age is {{ age }}
{{x}} , {{y}} -
Stop moving
Stop moving
the new step
javascript 部分
new Vue({
el : "#vue-app",
data: {
age:30,
x:0,
y:0,
},
methods:{
add: function(inc){
this.age += inc;
},
subtract: function(dec){
this.age -= dec;
},
updateXY: function(event){
//console.log(event)
this.x = event.offsetX;
this.y = event.offsetY;
},
stopMoving: function(event){
event.stopPropagation();
},
alert: function(){
alert('hello word');
},
}
});
注:
调用方法, 在双括号内 需要加小括号调用
绑定事件内 可以省略小括号 传参需要加上小括号
v-on:click 单击事件
例:
v-on:click="add"
v-on:dblclick 双击事件
例:
v-on:dblclick="add"
@click.once
让事件只生效一次 once
例:
@click.once="add(1)
v-on:click.once="add(1)
v-on:mousemove.stop 阻止冒泡事件
例:
v-on:mousemove.stop
@mousemove.stop
v-on:click.prevent 阻止默认事件
例:
v-on:click.prevent
@click.prevent
第七节知识点
html 部分
注 :
键盘事件
v-on:keyip="logName"
例:
@keyup.enter="logName"
v-on:keyup.enter="logName"
链式操作
例:
@keyup.alt.enter 键盘按住alt+enter生效
@keyup.enter 键盘按回车生效
javascripte 部分:
new Vue({
el : "#vue-app",
data: {
},
methods:{
logName: function(){
console.log('你正在输入你的名字!')
},
logAge: function(){
console.log('你正在输入你的年龄!')
},
}
});
第八节知识点
html 部分 :
{{ name }}
{{ age }}
label>姓名:
{{ name }}
{{ age }}
注:
ref 标记 配合后台取值
v-model 双向绑定
javascript部分
new Vue({
el : "#vue-app",
data: {
name:"",
age:"",
},
methods:{
logName: function(){
this.name = this.$refs.name.value
//console.log(this.$refs.name.value)
},
logAge: function(){
this.age = this.$refs.age.value
},
}
});
注:
this.$refs.name.value 获取前台页面标记为name的值
第九节知识点
html部分
A - {{a}}
B - {{b}}
Age + A = {{addToA}}
Age + B = {{addToB}}
javascript 部分
new Vue({
el : "#vue-app",
data: {
a:0,
b:0,
age:20,
},
methods:{
/*
addToA:function(){
console.log('Add to A');
return this.a + this.age;
},
addToB:function(){
console.log('Add to B');
return this.b + this.age;
},
*/
},
computed:{
addToA:function(){
console.log('Add to A');
return this.a + this.age;
},
addToB:function(){
console.log('Add to B');
return this.b + this.age;
},
}
});
注:
computed 计算属性
调用methods时会把所有的方法都执行 computed不会 只会执行当前方法
第十节知识点
html部分
实例 1
Henry
实例 2
Henry
注:
动态绑定class
1. 通过button来动态设置 changeColor or changeLength 的值
2. 绑定compClasses 来接受返回的class 当返回值为true时 那么class生效 否则不生效来打到动态class的目的
javascript 部分
new Vue({
el : "#vue-app",
data: {
changeColor:false,
changeLength:false,
},
methods:{
},
computed:{
compClasses: function(){
return {
changeColor:this.changeColor,
changeLength:this.changeLength
}
}
}
});
注:
computed 计算属性
调用methods时会把所有的方法都执行 computed不会 只会执行当前方法
第十一节笔记
html部分
网络连接错误:404
网络连接成功
网络连接错误:404
网络连接成功
注:
v-if 判断标签 当条件成立时显示
例:
网络连接错误:404
判断 error 为真时才会显示内容
当条件为false时 代码会被整个删除掉不会留在页面上
v-else-if 判断标签 当上一个if 不生效时 判断自己是否为真 为真生效
例:
网络连接成功
判断success 是否为真
v-show 显示隐藏
例:
网络连接错误:404
判断 如果为真时会显示 如果为假会加上display:none 隐藏
javascript 部分
new Vue({
el : "#vue-app",
data: {
error: false,
success: false,
},
methods:{
},
computed:{
}
});
注:
computed 计算属性
调用methods时会把所有的方法都执行 computed不会 只会执行当前方法
第十二节笔记
html部分
v-for 循环
{{ characters[0] }}
{{ characters[1] }}
{{ characters[2] }}
-
{{ character }}
-
{{index+1}}.{{ user.name }} - {{ user.age }}
{{index+1}}
.{{ user.name }}
{{ user.age }}
{{key}} - {{val}}
注:
v-for 循环标签 (不仅可以遍历数组 还可以遍历对象)
例:
v-for="character in characters"
v-for="(user,index) in users"
循环标签 user 每次循环的的值保存的地方 index 下标
template 标签
使用它 可以避免渲染多个外层标签
javascript 部分
new Vue({
el : "#vue-app",
data: {
characters:['Mario',"luffy","Yoshi"],
users:[
{name:"Herny",age:30},
{name:"Bucky",age:25},
{name:"Emily",age:18},
],
},
methods:{
},
computed:{
}
});
第十三节笔记
html部分
javascript 部分
new Vue({
el : "#vue-app",
data: {
health:100,
ended:false,
},
methods:{
punch:function () {
this.health -=10
if(this.health <= 0){
this.ended = true;
}
},
restart:function () {
this.health = 100;
this.ended = false;
}
},
computed:{
}
});
第十四节笔记
html部分
{{ title }}
{{ greet }}
{{ title }}
{{ greet }}
javascript 部分
//实例化vue对象
var one = new Vue({
el : "#vue-app-one",
data: {
title:"app one 的内容",
},
methods:{
},
computed:{
greet: function () {
return "Hello App One";
}
}
});
var two = new Vue({
el : "#vue-app-two",
data: {
title:"app two 的内容",
},
methods:{
changeTitle:function () {
one.title = "已经改名了!";
}
},
computed:{
greet: function () {
return "Hello App Two";
}
}
});
two.title = "app two 的title 也发生变化了"
第十五节笔记
html部分
javascript 部分
Vue.component("greeting",{
template:`
{{name}} : 大家好,给大家介绍一下我的女朋友@xxx
`,
data: function () {
return {
name:"xxx"
}
},
methods: {
changeName:function(){
this.name = "xxx"
}
}
});
new Vue({
el : "#vue-app-one",
});
new Vue({
el : "#vue-app-two",
});
注:
component 组件
第十六节笔记
Vue-cli
安装过程
Project name 项目名称
Project description 项目描述
Author 作者信息
二选一
Runtime + Compiler 默认选这个 代表的意思暂时不知道 回头记得查一下
Runtime-only
Install vue-router 猜测为路由 回头记得查一下 暂时选n 后期需要会安装
Use ESLint to lint your code 测试的组件 安装后代码需要非常严谨 暂时不装 选n
Setup unit tests with Karma + Mocha 测试的组件 暂时不装 选n
Setup e2e tests with Nightwatch 暂时选n 不知道是什么 回头记得查一下
文件夹
build 构建时 构建了客户端和服务端 可以改变端口号
config 配置文件
static 静态文件
.gitignore git忽略的文件
index.html 入口文件
package.json 依赖的文件
readme.md 指令提示
src
assets 图片存放地址
components 组件
App.vue 跟组件
main.js
代码:
Style 添加 scoped 会指定样式代码在当前域中生效
注册全局组件 在main.js中声明并引入
组件 名称和里面id名称相同 老师的习惯 感觉不错
npm install vue-route --save-dev 安装路由组件
第十七节笔记
components / HelloWorld.vue
App.vue
{{title}}
第十八节笔记
components / HelloWorld.vue
components / Users.vue
-
{{user}}
app.vue
{{title}}
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import Users from "./components/Users"
Vue.config.productionTip = false
//全局注册组件
//Vue.component("users",Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App }, //注册插件 App 是引入的 在上方
template: '第十九节笔记
components / HelloWord.vue
components / users.vue
Hello Users
-
{{user}}
App.vue
{{title}}
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import Users from "./components/Users"
Vue.config.productionTip = false
//全局注册组件
//Vue.component("users",Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App }, //注册插件 App 是引入的 在上方
template: '第二十节笔记
components / footer.vue
components / Header.vue
{{title}}
components / HelloWorld.vue
components / Users.vue
Hello Users
-
{{user.name}}
{{user.position}}
App.vue
{{title}}
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import Users from "./components/Users"
Vue.config.productionTip = false
//全局注册组件
//Vue.component("users",Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App }, //注册插件 App 是引入的 在上方
template: '第二十一节笔记
components / Footer.vue
components / Header.vue
{{title}}
components / HelloWorld.vue
components / Users.vue
Hello Users
-
{{user.name}}
{{user.position}}
App.vue
{{title}}
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import Users from "./components/Users"
Vue.config.productionTip = false
//全局注册组件
//Vue.component("users",Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App }, //注册插件 App 是引入的 在上方
template: '第二十二节笔记
components / footer.vue
conmponents / Header.vue
{{title1}}
{{title}}
components / HelloWorld.vue
components / users.vue
Hello Users
-
{{user.name}}
{{user.position}}
App.vue
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import Users from "./components/Users"
Vue.config.productionTip = false
//全局注册组件
//Vue.component("users",Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App }, //注册插件 App 是引入的 在上方
template: '第二十三节笔记
components / footer.vue
components / header.js
{{title1}}
{{title}}
components / HelloWorld.vue
components / Users.vue
Hello Users
-
{{user.name}}
{{user.position}}
App.vue
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import Users from "./components/Users"
Vue.config.productionTip = false
//全局注册组件
//Vue.component("users",Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App }, //注册插件 App 是引入的 在上方
template: '第二十四节笔记
components / footer.vue
components / Header.vue
{{title1}}
{{title}}
components / HelloWorld.vue
components / Users.vue
Hello Users
-
{{user.name}}
{{user.position}}
App.vue
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import Users from "./components/Users"
Vue.config.productionTip = false
//全局注册组件
//Vue.component("users",Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App }, //注册插件 App 是引入的 在上方
template: '完结,撒花.
如果您能看到这里,我在此表示深深的感谢,以及真挚的祝福. --来自一个vue的初学者 cdd