一、计算属性
计算属性实现首字母大小写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <input type="text" v-model="name"> -----------–> {{ //name.slice(0, 1).toUpperCase() + name.slice(1)}}-->
<input type="text" v-model="name"> -------------> {{handlerUpper()}}
<hr>
<input type="text" v-model="name2"> -------------> {{upper}}
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
name: '',
name2: '',
},
methods: {
handlerUpper() {
// 只要页面刷新就会发生变化
console.log('重新定义了一个input,但我每次都会执行,气不气')
return this.name.slice(0, 1).toUpperCase() + this.name.slice(1)
}
},
computed: {
upper() {
// 只有涉及到计算属性中使用的变量发生变化时,它才会重新运算
console.log('执行了计算属性')
return this.name2.slice(0, 1).toUpperCase() + this.name2.slice(1)
}
}
})
</script>
</html>
计算属性重写过滤案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>过滤案例</h1>
<p><input type="text" v-model="search" placeholder="请输入要搜索的内容"></p>
<ul>
<li v-for="item in newList">{{item}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
search: '',
dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'd', 'day', 'data', 'e', 'eye'],
},
computed: {
newList() {
// 计算属性必须要return出去,因为计算属性的值就是return出去的值
return this.newList = this.dataList.filter(item => item.indexOf(this.search) >= 0)
}
}
})
</script>
二、监听属性
# 监听一个属性的变化,只要它发生变化,就执行一个函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<span> <button @click="type='人文历史'">人文历史</button>|<button @click="type='走进科学'">走进科学</button>|<button
@click="type='生活与自然'">生活与自然</button></span>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
type: '人文历史',
},
watch: {
type(val) {
console.log('修改后变成了', val)
console.log('向后端加载了数据')
}
}
})
</script>
</html>
三、组件介绍与定义
# 扩展 HTML 元素,封装可重用的代码,目的是复用
-例如:有一个轮播,可以在很多页面中使用,一个轮播有js,css,html
-组件把js,css,html放到一起,有逻辑,有样式,有html
# 定义组件 ()
-全局组件:全局可以使用,可以用在任意其它组件中
-局部组件:局部组件只能在定义的位置(组件中)使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>全局组件</h1>
<child></child>
<hr>
<h1>局部组件</h1>
<jason></jason>
</div>
</body>
<script>
// 定义全局组件 (必须在一个标签中),组件有自己的数据、方法、生命周期.....
var obj = {
template: `
<div>
<button>前进</button>
{{ title }}
<button @click="handlerClick">后退</button>
</div>`,
data() {
return {
title: '谁的青春不迷茫'
}
},
methods: {
handlerClick() {
alert('执行了')
}
}
}
Vue.component('child', obj)
// 定义局部组件
var jason = {
template: `
<div>
<h1>我是局部组件</h1>
{{ name }}
</div>`,
data() {
return {
name: 'jason'
}
}
}
var vm = new Vue({
el: '#app',
data: {},
components: {
jason
}
})
</script>
四、父子通信之父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>自定义属性实现父子通信</h1>
<jason :myname="name"></jason>
</div>
</body>
<script>
// 定义局部组件
var jason = {
template: `
<div>
<h1>我是局部组件</h1>
{{ myname }}
</div>`,
props: ['myname']
}
var vm = new Vue({
el: '#app',
data: {
name: '胡歌',
},
components: {
jason
}
})
</script>
五、父子通信之子传父
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>自定义事件实现父子通信之子传父</h1>
父组件中的name值为:{{name}}
<hr>
<lqz @myevnet="handleEvent"></lqz>
<hr>
</div>
</body>
<script>
var lqz = {
template: `
<div>
<h1>我是jason组件</h1>
<input type="text" v-model="name"> ---》{{ name }}
<br>
<button @click="handleSend">点我把name传给父组件</button>
</div>`,
data() {
return {
name: ''
}
},
methods: {
handleSend() {
// alert('我被执行了')
// 在这里,触发自定义事件的执行
this.$emit('myevnet', this.name)
}
}
}
var vm = new Vue({
el: '#app',
data: {
name: '刘亦菲'
},
methods: {
handleEvent(name) {
this.name = name
}
},
components: {
jason
}
})
</script>
</html>
六、ref属性
# ref属性,vue定义的
-可以放在普通标签上,通过this.$refs.自定义的名字取到的是 原生的dom对象
-使用原生dom操作了(不推荐)
-可以放在组件上:通过this.$refs.自定义的名字取到的是 vc对象(组件对象),
-可以之间使用组件对象上的方法和属性---》子的数据给了父亲
-父组件有个方法执行,需要传参数,传入子组件的数据---》子的数据给了父亲
-拿到子对象之间使用父中的数据修改----》父传子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>ref属性放在普通标签上</h1>
<input type="text" ref="myinput" v-model="name">====>{{name}}
<br>
<button @click="handlePrint">点我,打印点东西</button>
<hr>
<h1>ref属性放在组件上</h1>
<lqz ref="myjason"></lqz>
</div>
</body>
<script>
var lqz = {
template: `
<div>
<button>后退</button>
首页--{{ age }}---{{ show }}
<button @click="handleQJ('迪丽热巴')">前进</button>
</div>`,
data() {
return {
show: true,
age: 19
}
},
methods: {
handleQJ(name) {
alert(name)
}
}
}
var vm = new Vue({
el: '#app',
data: {
name: '刘亦菲'
},
methods: {
handlePrint() {
//this.$refs.myinput 原生dom对象
// this.$refs.myinput.value='xxxxxx'
console.log(this.$refs)
// this.$refs.mylqz.age=999
// this.$refs.mylqz.show = false
// this.$refs.mylqz.handleQJ()
// this.name=this.$refs.mylqz.age
this.$refs.mylqz.handleQJ(this.name)
}
},
components: {
jason
}
})
</script>
</html>
七、动态组件
# 动态组件
# 小案例:点击不同标签,显示不同组件
基本使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<span @click="type='home'">首页</span>|
<span @click="type='goods'">商品</span>|
<span @click="type='order'">订单</span>
</div>
<div>
<component :is="type"></component>
</div>
</div>
</body>
<script>
// 1 定义三个全局组件
Vue.component('home', {
template: `
<div>
<h1>首页</h1>
</div>`,
})
Vue.component('goods', {
template: `
<div>
<h1>商品</h1>
</div>`,
})
Vue.component('order', {
template: `
<div>
<h1>订单</h1>
</div>`,
})
var vm = new Vue({
el: '#app',
data: {
type: 'home'
},
})
</script>
</html>
keep-alive使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<span @click="type='home'">首页</span>|
<span @click="type='goods'">商品</span>|
<span @click="type='order'">订单</span>
</div>
<div>
<keep-alive>
<component :is="type"></component>
</keep-alive>
</div>
</div>
</body>
<script>
// 1 定义三个全局组件
Vue.component('home', {
template: `
<div>
<h1>首页</h1>
</div>`,
})
Vue.component('goods', {
template: `
<div>
<h1>商品</h1>
<input type="text" placeholder="请输入要搜索的商品"> <button>搜索</button>
</div>`,
})
Vue.component('order', {
template: `
<div>
<h1>订单</h1>
</div>`,
})
var vm = new Vue({
el: '#app',
data: {
type: 'home'
},
})
</script>
</html>
八、插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>插槽的使用</h1>
<home>
<img src="https://img0.baidu.com/it/u=4199141691,520618081&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" width="200px" height="200px">
</home>
<hr>
<home>
<div>我是div</div>
</home>
<hr>
<goods>
<div slot="bottom">
我是底部
</div>
<a href="" slot="top">点我看美女</a>
</goods>
</div>
</body>
<script>
// 1 定义三个全局组件
Vue.component('home', {
template: `
<div>
<button>后退</button>
<span>首页</span>
<button>前进</button>
<hr>
<slot></slot>
</div>`,
})
Vue.component('goods', {
template: `
<div>
<slot name="top"></slot>
<hr>
<button>后退</button>
<span>首页</span>
<button>前进</button>
<hr>
<slot name="bottom"></slot>
</div>`,
})
var vm = new Vue({
el: '#app',
data: {
type: 'home'
},
})
</script>
</html>
九、vue-cli
# vue的脚手架:快速帮我们创建出vue的项目
# vue2 和 vue3
-vue-cli可以创建vue2和vue3的项目 webpack构建工具
-Vite:新一代构建工具,速度快、效率高
-vue3上,推荐使用ts写
# 先安装nodejs 后端语言---》语法就是js的语法
-js运行在浏览器中,浏览器中有它的解释器环境
-但是它不能运行在操作系统之上,后来有人把chrom浏览器的v8引擎,安装在了操作系统上
-c语言写了内置库:文件操作,网络操作
-官网:https://nodejs.org/zh-cn/download/ ,下载,一路下一步
-安装完会释放两个命令(在环境变量中,任意路径都能敲这俩命令)
-node python3
-npm pip
-cnpm 等同于pip ,只是下模块,直接取淘宝镜像站下载,速度快
# 安装vue-cli ,通过脚手架创建vue项目 (django--->django项目--->django-admin)
cnpm install -g @vue/cli
-只要装成功,又会多出一个可执行文件 vue
# npm 下载时候,去国外,速度慢,使用国内镜像
-淘宝做了一个cnpm可执行文件,用来替换npm,以后所有使用npm的地方都换成cnpm即可
-安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 创建vue项目
vue create myfirstvue
# ide的选择(vscode,webstorm:jetbrains公司的,跟pycharm一家的,使用习惯一样)
-选择使用pycharm+vue插件 开发vue项目
-使用pycharm打开vue项目
# 运行vue项目
-方式一:在命令行中敲:npm run serve
-方式二:在pycharm中点击绿色箭头运行
#cnpm install axios
安装node.js
# 官网:https://nodejs.org/zh-cn/download/ ,下载对应软件包,一路下一步安装即可