关于做一个基本的vue项目，下面的基础知识已经可以了。
git：https://gitee.com/juncaoit/vue-basic
一：准备
1.安装vscode
2.nodejs
Node.js ：就是运⾏在服务端的 JavaScript
npm：nodejs的包管理⼯具，可以下载使⽤公共仓库的包，类似maven
包安装分为本地安 装（local）、全局安装（global）
新版的nodejs已经集成了npm，所以npm也⼀并安装好
3.切换源
npm install -g cnpm --registry=https://registry.npm.taobao.org
这样就可以使⽤ cnpm 命令来安装模块了：cnpm install [name]
4.新版Vue + 脚⼿架Vue-Cli 4.3 安装
cnpm install -g @vue/cli
cnpm install -g @vue/cli-init
使⽤vue-cli创建项⽬（测试项⽬，验证vue环境）：
vue create my-project
二：cdn方式的基础语法
0.官网
https://cn.vuejs.org/
1.声明式渲染
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小滴课堂vue快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p> {{message}} </p> <p>{{ 5+5+5 }} </p> <p> {{ message.split('').reverse().join('') }} </p> </div> <script> new Vue({ //绑定到哪个元素 el:'#app', //数据源 data:{ message: "欢迎vue全栈工程师" }, //自定义方法 methods: { } }) </script> </body> </html>
2.vue指令与参数
可以省略，使用:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小滴课堂vue快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- 指令与参数 --> <div id="app"> <p> <a v-bind:href = "url" > 小滴课堂 </a> </p> </div> <script> new Vue({ //绑定到哪个元素 el:'#app', //数据源 data:{ message: "欢迎来到小滴课堂学习 ssm - vue全栈工程师", url : "https://xdclass.net" }, //自定义方法 methods: { } }) </script> </body> </html>
3.vue条件v-if与v-else
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小滴课堂vue快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- vue条件 --> <div id="app"> <div v-if="Math.random() > 0.5 "> 大于0.5 </div> <div v-else>小于0.5 </div> </div> <script> new Vue({ //绑定到哪个元素 el:'#app', //数据源 data:{ }, //自定义方法 methods: { } }) </script> </body> </html>
4.vue循环v-for
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小滴课堂vue快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- vue循环 --> <div id="app"> <ol> <li v-for=" user in users "> {{user.name}} </li> </ol> </div> <script> new Vue({ //绑定到哪个元素 el:'#app', //数据源 data:{ users:[ {name: "Anna小姐姐"}, {name: "老王"}, {name: "二当家小D"}, ] }, //自定义方法 methods: { } }) </script> </body> </html>
5.双向绑定v-model
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小滴课堂vue快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- 双向绑定 -->> <div id="app"> <p> {{phone}} </p> 手机号 <input v-model="phone" /> </div> <script> new Vue({ //绑定到哪个元素 el:'#app', //数据源 data:{ phone : "000" }, //自定义方法 methods: { } }) </script> </body> </html>
6.事件
可以省略，使用@
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小滴课堂vue快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!--监听实践-->> <div id="app"> <p> {{title}} </p> <button v-on:click="changeTitle"> 完善标题 </button> </div> <script> new Vue({ //绑定到哪个元素 el:'#app', //数据源 data:{ title: "面试专题课程" }, //自定义方法 methods: { changeTitle:function(){ this.title = "||课堂 2020年 " + this.title; } } }) </script> </body> </html>
7.组件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小滴课堂vue快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!--组件--> <div id="app"> <xd_component></xd_component> <xd_component></xd_component> <xd_component></xd_component> <xd_component></xd_component> </div> <script> Vue.component('xd_component',{ // 方法 data:function(){ return { count: 0 } }, template:' <button v-on:click="count++"> 点击 {{count}}次 </button> ' }) new Vue({ //绑定到哪个元素 el:'#app', //数据源 data:{ }, //自定义方法 methods: { } }) </script> </body> </html>
8.给组件中传值
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>小滴课堂vue快速入门</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <!-- 外界传递进来 --> <div id="app"> <xd_component message="小滴课堂 https://xdclass.net" ></xd_component> <xd_component message="面试专题"></xd_component> </div> <script> Vue.component('xd_component',{ // 外界传递进来要声明 props:{ message:{ type:String } }, // 函数方式 data:function(){ // 返回对象 return { count : 0 } }, //组件里面的template只能包含一个根节点 template:'<div> <button v-on:click="count++"> {{message}} 点击 {{count}}次 </button> </p> </div> ' }) new Vue({ //绑定到哪个元素 el:'#app', //数据源 data:{ }, //自定义方法 methods: { } }) </script> </body> </html>
三：ES6基本学习
1.let与cost
let声明变量，作用域更小，可以在方法中定义
cost：定义常量
2.箭头函数
//以前js定义函数
var sum = function(num1,num2) {
return num1 + num2;
};
// 使⽤箭头函数
let sum = (num1,num2) => num1 + num2;
3.对象词法扩展
: 在对象字⾯量时使⽤简写语法，来初始化属性变量和函数的定义⽅法
function getVideo(make, model, value) {
return {
// 简写变量
make, // 等同于 make: make
model, // 等同于 model: model
value, // 等同于 value: value
};
}
效果：
let video = getVideo('java', 'java', 99);
output: {
make: 'java',
model:'java',
value: 99,
}
4.解构赋值
let [a, b, c] = [1, 2, 3];
// a = 1
// b = 2
// c = 3
let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
// foo = 'aaa'
// bar = 'bbb'
5.导入
在ES6中如何导⼊模块 import 模块名称 from '模块标识符'
import axios from 'axios'
import { loginApi } from '@/api/getData.js'
6.导出
⽅式⼀： export default 向外暴露的成员可以使⽤任意的变量来接收 注意：在⼀个模块中只 能使⽤export default向外暴露⼀次
//user.js
export default {
name: 'xdclass.net',
age: 10
}
//main.js
import xd from './user'
//xd 为⼀个包含 name 和 age 属性的对象
⽅式⼆： export 向外暴露的成员只能使⽤ {} 接收，这叫做 按需导出 注意：⼀个模块中可以 同时使⽤ export default 和 export 暴露成员
// user.js
export default {
name: 'xdclass.net',
age: 10
}
export var teacher = "⼩滴课堂-⼆当家⼩D"
export var content = '全栈⼯程，和隔壁⽼王⽐较熟悉'
//main.js
import xd, { teacher,content } from './user
posted on
