vue第五篇
文章目录
- 一、生命周期
- 二、swiper学习
-
- 1、swiper基础使用
- 2、自定义组件的封装
- 三、自定义指令
- 四、过滤器
- 五、单文件组件
- 六、vue-cli
-
- 项目目录介绍
一、生命周期
1 mounted用的最多：向后端发送请求，定时器初始化
2 destroyed：组件销毁--->给组件写一个定时器-->组件销毁，定时器清除
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js">script>
<title>Titletitle>
head>
<body>
<div id="box">
<child v-if="isShow">child>
{
{name}}
div>
body>
<script>
Vue.component('child', {
template: `
我是组件的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>
补充定时任务和延迟任务
setTimeout(function () {
alert(33333)
},3000) //延迟3s钟干什么事
setInterval(
function () {
alert(444)
},3000
) //每隔3s钟干什么事
二、swiper学习
1、swiper基础使用
官网：https://www.swiper.com.cn/
vue中的钩子函数：monunted和update
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js">script>
<script src="vue/vue.js">script>
<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 class="swiper-scrollbar">div>
div>
div>
body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist: []
},
mounted() {
//这里用的es6的箭头函数，this指代的是Vue实例
//若使用es6之前的版本，就得先将this赋值
//如：var _this = this
//setTimeout(function(){
// _this.datalist=[...]},3000)
setTimeout(() => {
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() {
var mySwiper = new Swiper('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
}
})
script>
html>
2、自定义组件的封装
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js">script>
<script src="vue/vue.js">script>
<style>
.swiper-container {
width: 60%;
height: 600px;
}
style>
head>
<body>
<div id="box">
<swipper :key="datalist1.length">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data in datalist1">
<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: `
三、自定义指令
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js">script>
<title>Titletitle>
head>
<body>
<div id="box">
<div v-mystyle="'green'"> 我是divdiv>
<div v-mystyle="'red'"> 我是divdiv>
<div v-mystyle="color"> 我是divdiv>
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>
四、过滤器
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="vue/vue.js">script>
<script src="https://unpkg.com/axios/dist/axios.min.js">script>
head>
<body>
<div id="box">
<ul>
<li v-for="item in datalist">
<h2>{
{item.nm}}h2>
<p>主演是：{
{item.star}}p>
<img :src="item.img | mychange" alt="">
li>
ul>
div>
body>
<script>
//方式二：定义过滤器
Vue.filter('mychange', function (url) {
return url.replace('w.h', '129.180')
})
var vm = new Vue({
el: '#box',
data: {
datalist:[]
},
//方式一中的函数,用具体数字替代w.h
// 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.movieList
}).catch(err=>{
console.log(抛出异常,err)
})
}
})
script>
html>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rzR4U0aC-1608297565219)(C:\Users\16093\AppData\Roaming\Typora\typora-user-images\image-20201218202835660.png)]
五、单文件组件
# 原来写的组件存在的问题
全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
# 以后每个组件就是一个 xx.vue-----最终----->html,css,js
并且还可以使用 webpack 构建工具
# CLI 会为你搞定大多数工具的配置问题
六、vue-cli
安装过程参考：http://www.xuexianqi.top/archives/731.html
1 安装node（昨天装了），官网下载，一路下一步----》node，npm
2 淘宝镜像（cnpm，）npm install -g cnpm --registry=https://registry.npm.taobao.org
3 装完以后，本地就有cnpm命令，以后再装模块，就使用cnpm安装
2 cnpm install -g @vue/cli # -g 全局安装
3 装完以后就会走vue命令
4 通过vue命令创建项目
vue create 项目名（命令行下创建项目）
vue ui (图形化界面，点点点创建项目)
-点一点就会（bable，eslint）
注意：
新建的这些项目的本质是：cli从git上给你拉了一个空项目（模板），以后再模板上继续写就可以了
5 注意
查看版本 vue --version
vue：2.x
bable：兼容性相关（es6的语法，自动转成es5兼容浏览器）
eslint：语法检查，代码格式化
6 运行项目
npm run serve :在浏览器中访问
7 使用ide打开编写
pycharm打开
项目目录介绍
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 格式化代码
}