前端（VS Core）
文章目录
1.VS core 插件
1.安装 Live Serever 插件，可以直接右下角，然后在浏览器显示，这样只需要保存，就能看到实时效果。
2.HTML
1.属性设置，一般格式为 属性名=属性值，一般属性值，使用 “” 或者 “ 引号，或者不使用任何引号。
例如：
<a href="http://www.runoob.com">这是一个链接</a>
2.标签名和属性明不区分大小写。
3.注释可以占多行。
3.HTML的前端
码云的例子：
https://gitee.com/shandongqd/front-end--html-madness
3.html 中的表达
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录注册</title>
</head>
<body>
<h1>注册</h1>
<!-- 表单注册
action : 表单的提交位置
name : 这个属性一定要写。后端就要读的 这个 name
readonly: 只读的属性.
hiddnen : 隐藏：一般是应用于默认的选项的那种。
method ： post ，get 的提交方式
get 方式：可以在url中看到提交的信息，不安全，但是很高效
post ：比较安装，比较适合传送大文件
验证;是为了减轻服务器的负担：
placeholder 提示信息
required 非空判断
pattern ：正则表达式，具体的规则去百度 “常用的正则表达式”
Input 的都是单标签
-->
<form action="./1.基本标签.html" method="GET">
<p>名字：<input type="text" name="username" value="默认的初始值" readonly></p>
<p>密码：<input type="password" name="pwd"></p>
<p>地址：<input type="text" name="addr" placeholder="请输入你家的地址"></p>
<br>
<h2>单选框</h2>
<!-- 单选框
input type=“radio”
value ： 单选框的值。外边男女是对他的一个修饰
name ：表示组
看到这里应该对 name 有更深的理解
-->
<p>性别：
<input type="radio" value="boy" name=sex> 男
<input type="radio" value="girl" name=sex> 女
</p>
<!-- 多选框
input type="checkbox"
checked 是默认选中。
-->
<p>爱好：
<input type="checkbox" value="sleep" name=hobby>睡觉
<input type="checkbox" value="charset" name=hobby>聊天
<input type="checkbox" value="code" name=hobby checked>写代码
</p>
<!-- 按钮
input type="button" 普通按钮
input type="image" 图像按钮
-->
<p>
<input type="button" name="btn1" value="button的显示名">
<input type="image" src="../resources/image/tiger.jpg" width="30" height="30">
</p>
<!-- 下拉框,列表框
-->
<p>国家：
<select name="列表名称">
<option value="china">中国</option>
<option value="US">美国</option>
<option value="Swit" selected>瑞士</option>
</select>
</p>
<!-- 文本域 -->
<p>
<textarea name="textarea" cols="30" rows="10">文本的内容</textarea>
</p>
<!-- 文件域 -->
<p>
<input type="file" name="上传文件">
</p>
<!-- 邮箱验证 -->
<p>邮箱：
<input type="email" name=email>
</p>
<!-- URL 验证 -->
<p>URL：
<input type="url" name=url>
</p>
<!-- 商品数量
step 是代表步长 为 1 点一下增加的数量
-->
<p>商品数量：
<input type="number" name=num max=100 min=0 step=1>
</p>
<!-- 声音的滑块 -->
<p>声音：
<input type="range" name="voice" min=0 max="100" step="2">
</p>
<!-- 搜索框 -->
<p>搜索框：
<input type="search" name=search>
</p>
<!-- 增强鼠标可用性
可以从 label 标签直接定位到 id 的地址的地方。
-->
<p>
<label for="mark">点击我试一下</label>
<input type="text" id=mark>
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
运行结果如下：
4.CSS
CSS 的规则，是有选择器，以及一条或者多条声明
body{
color: blue;
background-color: rebeccapurple;
}
3.1 两种选择器
- Id 选择器
- class 选择器
id 选择器
HTML 以 id 属性来设置 id 选择器，CSS 中 id 选择器以 “#” 来定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>
3.2 class 选择器
class 选择器可以在多个元素中使用。
class 选择器，在 HTML 中，以 class 属性来表示， 在类选择器中以 一个 “ .” 来表示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>
3.2 盒子模型
CSS 盒模型，是网页设计中 CSS 技术所使用的一种思维模式。
div 标签通常称为盒子。实际上其他的也被称为是盒子，只不过 div 是更典型的盒子。
看的时候，要把它看成两个框，而不应该是三个
- margin ：边缘，利润
- Padding：填充物
当你设置CSS元素的宽度和高度属性时，你只是设置了内容区域的宽度和高度，要知道，完整大小的元素，你还必须添加内边距，边距，外边距
例如：
里面所指的边距都是单边的边距
div {
width: 300px;
border: 25px solid green;
padding: 25px;
margin: 25px;
}
3.3分组选择器：
<style>
h1,h2,p
{
color:green;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
3.Vue
1.Vue 基本语法
1.简述Vue的原理
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
Vue 是响应式的框架，打开你的浏览器的 JavaScript 控制台 ，并修改 app.message 的值，你将看到上例相应地更新。
注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
注意 Vue能对其挂载的DOM 元素进行完全的控制，html就是一个入口而已。Html 凡事都得听 Vue 的
2.绑定
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
v-bind: ***= mesaage 是绑定命令，用上这个命令，就表示HTML5 这***的结果到底要展现个啥必须要听后边Vue的。
如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = ‘新消息’，就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新
3.切换一个元素是否要显示
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。
v-if 实际跟的就是一个布尔值。这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute，还可以绑定到 DOM 结构。此外，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/移除元素时自动应用过渡效果。
如果使用V-for命令，那么items必须要是一个数组，格式[ ]
4.v-on
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它 调用在 Vue 实例中定义的方法：
一般捆绑的是个按键。
this 上下文指的是调用他的Vue实例
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
5.V-model
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
使用 V-model 命令，相当于把 Vue 的实例当了一个中转站，实现了在html 的输出和输出即时的反应。注意，V-model是绑在输入一方的。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
6.组件
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用
组件就是自己定义一个组件格式：组件的内部上使用 props 属性往组件内部传参的。然后再用的时候，直接把组件名写上就行，使用 V-bind：props= ‘itme‘ 命令，向组件内部的 prop 接口传参。
<div id="app-7">
<ol>
<todo-item v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{id: 0, text: '蔬菜' },
{id: 1,text: '奶酪'},
{id: 2,text: '随便其它什么人吃的东西'}
]
}
})
</script>
2.Vue实例
Vue一定程度上遵循MVVM模式，将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来
1.响应式框架
网页的响应式设计是一种设计实践，这种设计实践是随着移动互联网时代的到来而逐渐兴起的。随着智能设备的兴起，人们不再仅仅是通过个人电脑来访问网页，还有可能使用智能手机或者平板电脑，如何适配各种不同尺寸大小，不同分辨率的设备，为网页设计带来了新的挑战。而响应式设计就是一种解决方案，采用响应式设计后，同样的一个网页会在不同设备上显示不同的布局，从而带来良好的用户体验。
2.数据与方法
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
当这些数据改变时，视图会进行重渲染。值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说得是在 Vue 里面的data里面才行。
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
3.钩子函数
同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。类似于 .net core 的 filter 函数。
2.模板语法
1.插值
<span>Message: {{ msg }}</span>
无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
2.指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。回顾我们在介绍中看到的例子：
<p v-if="seen">现在你看到我了</p>
这里，v-if 指令将根据表达式 seen 的值的真假来插入/移除
元素
参数
1.一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：
<a v-bind:href="url">...</a>
在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。
3.缩写
v-bind 绑定
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
4.监听事件
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}})
内联处理器中的方法：
可以直接把参数传进方法里
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}}})
3.表单的输入绑定
你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
简单点来理解： html 页面上显示的元素，一般应该是听 Vue 实例的，加了 V-model就是把他反过来了
1.文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
2.复选框
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
new Vue({
el: '...',
data: {
checkedNames: []
}})
最终的效果：
他为什么能够通过 V-mode 标签就能显示，就是因为 vue 很智能 会根据控件类型自动选取正确的方法来更新元素
3.单选多选框
内容比较多，用到的时候再看官方文档吧。
2.组件
1.组件名
在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：
Vue.component('my-component-name', { /* ... */ })
该组件名就是 Vue.component 的第一个参数。
给组件起名的时候建议使用 W3C规范 ，要求字母全小写，并且必须包含一个连字符。
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{ title }}</h3>'
})
使用的话这么使用：
<blog-post title="My journey with Vue"></blog-post>
<blog-post title="Blogging with Vue"></blog-post>
<blog-post title="Why Vue is so fun"></blog-post>
最终的效果图：
2.全局注册
内容都比较简单，直接看官网吧：https://cn.vuejs.org/v2/guide/components-registration.html
3.插槽
插槽现在使用统一的语法 v-slot
它允许你像这样合成组件：
<navigation-link url="/profile">
Your Profile
</navigation-link>
然后你在 <navigation-link> 的模板中可能会写为：
<a
v-bind:href="url"
class="nav-link"
>
<slot></slot>
</a>
这样当组件渲染的时候，当组件渲染的时候，<slot></slot> 将会被替换为“Your Profile”。
注意，slot 标签是写在模板里面的。在组件开始使用的时候，就会被替换掉。
3.axios
1.执行 get 请求
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2.执行 Post 请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
3.执行多个并发请求
// 发送 POST 请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
4. axios API
使用 axiso 传递相关配置来创建请求。
// 发送 POST 请求
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
里面更多的参数，可以查看官网。
http://www.axios-js.com/zh-cn/docs/index.html
5.组件中的axios
get请求，直接看代码吧
<!-- -->
<template>
<div>
<h1>根据ID获取学生信息</h1>
<p>请输入你要查询的ID：</p>
<input type="text" v-model="PuID" />
<p>你输入的Id是：{{PuID}}</p>
<h3>此学生的相关信息如下：</h3>
<p>该学生的ID：{{student.id}}</p>
<p>该学生的名字：{{student.name}}</p>
<p>该学生的ID：{{student.password}}</p>
<input type="button" value="点击查询" @click="getJoke" />
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
student: [],
PuID:''
};
},
// mounted() {
// this.getJoke();
// },
methods: {
getJoke: function () {
// console.log('sdsssss'+this.PuID)
let that = this; // 因为this会变，所以直接把this 存为that
axios
.get("http://pengzhao.xyz:5010/api/student/getid", {
params: {
studentid: this.PuID,
},
})
.then(
function (response) {
// console.log(response.data);
that.student = response.data;
},
function (err) {}
);
},
},
};
</script>
<style scoped>
</style>
4.安装 Vue 脚手架
1.环境准备
1.node.js 安装
官网下载，一路无脑安装即可。
https://nodejs.org/en/
2.查看是否安装成功
查看是否能打印出正常的版本号：
node -v
npm -v
3.更换淘宝镜像加速器
npm install cnpm -g
尽量使用 npm cnpm 是国内安装
4.安装vue-cli
cnpm install vue-cli -g
安装完以后，我们查看基于那些 Vue 模板创建程序
vue list
如果提示系统禁止运行脚本，那么参考下边连接
https://blog.csdn.net/wqnmlgbsz/article/details/100654258
结果如下：
webpack 能够打包降级，然后是通用型。
2.建立第一个Vue 程序
vue init webpack myvue
这里的 vue 是项目名称，可以自己创建。然后下边的选择一路 no 就行了。剩下的学习自己手动配置。
3.初始化并运行
cd myvue // 进到了Vue 里面
npm install //初始化
npm run dev //运行dev 可以实现组件的热部署。
初始化其实是根据 package.json 配置文件的要求初始化的。
如果在初始化过程中，有报错，直接执行提示命令即可。
停止运行，使用 ctrl + C
4. Vue的目录结构
- Src ：写文件里面。(里面都是使用组件的方式进行开发)
- build ：是构建的文件。
安装webpack 打包工具
npm install webpack -g
npm install webpack-cli -g
测试是否安装成功：
- webpack -v
- webpack -cli -v
监听
webpack --watch
使用该命令可以使用热部署；
webpack 其实就是一个大包工具.
5.路由
Vue Router 是 Vue.js 官方路由管理器。他和Vue.js 的核心深度集成，让构建的单页面应用变得易如反掌。
1.安装vue - route
npm install vue-router --save-dev
2.新建 vue 模板
学会了路由，才能懂得组件式的开发。
6.使用Element
使用 Element 和 Vue 相结合，可以实现快速开发。
element 推荐使用 npm 安装
7.自己动手做一个
1.项目建立步骤
1.进入工程目录
vue init webpack hello-vue
cd hello-vue
2.安装 vue-router
npm install vue-router --save-dev
3.安装 element-ui
npm i element-ui -S
4.安装依赖
npm install
5.安装 SASS 加载器
cnpm install sass-loader node-sass --save-dev
6.启动测试
npm run dev
2.Npm 命令解释
npm install moduleName : 安装模块到项目目录下
npm install -g moduleName:
-g 的意思是将模块安装到全局，具体安装到磁盘哪个位置，要看 npm config prefix 的位置
npm install -save moduleName ：
--save的意思是将模块安装到项目目录下，并且在package 文件的 dependercies 节点写入依赖，， -S为该命名的缩写。
npm install -save-dev moduleNam e:
--save-dev 的意思是将模块安装到项目目录下，并在package文件的 devDependencies 节点写入依赖，-D 为该命令的缩写。
就是在开发者模式下安装。
3.嵌套路由
8.JSon
1.Json和 XML的对比
Json 是一种轻量级的数据交换格式，（Javascript Object Notation，JS 对象标记语言）
一般 XML 天生具有很好的扩展性，JSon 一般是用来前后端交互用用 ,XML 一般是用来做交互的：
代码的对比：
JSon
{
"sites": [
{ "name":"菜鸟教程" , "url":"www.runoob.com" },
{ "name":"google" , "url":"www.google.com" },
{ "name":"微博" , "url":"www.weibo.com" }
]
}
XML
<sites>
<site>
<name>菜鸟教程</name> <url>www.runoob.com</url>
</site>
<site>
<name>google</name> <url>www.google.com</url>
</site>
<site>
<name>微博</name> <url>www.weibo.com</url>
</site>
</sites>
2.JS 语言
- 对象用键值对
- 数据用逗号分隔 （最后一个数据不加 “，”）
- 花括号保存对象
- 方括号保存数组
