前端发展历程
1.HTML(5)、CSS(3)、JavaScript(ES5、ES6)：编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 -> 在浏览器中查看
2.Ajax的出现 -> 后台发送异步请求，Render+Ajax混合
3.单用Ajax（加载数据，DOM渲染页面）：前后端分离的雏形
4.Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）
5.React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）
6.移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端
7.一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端
8.在Vue框架的基础性上 uni-app：一套编码 编到10个平台
9.在不久的将来 ，前端框架可能会一统天下
Vue简介
# js的框架
# 构建用户界面的渐进式框架
# MVVM介绍 mvc mvvm mvp
-Model-View-ViewModel
-Model ：vue对象的data属性里面的数据，这里的数据要显示到页面中
-View ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS）
-ViewModel：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变
# 组件化开发、单页面开发
# 关于编辑器的选择
-Andriostadio：谷歌公司出钱买了jebrains版权+ADT--》
-webstorm：jebrains公司出的 pycharm，goland，idea，phpstorm
-vscode：微软 免费
-sublime text：收费
-咱们使用pycharm，装一个插件开发vue
Vue语法介绍
1打印hello world
# 导入Vue文件
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
# html代码部分
<div id="app">
<h1>{{name}}</h1>
</div>
# 绑定Vue对象
<script>
var vm=new Vue({
el:'#app', //id为app的div，被vue托管了
data:{
name:'hello world'
}
})
</script>
# 补充知识:
1.Vue.js这个文件如果下载本地，通常放在项目文件夹的templates/js下
2插值语法
# html部分
<div id="box">
<ul>
<li>字符串：{{name}}</li>
<li>数值：{{age}}</li>
<li>数组：{{list1}}</li>
<li>对象：{{obj1}}</li>
<li>字符串：{{link1}}</li>
<li>运算：{{10+20+30+40}}</li>
<li>三目运算符：{{10>20?'是':'否'}}</li>
</ul>
</div>
# Vue部分
<script>
let vm = new Vue({
el: '#box', // 在box这个div中可以写 vue的语法
data: {
name: 'Darker', // 字符串
age: 18, // 数值
list1: [1,2,3,4], // 数组
obj1: {name: 'Darker', age: 19}, // 对象
link1: '<a href="https://www.baidu.com">百度一下 你就知道</a>' // 默认不渲染标签
}
})
</script>
# 结果
字符串：Darker
数值：18
数组：[ 1, 2, 3, 4 ]
对象：{ "name": "Darker", "age": 19 }
字符串：<a href="https://www.baidu.com">百度一下 你就知道</a>
运算：100
三目运算符：否
3文本指令
# 指令就是写在标签内以 v-xx 开头的部分
v-html 让HTML渲染成标签
v-text 将Vue变量的值赋给标签的值 （很像插值语法）
v-show 放1个布尔值：为真 标签就显示；为假 标签就不显示(只是隐藏)
v-if 放1个布尔值：为真 标签就显示；为假 标签就不显示(dom中直接移除)
# html部分
<div id="app">
文本指令之 v-html：
<div v-html="link1"></div>
<hr>
文本指令之 v-text：
<div v-text="msg"></div>
<hr>
文本指令之 v-show：
<div v-show="b"> 我是div</div>
<hr>
文本指令之 v-if：
<div v-if="b"> 我是div</div>
</div>
# Vue部分
<script>
var vm = new Vue({
el: '#app',
data: {
link1: '<a class="btn btn-danger" href="https://www.baidu.com">百度一下 你就知道</a>',
msg: 'lqz is handsome',
b: true
}
})
</script>
4数据的双向绑定v-model
4.1基本用法
# v-model
# 用一个变量来接收input输入框的值
# html代码
<div id="box">
<input type="text" v-model="myText" placeholder="请输入内容">
您输入的内容是：{{myText}}
</div>
# Vue代码
<script>
var vm = new Vue({
el: '#box',
data: {
myText: '',
},
})
</script>
4.2 进阶
.lazy：等input框失去焦点之后数据再变化
.number：数字开头，只保留数字，后面的字母不保留；字母开头，都保留
.trim：去除首尾的空格
# 补充事项：
1.语法：v-model.lazy
2.可以一起使用，类似于链式操作，如v-model.lazy.number.trim
<div id="app">
lazy的使用：<input type="text" v-model.lazy="msg"> {{msg}}
number的使用：<input type="text" v-model.number="msg"> {{msg}}
trim的使用：<input type="text" v-model.lazy.number.trim="msg"> {{msg}}
</div>
5事件指令
5.1 点击事件click
# 以点击事件为例
v-on:click='' # 老语法
@click='' # 新语法，简写成@，推荐使用
# html代码
<div id="app">
<button class="btn btn-success" @click="handleClick"> 点我显示不显示</button>
<div v-show="show">
我是div
</div>
</div>
# Vue代码
<script>
var vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClick() {
// 只需要把show变量改成false，div就隐藏了
this.show = !this.show // 取反
},
}
})
</script>
5.2其它事件
input 当输入框内容变化的时候 触发的事件
change 当输入框失去焦点、且值发生变化的时候 触发的事件
blur 当输入框失去焦点的时候 触发的事件
5.3过滤案例
# 使用input事件
# 使用indexOf()
# HTML代码
<div id="box">
<p><input type="text" v-model="myText" @input="handleInput" placeholder="请输入要筛选的内容："></p>
<ul>
<li v-for="data in newList">{{data}}</li>
</ul>
</div>
# vue代码
<script>
var vm = new Vue({
el: '#box',
data: {
myText: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
newList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
},
methods: {
handleInput() {
this.newList = this.dataList.filter((item) => { // ()=>{} 箭头函数
// item.indexOf(this.myText) 判断myText在indexOf中的位置,从0开始,不在的话返回-1
return item.indexOf(this.myText) > -1 // 返回索引大于1的元素：>-1 就表示包含在其中
})
},
},
})
</script>
# 补充事项：
1.箭头函数中this和外面的this一样，但如果换成匿名函数，this就是匿名函数的this，不再是Vue的this
5.4事件修饰符
# 用于对事件进行修饰
.stop 只处理自己的事件，阻止事件冒泡,写在子控件中
.self 只处理自己的事件，子控件冒泡的事件不处理，写在父控件中
.prevent 阻止a链接的跳转
.once 事件只会触发一次，刷新页面可再次执行（适用于抽奖页面）
# .stop和.self作用一样，只是.self写在父标签中，.stop写在子标签中
# HTML代码
<div id="box">
<ul @click.self="handleUl">
<li v-for="data in dataList" @click.stop="handleLi">{{data}}</li>
<li><a href="http://www.baidu.com">不拦截</a></li>
<li><a href="https://www.baidu.com" @click.prevent="handleLink">点击拦截</a></li>
<li><button @click.once="test">只执行一次</button></li>
</ul>
</div>
6键盘修饰符
# 相当于按键事件
# @keyup 有按键松开时触发
# 监控单个按键enter、delete、tab、esc、space、up、down、left、right，
# 用法： @keyup.enter
# 使用键盘码值触发单个按键的事件
# 每一个键盘按键都对应一个数字，如F2对应113
# 用法：@keyup.113
7 属性指令
# 可以将属性的值写为变量，动态赋值
v-bind 直接写js的变量或语法（不推荐）
: 直接写js的变量或语法（推荐）
# head部分(样式)
<style>
.red {
background: red;
}
.green {
background: green;
}
</style>
# HTML代码
<div id="app">
<button @click="handleClick">点我变色</button>
<div :class="name" :age="age">
我是div
</div>
</div>
# Vue代码
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'red',
age:19,
},
methods: {
handleClick(){
if(this.name=='green'){
this.name='red'
}else {
this.name='green'
}
}
}
})
</script>
8style和class属性的值
:class='变量'
:style='变量'
变量可以是字符串、数组、对象；class推荐数组；style推荐对象
# 样式
<style>
.red {
color: rgba(255, 104, 104, 0.7);
}
.font_20 {
font-size: 20px;
}
.be_bold {
font-weight: bold;
}
</style>
# HTML代码
<div id="app">
<div :class="class_obj">
我是div
</div>
<div :style="style_class">
我是style的div
</div>
</div>
# Vue代码
<script>
var vm = new Vue({
el: '#app',
data: {
// class_obj:'red' // 字符串形式
class_obj:['red',] // 数组形式
// class_obj:{red:true,'be_bold':false} // 对象形式
// style_class:'background:red' //字符串
// style_class: [{background: 'red'}, {fontSize: '30px'}] //数组形式
style_class: { background: 'green',fontSize: '30px'} //对象形式（推荐）
},
})
</script>
# 补充事项：
1.html代码中font-size，在vue中会自动转化成fontSize,即xx-xx形式转成驼峰
9 条件渲染
v-if 相当于： if
v-else-if 相当于：else if
v-else 相当于：else
# 遇到v-else，循环结束
<div id="app">
<h1 v-if="score>90">优秀</h1>
<h1 v-else-if="score>80">良好</h1>
<h1 v-else-if="score>=60">及格</h1>
<h1 v-else>不及格</h1>
</div>
10 列表渲染
10.1基本用法
v-for：循环显示
<tr v-for="i in list"> # 相当于for i in list
<td>{{i.name}}</td>
<td>{{i.price}}</td>
</tr>
# 补充事项：
1.python中for遍历字典时，按位置赋值，先key后value,Vue中先value后key
2.python中for遍历列表时，按位置赋值，先index后value,Vue中先value后index
对象渲染的时候通常会加上:key ,例如：
<p v-for="(value,key) in obj" :key="value">key值是：{{key}}，value值是：{{value}}</p>
# 原因：
1.在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一。
2.页面更新之后，会加速DOM的替换（渲染）
3.vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，这样会提高数据的刷新速度（虚拟DOM用了diff算法）
10.2 :key的解释
对象渲染的时候通常会加上:key
例如：
<p v-for="(value,key) in obj" :key="value">key值是：{{key}}，value值是：{{value}}</p>
原因：
1.在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，属性值唯一。
2.页面更新之后，会加速DOM的替换（渲染）
3.vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，这样会提高数据的刷新速度（虚拟DOM用了diff算法）
10.3数组的更新与检测
# Vue之所可以同步更新，是因为后台有关联处理，但并不是所有的操作都写了关联处理，没写的话就不能同步更新
可以检测到变动的数组操作：
push：最后位置添加
pop：最后位置删除
shift：第一个位置删除
unshift：第一个位置添加
splice：切片
sort：排序
reverse：反转
检测不到变动的数组操作：
filter()：过滤
concat()：追加另一个数组
slice()：
map()：
解决方案：
通过 Vue.set(对象, index/key, value) 更新数组（数据会更新，页面也会发生改变）
Vue.set(列表/对象, 索引/key, '值')
handleClick1(){
// this.obj['name']='egon'
Vue.set(this.obj,'name','eeee')
}
11表单控制
# v-model就是表单的值
# 单选
<input type="radio" v-model="radio" value="男">男
# 多选
<input type="checkbox" v-model="many" value="篮球">篮球
<input type="checkbox" v-model="many" value="足球">足球
<input type="checkbox" v-model="many" value="棒球">棒球
<input type="checkbox" v-model="many" value="桌球">桌球
生命周期钩子
1 8个生命周期钩子
# 总共有8个，最常用的created
beforeCreate 创建Vue实例之前调用
created 创建Vue实例成功后调用(通常在此处发送异步请求后端数据)
beforeMount 渲染DOM之前调用
mounted 渲染DOM之后调用(同常在此处绑定计时事件)
beforeUpdate 重新渲染之前调用
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用(通常在此处取消计时事件)
2 生命周期钩子的用法
destroyed() {
clearInterval(this.t)
},
created() {
console.group('当前状态：created')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
},\\
# 注意事项：
1.写在和data、methods平级的地方
2.console.group() 也是打印输出，但会将所有的console.log()分为一组打印
3 计时事件
# 延迟任务,4s后执行
setTimeout(function () {
alert('1111')
},4000)
# 定时任务 每隔3s执行一次
var t = setInterval(function () {
console.log(111)
}, 4000)
# 关掉定时任务
clearInterval(this.t)
# 补充事项
1.计时事件可以写在script标签中，或mounted钩子中
2.关掉定时任务可以写destroyed钩子中
4 发送ajax请求
# 在vue中，用axios发送Ajax请求
4.1axios的引入
# 在.html文件中
<script src="https://unpkg.com/axios/dist/axios.min.js">
# 在.vue文件中
1 下载：cnpm install axios -S
2 导入并直接使用
import axios from 'axios'
4.2 6种请求方式
# 语法(用在点击事件中)
axios.get(url,config).then() # 按位置传参数
axios.delete((url,config).then()
axios.head(url,config).then()
axios.post(url,data,config).then()
axios.put(url,data,config).then()
axios.patch(url,data,config).then()
# get表示请求方式、url路由、config请求参数、data请求体参数、then是对后端返回数据的处理
# config请求参数、data请求体参数 可以不写
4.3 get请求
// 以get请求为例，res为后端返回体对象，res.data为后端返回数据对象
methods:{
handleClick(){
// 会出跨域问题
axios.get('http://127.0.0.1:5000/').then(res=>{
console.log(res.data)
this.name=res.data.name
this.age=res.data.age
})
}
// 解决跨域问题
在响应头中添加'Access-Control-Allow-Origin' = '*' ，表示允许所有路由来访问
4.4 post请求
// post：
let data1 = new URLSearchParams();
data1.append("name","egon");
axios.post("index/",data1,{baseURL:"http://127.0.0.1:8000"}).then(res=>{
console.log(res)
this.data = res.data
})
// 注意事项：
1.post请求提交数据的时候，如果直接提交json格式，后端会将post请求识别为options，进而报错，所以要用URLSearchParams()对数据进行修饰
2.{baseURL:"http://127.0.0.1:8000"} 是config参数
4.5 config参数
# 以下只是部分比较常用的，详细的请看笔记《vue模块之axios的config参数》
{
// 1.`baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: "https://some-domain.com/api/",
// 2.`headers` 是即将被发送的自定义请求头
headers: {"X-Requested-With": "XMLHttpRequest"},
// 3.`params` 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
params: {
ID: 12345
}
// 4.`xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
xsrfCookieName: "XSRF-TOKEN", // default
// 5.`xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
xsrfHeaderName: "X-XSRF-TOKEN", // 默认的
}
# 例：
axios.post("index/",data1,{baseURL:"http://127.0.0.1:8000",params:{ID:999},})
组件
1 计算属性
# 有点类似@proprety，将方法当成属性使用，且当该属性的返回值不变的时候，即使调用该属性，也不会执行；反之，自动执行(这是getter方法)
# setter方法在属性值自己变化的时候会触发，反过来修改依赖源
# 语法：
# 该属性定义在computed中，computed和methods同级
# 写法1：默认是getter方法
computed:{
getCMsg(){
return this.msg.substring(0,1).toUpperCase()+this.msg.substring(1)
}
}
# 写法2：定义setter方法(通常不用)
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ');
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
2 组件化开发
# 作用：扩展 HTML 元素，封装可重用的代码，目的是复用
# 注意事项：
1 自定义组件一般包裹在一个div中
2 父、子组件的data是无法共享
3 组件可以有data，methods,computed....,但是data必须是一个函数
2.1全局组件
# 调用
<child></child>
# 定义(定义的位置和根vue同级)
# 看局部组件中的代码
2.2局部组件
# 定义在全局组件中的组件叫局部组件
# 语法：
<script>
// 定义一个全局组件，在全局组件中定义一个局部组件
Vue.component('child', {
template: `
<div>
<h1>我是子组件</h1>
<br>
<button @click="handleClick">点我看美女--{{name}}</button>
<hr>
<Header1></Header1> // 调用局部组件
</div>
`,
data() {
return {
name: 'lqz'
}
},
methods: {
handleClick() {
alert('美女，致命诱惑')
}
},
components:{ // 定义局部组件
'Header1':{
template:`<h2>我是局部组件---{{msg}}</h2>`,
data(){
return {
msg:'SB'
}
},
methods:{},
}
}
})
let vm = new Vue({
el: '#box',
data: {},
})
</script>
3 组件通信
3.1组件通信之父传子(不用)
# 通过自定义属性来传递
步骤：
①在标签上添加属性
②子组件中添加props属性
③开始使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件化开发</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
在组件上自定义属性，属性指定绑定好变量
<br>
<child :mymsg="msg" :age="age"></child>
<hr>
</div>
</body>
<script>
// 定义一个全局组件，在全局组件中定义一个局部组件
Vue.component('child', {
template: `
<div>
<h1>我是子组件---从父组件传值过来--{{mymsg}}---{{age}}</h1>
<br>
<button @click="handleClick">点我看美女--{{name}}</button>
<hr>
</div>
`,
data() {
return {
name: 'lqz'
}
},
methods: {
handleClick() {
alert('美女，致命诱惑')
}
},
props:['mymsg','age'] // 写属性名字
})
let vm = new Vue({
el: '#box',
data: {
msg:'我是父组件的数据',
age:999
},
})
</script>
</html>
3.2组件通信之子传父(不用)
# 通过在子组件的事件中调用父组件的事件，同时传参来实现数据传递
步骤：
1.父组件中定义事件
2.父组件调用子组件时使用自定义事件
3.在子组件中触发父组件的自定义事件并传参
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件化开发</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
<br>
<!-- 通过自定义事件,绑定方法-->
<child v-if="isShow" @myevent="handleShow"></child>
<hr>
</div>
</body>
<script>
// 定义一个全局组件，在全局组件中定义一个局部组件
Vue.component('child', {
template: `
<div>
<h1>我是子组件</h1>
<br>
<button @click="handleClick">点我消失和显示</button>
<hr>
</div>
`,
data() {
return {
b: false
}
},
methods: {
handleClick() {
//触发myevent的执行,把子组件中的变量b，传入到事件对应的方法上
this.$emit('myevent',this.b)
}
},
})
let vm = new Vue({
el: '#box',
data: {
isShow: true,
},
methods:{
handleShow(b){
this.isShow=b
}
}
})
</script>
</html>
3.3ref属性实现数据传递(推荐使用)
在Vue中通过 this.$refs.属性值 拿到的是
1.如果放在普通标签上，拿到的就是普通标签本身
2.如果放在子组件是，拿到的就是子组件对象
-通过组件对象，直接获取，修改属性，
-直接执行方法，传值，返回值
步骤：
①在组件标签上添加ref属性
②通过this.$refs.拿到该组件标签
③直接修改组件的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组件化开发</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="box">
<input type="text" ref="myinput" name="lqz">
<br>
<child ref="mychild"></child>
<hr>
<button @click="handleClick">点我试一下</button>
</div>
</body>
<script>
// 定义一个全局组件，在全局组件中定义一个局部组件
Vue.component('child', {
template: `
<div>
<h1 v-if="b">我是子组件</h1>
<br>
<button>点我消失和显示</button>
<hr>
</div>
`,
data() {
return {
b: true
}
},
methods: {
handle1(msg){
// alert(msg)
return 'lqz'
}
},
})
let vm = new Vue({
el: '#box',
data: {},
methods: {
handleClick() {
// console.log(this.$refs.myinput)
// console.log(this.$refs.mychild.b)
// this.$refs.mychild.b = !this.$refs.mychild.b
//调用子组件的方法
let res=this.$refs.mychild.handle1('致命诱惑')
console.log(res)
}
}
})
</script>
</html>
4 动态组件
4.1 基本使用
# 当有多个组件而且只渲染其中一个时，可以使用<component> 来选择要渲染的组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="box">
// who 是哪个组件就渲染哪个组件
<component :is="who"></component>
</div>
</body>
<script>
Vue.component('child1', {
template: `<div>
首页
</div>`,
})
Vue.component('child2', {
template: `<div>
商品
</div>`,
})
Vue.component('child3', {
template: `<div>
购物车
</div>`,
})
var vm = new Vue({
el: '#box',
data: {
who:'child1'
},
})
</script>
</html>
4.2 keep-alive的使用
# 当我们使用动态组件来回切换的时候，可使用<keep-alive>保存组件的状态，这样我们切换回来的时候，该组件还是原来的样子，例如input框输入的内容还在
# 使用方法
<keep-alive>
<component :is="who"></component>
</keep-alive>
Vue脚手架
1 脚手架安装和创建vue项目
# 就是vue项目的框架，vue中叫脚手架
# node的安装，官方下载，一路下一步
-node：python
-npm命令：pip
# 使用npm安装第三方模块，使用淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 以后用cnpm代替npm的使用
# 安装脚手架：cnpm install -g @vue/cli
# 创建vue项目
# 方式1：
vue create 项目名
# 方式2：
vue ui # 图形化界面的创建
2 项目目录介绍
mysecondvue # 项目名
-node_modules # 项目的依赖包 （类似于venv文件夹），可以删掉，给别人发一定要删除
-public # 文件夹
-favicon.ico # 网站小图标
-index.html # 整个网站的index页面，单页面开发
-src # 文件夹
-assets # 网站的静态文件和资源
-components # 一堆组件，小组件
-HelloWorld.vue # 自定义的组件
-router # vue-router相关
-index.js # js文件
-store # vuex相关，不用管了
-views # 一堆组件，页面组件
-Home.vue # 页面组件
-App.vue # 根组件
-main.js # 整个项目的入口，（对比settings.py）
-.gitignore # git相关，目前无用
-babel.config.js # 不用管
-package.json # 项目的依赖的包，类似于 requirments.txt
-package-lock.json # 后期node_modules删除了，依赖于这个文件安装模块 npm install
-README.md # 关于项目的介绍
# 以后写代码，都在src文件夹下写，其它地方一般不动
3 定义页面组件并注册
# vue是单网页的，在一个页面上使用不同组件来渲染不同样子。此时，一个页面组件就相当于一个页面，注册页面组件就相当于注册路由。
# 定义
# 添加页面组件就是在view文件夹下添加.vue文件
# views文件夹下的.vue文件就是页面组件，由3个部分构成
<template>
</template> # 里面只能有一个一级的div标签
<script>
</script>
<style>
</style>
# 注册
# 在router文件夹的index.js文件中注册
import Home from '../views/Home.vue' # 导入组件
const routes = [
{
path: '/', # 路由
name: 'Home', # 命名(没什么用，通常写组件名)
component: Home # 对应的组件
},
···]
4 导入导出语法
# vue中文件的引用一定要先导出、再导入
# 导出，新建一个utils.js文件，定义变量、方法，使用export default导出
const name = 'lqz' # 定义常量
export default { # 导出常量
'name': name,
}
# 导入，在任意js中，根据路径导入
-import utils from '../utils' # utils就是刚刚导出的对象
-使用：utils.name
5 定义小组件并使用
# 小组件就类似于子组件，在页面组件中使用
# 定义
# 定义在components文件夹下
# 内容和页面组件基本一样，script标签不同(为了导出)
<script>
export default {
name: 'HelloWorld',
data: {},
methods:{},
props: {
msg: String
}
}
</script>
# 使用
# 在页面组件中直接导入并使用
<template>
<div class="home">
<HelloWorld msg="Welcome to Your Vue.js App"/> # 使用
</div>
</template>
<script>
import HelloWorld from '@/components/HelloWorld.vue' # 导入
export default {
components: {
HelloWorld, # 声明子组件
}
}
</script>
6 axios的使用
1 下载：cnpm install axios -S
2 导入并直接使用
import http from 'axios'
http.get().then(res=>{})
引入jquery和bootstrap
#1 执行两条命令，安装
cnpm install jquery -S
cnpm install bootstrap@3 -S
#2 使用，在main.js中写代码
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
# 3 以后在 template中写bootstrap的样式即可
# 4 在项目根路径新建
# vue.config.js
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};
# 5 以后在js中使用
$.ajax({
url: 'http://127.0.0.1:5000/',
type: 'get',
success:(res)=> {
console.log(res)
}
}
)
Elementui的使用
引入element
# 方法不唯一，以下只是推荐用法
1.npm 安装：
npm i element-ui -S
2.引入 Element
在 main.js 中写入以下内容：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3.现在可以使用了
在页面组件中添加element的组件代码
作业
浙公网安备 33010602011771号