Vue 入门
1. 生命周期
1. mounted(挂载 用的最多)
向后端发送请求，定时器初始化
2. destroyed(销毁)
组件销毁 => 给组件写一个定时器 => 组件销毁，定时器清除
//示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<child v-if="isShow"></child>
{{name}}
</div>
</body>
<script>
Vue.component('child', {
template: `
<div>我是组件的div</div>`,
data(){
return {
t:null,
}
},
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
//用的最多，向后端加载数据，创建定时器等
console.log("页面已被vue实例渲染, data, methods已更新");
console.log('mounted')
//起一个定时器，每隔三秒，打印一行
this.t = setInterval(function () {
console.log('daada')
}, 3000)
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('beforeDestroy')
},
destroyed() {
//组件销毁，清理定时器
clearInterval(this.t)
this.t = null
console.log('destroyed')
},
})
var vm = new Vue({
el: '#box',
data: {
name:'lqz',
isShow:true
},
beforeUpdate() {
console.log('根的---beforeUpdate')
},
updated() {
console.log('根的---updated')
},
})
</script>
</html>
2. 定时任务和延迟任务
setTimeout(function () {
alert(333)
},3000
) //延迟3s钟干什么事
setInterval(
function () {
alert(444)
},3000
)//每隔3s钟干什么事
3. swiper学习
# vue中的钩子函数
monunted 和 updated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<title>Title</title>
<style>
.swiper-container {
width: 60%;
height: 600px;
}
</style>
</head>
<body>
<div id="box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data in datalist">
<img :src="data" alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist: []
},
mounted() {
//大坑
setTimeout(() => {
//this指的是function这个函数
//使用了箭头函数以后，this指的是上一层
this.datalist = ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg']
}, 3000)
},
updated() {
//只要js数据发生变化，组件就会执行updated方法，轮播图又会重新创建
var mySwiper = new Swiper('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
},
})
</script>
</html>
4. 自定义组件的封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<title>Title</title>
<style>
.swiper-container {
width: 60%;
height: 600px;
}
</style>
</head>
<body>
<div id="box">
<swipper>
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data in datalist">
<img :src="data" alt="">
</div>
</div>
</swipper>
<hr>
<hr>
<br>
<swipper :key="datalist2.length">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data in datalist2">
{{data}}
</div>
</div>
</swipper>
</div>
</body>
<script>
Vue.component('swipper',{
template:`
<div class="swiper-container">
<slot></slot>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
`,
mounted() {
var mySwiper = new Swiper('.swiper-container', {
// 垂直切换选项
// direction: 'vertical',
// 循环模式选项
loop: true,
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
})
}
// updated() {
// //每次更新都会执行该代码，会耗费资源
// var mySwiper = new Swiper('.swiper-container', {
// // direction: 'vertical', // 垂直切换选项
// loop: true, // 循环模式选项
//
// // 如果需要分页器
// pagination: {
// el: '.swiper-pagination',
// },
//
// // 如果需要前进后退按钮
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
// })
// },
})
var vm = new Vue({
el: '#box',
data: {
datalist: [],
datalist2: []
},
mounted() {
//大坑
setTimeout(() => {
//this指的是function这个函数
//使用了箭头函数以后，this指的是上一层
this.datalist = ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg']
this.datalist2 = ['111','222','333','5555']
}, 3000)
},
updated() {
//只要js数据发生变化，组件就会执行updated方法，轮播图又会重新创建
},
})
</script>
</html>
5. 自定义指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<!-- <div v-mystyle> 我是div</div>-->
<!-- <p v-mystyle> 0pppp</p>-->
<!-- <p > sfasfsdafsd </p>-->
<div v-mystyle="'green'"> 我是div</div>
<div v-mystyle="'red'"> 我是div</div>
<div v-mystyle="color"> 我是div</div>
</div>
</body>
<script>
//自定义指令,不需要写v使用的时候，加上v-名字
// Vue.directive('mystyle', {
// inserted() { //在标签上使用这个指令，就会触发inserted的执行
// console.log('我执行了')
// },
// })
//只要使用了我的指令，背景就变红色
// Vue.directive('mystyle', {
// inserted(ev) { //ev就是dom对象
// ev.style.background='red'
// },
// })
//只要使用了我的指令，背景就变成我传入的颜色
Vue.directive('mystyle', {
inserted(ev, color) { //ev就是dom对象
console.log(ev)
console.log(color.value)
ev.style.background = color.value
},
update(el, input) {
el.style.background = input.value
}
})
var vm = new Vue({
el: '#box',
data: {
color: 'red'
},
})
</script>
</html>
6. 过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<ul>
<li v-for="item in datalist">
<h2>{{item.nm}}</h2>
<p>主演是：{{item.star}}</p>
<!-- <img :src="geturl(item.img)" alt="">-->
<img :src="item.img | repUrl" alt="">
</li>
</ul>
</div>
</body>
<script>
Vue.filter('repUrl', function (url) {
return url.replace('w.h', '128.180')
})
var vm = new Vue({
el: '#box',
data: {
datalist: null
},
methods: {
geturl(url) {
return url.replace('w.h', '129.180')
}
},
mounted() {
axios.get("http://127.0.0.1:5000/").then(res => {
console.log(res.data)
this.datalist = res.data.coming
}).catch(err => {
console.log(err);
})
}
})
</script>
</html>
7. 单文件组件
# 原来写的组件存在的问题
1. 全局定义 (Global definitions)
强制要求每个 component 中的命名不得重复
2. 字符串模板 (String templates)
缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
3. 不支持 CSS (No CSS support)
意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
4. 没有构建步骤 (No build step)
限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器
如 Pug (formerly Jade) 和 Babel
# 以后每个组件就是一个 xx.vue => 最终 => html,css,js
并且还可以使用 webpack 构建工具
# CLI 会为你搞定大多数工具的配置问题
8. vue-cli
1. vue-cli 安装
1. 安装node，官网下载，一路下一步 => node，npm
2. 淘宝镜像（cnpm，）npm install -g cnpm --registry=https://registry.npm.taobao.org
装完以后，本地就有cnpm命令，以后再装模块，就使用cnpm安装
cnpm install -g @vue/cli # -g 全局安装
3. 装完以后就会走vue命令
4. 通过vue命令创建项目
1. vue create 项目名（命令行下创建项目）
2. vue ui (图形化界面，点点点创建项目)
点一点就会（bable，eslint）
注意：
新建的这些项目的本质是：cli从git上给你拉了一个空项目（模板），以后再模板上继续写就可以了
5. 注意
vue： 2.x
bable： 兼容性相关（es6的语法，自动转成es5兼容浏览器）
eslint：语法检查，代码格式化
6. 运行项目
npm run serve: 在浏览器中访问
7. 使用ide打开编写
pycharm打开
2. 项目目录介绍
dist:
打包的项目目录(打包后会生成)
node_modules:
项目依赖(删掉，不上传git，使用npm install重新安装)
public: 共用资源
--favicon.ico
--index.html: 项目入口页面，单页面开发
src: 项目目标,书写代码的地方
-- assets:资源，静态图片
-- components:组件（swiper组件...）
-- views:视图组件(也是组件)
-- App.vue:根组件
-- main.js: 入口js
-- router.js: 路由文件
-- store.js: 状态库文件
vue.config.js:
项目配置文件(没有可以自己新建)
package.json：
项目配置依赖（等同于python项目的reqirement.txt）
"scripts": {
"serve": "vue-cli-service serve", npm run serve 运行项目
"build": "vue-cli-service build", npm run build 构建项目 => html，css，js
"lint": "vue-cli-service lint" npm run lint 格式化代码
}