Vue入门
VsCode开发工具
1.基本的数据模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- vue入门 -->
<div id="app">
<!-- 使用插值表达式获取数据 -->
{{message}}
</div>
<script src="js/vue.min.js"></script>
<script>
//创建一个vue对象
new Vue({
el:'#app', //绑定vue作用的范围
data:{ //定义页面中显示的模型数据
message:'卧槽你好'
}
})
</script>
</body>
</html>
2. 公共代码抽取
VS Code:文件-首选项-用户片段
{
"vuehtm": {
"scope": "html",
"prefix": "vuehtml",
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"",
"<head>",
" <meta charset=\"UTF-8\">",
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
" <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"<title>Document</title>",
"</head>",
"",
"<body>",
" <div id=\"app\">",
"",
" </div>",
"<script src=\"vue.min.js\"></script>",
"<script>",
" new Vue({ ",
" el: '#app',",
" data: {",
"",
" }",
" })",
"</script>",
"</body>",
"",
"</html>",
],
"description": "Create vue template"
}
}
3.基本语法(基本数据渲染和指令)
1.v-bind指令
<body>
<div id="app">
<!-- v-bind指令
单向数据绑定
这个指令一般用于在标签属性里,获取值
-->
<h1 v-bind:title="message">
{{content}}
</h1>
<!-- 简写 -->
<h2 :title="message">
{{content}}
</h2>
</div>
<script src="js/vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
content: '我是标题',
message: '页面加载于' + new Date().toLocaleString()
}
})
</script>
</body>
2.v-model指令 双向绑定指令
<body>
<div id="app">
<!-- v-model指令
-->
<input type="text" v-bind:value="searchMap.keyWord"/>
<!--双向绑定 -->
<input type="text" v-model="searchMap.keyWord" />
<p>{{searchMap.keyWord}}</p>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap:{
keyWord: '孙尚香'
}
}
})
</script>
</body>
3.v-if指令
<body>
<div id="app">
<input type="checkbox" v-model="ok" />是否同意
<!-- 当勾选同意的时候 显示好的
不勾选的时候显示抱歉
-->
<h1 v-if="ok">好的</h1>
<h1 v-else>抱歉</h1>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
ok: false
}
})
</script>
</body>
4.事件操作
<body>
<div id="app">
<!-- vue绑定事件 -->
<button v-on:click="search()">查询</button>
<!-- 简写方式 -->
<button @click="demo()">查询</button>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
searchMap: '狗蛋'
},
//查询结果
result: {},
methods: { //定义多个方法
search() {
console.log('search....')
},
demo() {
console.log('demo....')
}
}
})
</script>
</body>
5.修饰符
<body>
<div id="app">
<form action="save" v-on:submit.prevent="onSubmit">
<input type="text" id="name" v-model="user.username" />
<button type="submit">保存</button>
</form>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
user: {}
},
methods: {
onSubmit() {
if (this.user.username) {
console.log("提交表单")
} else {
alert("请输入用户名")
}
}
}
})
</script>
</body>
6.循环
<body>
<div id="app">
<ul>
<li v-for="n in 10">循环出来的数字:{{n}}</li>
</ul>
<ol>
<li v-for="(n,index) in 10">循环出来的数字:{{n}} ,循环出来的下标:{{index}}</li>
</ol>
<hr />
<!-- 循环数组对象 -->
<table>
<tr v-for="us in userList">
<td>{{us.id}}</td>
<td> {{us.username}}</td>
<td> {{us.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
userList: [{
id: 1,
username: '狗蛋',
age: 19
},
{
id: 2,
username: '铁柱',
age: 32
},
{
id: 3,
username: '翠花',
age: 23
}
]
}
})
</script>
</body>
7. 组件
<body>
<div id="app">
<Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
//定义vue使用的组件
components: {
//组件名称
'Navbar': {
//组件内容
template: '<ul><li>首页</li><li>管理</li></ul>'
}
}
})
</script>
</body>
8.全局组件
<body>
<div id="app">
<!-- 全局组件的使用
创建文件夹 放入JS文件
在使用的页面上导入使用标签即可
-->
<Navbar></Navbar>
</div>
<script src="vue.min.js"></script>
<script src="components/Navbar.js"></script>
<script>
new Vue({
el: '#app',
data: {
}
})
</script>
</body>
9.vue的生命周期
<body>
<div id="app">
<!-- -->
</div>
<script src="vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
},
created(){
//在页面渲染前执行
console.log("created...")
},
mounted(){
//在页面渲染之后执行
console.log("mounted...")
}
})
</script>
</body>
10.vue的路由
<body>
<div id="app">
<h1>Hello Appl</h1>
<p>
<!-- 使用router-link 组件来导航 -->
<!-- 通过传入 ’to‘ 属性指定链接 -->
<!-- <router-link>会被渲染成一个<a>标签 -->
<router-link to="/">首页</router-link>
<router-link to="/student">会员管理</router-link>
<router-link to="/teacher">讲师管理</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染到这里 -->
<router-view></router-view>
</div>
<!-- 引入vue路由的js是有顺序的 先引入vue 在引入路由 -->
<script src="vue.min.js"></script>
<script src="vue-router.min.js"></script>
<script>
//1.定义路由组件 可以从其他文件impot进来
const Welcome = {
template: '<div>欢迎</div>'
}
const Student = {
template: '<div>学生列表</div>'
}
const Teacher = {
template: '<div>讲师列表</div></div>'
}
//2.定义路由 每个路由应该映射一个组件
const routes = [{
path: '/',
redirect: '/welcome'
},
{
path: '/welcome',
component: Welcome
},
{
path: '/student',
component: Student
},
{
path: '/teacher',
component: Teacher
},
]
//3.创建router实例,然后传 'router' 配置
const router =new VueRouter({
routes //(缩写) 相当于routes:routes
})
//4.创建和挂载根实例 从而让整个应用都有路由的功能
const app = new Vue({
el: '#app',
router
})
</script>
</body>
axios
asios是独立的项目,不是vue的一部分,要经常和vue一快使用来实现Ajax操作
使用场景
前端获取后端接口的数据,前端需要使用Ajax来获取发送Ajax请求获取后端数据
axios使用
1.创建HTML页面,引入js文件,vue和axios
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
2.编写json数据
{
"success": true,
"code": 20000,
"message": "成功",
"data": {
"items": [
{
"name": "路西",
"age": 20
},
{
"name": "路东",
"age": 24
},
{
"name": "路南",
"age": 22
}
]
}
}
3.编写axios的代码
<body>
<div id="app">
<!-- 显示userList的数据显示 -->
<div v-for="items in userList">
{{items.name}}==={{items.age}}
</div>
</div>
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<script>
new Vue({
el: '#app',
//固定的结构
data: {
//在data里定义和初始化变量
//定义空数组
userList: []
},
created() { //页面渲染前执行的方法
//调用定义的方法
this.getUserList()
},
methods: { //编写具体的方法
//创建方法 查询所有用户的数据
getUserList() {
//使用axios发送Ajax请求
//axios.提交方式("请求接口的路径或文件")
axios.get("json/data.json")
.then(result => {
//console.log(result)
this.userList = result.data.data.items
console.log(this.userList)
}) //请求成功后执行
.catch(error => {
}) //请求失败后执行
}
}
})
</script>
</body>
ElementUi
饿了么出品
Node.js
JavaScript的运行时环境,不需要浏览器,直接使用node.js运行JavaScript
模拟服务器
const { Console } = require('console');
const http=require('http');
http.createServer(function(request,response){
//发送HTTP头部
//HTTP状态值 200 : OK
//内容类型: text/plain
response.writeHead(200,{'Content-Type':'text/plain'});
//发送响应数据,"Hello Word"
response.end('Hello Word');
}).listen(8888);
//终端打印以下信息
console.log("Server running at http://127.0.0.1:8888/");
找到文件 cmd node 文件名 就能使用端口号来访问
NPM
是node.js的包管理工具,相当于maven,管理前端js的依赖
1.npm项目初始化
npm init 会生成package.json文件,类似于pom文件
npm init -y 使用默认的
2.npm下载js依赖
npm install 依赖名称 就会下载最新的依赖
npm install @jquery3.3.1 指定版本
3.修改镜像
npm config set registry https://registry.npm.taobao.org
查看npm配置信息:npm config list
4.根据pacgage.json下载依赖
npm install
babel
是一个转码器,将ES6的代码转换未ES5的代码,因为ES5兼容性高
1.安装
npm install --global babel-cli
出问题参考:https://blog.csdn.net/qq_44339899/article/details/112867079
2.测试
js文件
//转码前
//定义数据
let input=[1,2,3]
//将数组的没个元素+1
input=input.map(item=>item+1)
console.log(input)
3.创建配置文件(.babelrc)
转换规则:
{
“presets”:[“es2015”],
“plugins”: []
}
4.安装转码器
npm install --save-dev babel-preset-es2015
5.转换
babel es6/es6.js -o disti/es5.js
模块化
js 模块化,在2.js里调用1.js的方法
步骤:
1.创建js文件
2.编写方法
3.设置那些方法可以被调用
//创建方法
const sum=function(a,b){
return parseInt(a)+parseInt(b)
}
const subtract=function(a,b){
return parseInt(a)-parseInt(b)
}
//设置那些方法可以被调用
moduel.exports={
sum,
subtract
}