计算属性
1.如果使用{{函数()}}，每次页面刷新函数都会执行，会很消耗资源，如果放在computed中，只有变量发生变化，他才重新运算，使用时不需要加括号，{{属性}}即可
2.实例
<!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>
<input type="text" v-model="name">{{handleUpper()}}
<hr>
<input type="text" v-model="name1">{{upper}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '',
name1: '',
},
methods: {
handleUpper() {
// 只要页面刷新就会变化
console.log('页面刷新了')
// 截出首字母转成大写
return this.name.slice(0, 1).toUpperCase() + this.name.slice(1)
},
},
computed: {
upper() {
// 只要涉及到计算属性中使用的变量发生变化，他才重新运算
console.log('计算属性执行了')
return this.name1.slice(0, 1).toUpperCase() + this.name1.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="输入搜索内容" @input="handleSearch"></p>
<ul>
<li v-for="i in newdataList">{{i}}</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
search: '',
dataList: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'ab', 'abc'],
},
computed: {
newdataList() {
// 计算属性一定要return，计算属性的值就是我们return的值
return this.dataList.filter(i => i.indexOf(this.search) >= 0)
}
}
})
</script>
</html>
监听属性
1.当被监听属性发生变化，就执行一个函数
2.实例
<!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>
<span>
<button @click="type='物理'">物理</button>|<button @click="type='化学'">化学</button>|<button
@click="type='生物'">生物</button>
</span>
<br>
{{type}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
type: '物理',
},
watch:{
type(val){
console.log('修改后为:', val)
}
}
})
</script>
</html>
组件化开发
组件介绍
1.组件用于扩展html元素，封装可重用代码，目的是可以重复使用
2.定义组件
-全局组件:全局可以使用，可以用在任意其它组件中
-局部组件:局部组件只能在定义的位置(组件中)使用
- 全局、局部组件
<!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>
<abc></abc>
<hr>
</div>
</body>
<script>
// 定义全局组件，组件有自己的数据、方法、生命周期
var obj = {
template: `
<div>
<button>后退</button>
{{ title }}
<button @click="handleClick">前进</button>
</div>`,
data() {
return {
title: '标题',
}
},
methods: {
handleClick() {
alert('前进')
}
},
}
Vue.component('child', obj)
// 局部组件
var abc = {
template: `
<div>
<button>我是abc</button>
{{ name }}
<child1></child1>
<child></child>
</div>`,
data() {
return {name: 'abc'}
},
components: {
'child1': {
template: `<div>
<h2>anc内部的组件</h2>
</div>`
}
}
}
var vm = new Vue({
el: '#app',
data: {},
components: {
abc
}
})
</script>
</html>
父子通信之父传子
1.组件和组件之间的数据、方法都是隔离的，要进行通信才能使用
2.实例
<!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}}
<abc :myname="name"></abc>
</div>
</body>
<script>
// 局部组件
var abc = {
template: `
<div>
<h1>我是abc组件</h1>
{{ myname }}
</div>`,
props:['myname'],
created(){
console.log(this.name)
}
}
var vm = new Vue({
el: '#app',
data: {
name: 'barry',
},
components: {
abc
}
})
</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>
父组件的name值:{{name}}
<hr>
<abc @myevnet="handleEvent"></abc>
<hr>
</div>
</body>
<script>
// 局部组件
var abc = {
template: `
<div>
<button>我是abc组件</button>
<input type="text" v-model="name">{{ name }}
<br>
<button @click="handleClick">点击传name给父组件</button>
</div>`,
data() {
return {name: ''}
},
methods: {
handleClick() {
this.$emit('myevnet', this.name)
}
}
}
var vm = new Vue({
el: '#app',
data: {
name: 'barry'
},
methods: {
handleEvent(name) {
this.name = name
}
},
components: {
abc
}
})
</script>
</html>
ref属性
1.可以放在普通标签上，通过(this.$refs.自定义的名字)取到原生的dom对象，也可以使用原生dom对象操作
2.可以放在组件上:通过(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="handleClick">点我</button>
<hr>
<h1>ref属性放在组件上</h1>
<abc ref="myabc"></abc>
</div>
</body>
<script>
// 局部组件
var abc = {
template: `
<div>
<button>后退</button>
首页-{{ age }}-{{ show }}
<button @click="handleQJ">前进</button>
</div>`,
data() {
return {show: true, age: 20}
},
methods: {
handleQJ(){
alert('前进')
}
}
}
var vm = new Vue({
el: '#app',
data: {
name: 'barry'
},
methods: {
handleClick() {
console.log(this.$refs)
this.$refs.myabc.age = 666
this.$refs.myabc.show = false
this.$refs.myabc.handleQJ()
}
},
components: {
abc
}
})
</script>
</html>
动态组件
1.使用<keep-alive>包起来，内部的输入信息就会缓存起来，而不是销毁
2.实例
<!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>
<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>
// 定义三个全局组件
Vue.component('home',{
template: `
<div>
<h1>首页</h1>
</div>`,
})
Vue.component('goods',{
template: `
<div>
<h1>商品</h1>
<input type="text" placeholder="输入要搜索的商品">
</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://img2.baidu.com/it/u=3350501151,3749696733&fm=253&fmt=auto&app=138&f=JPEG?w=856&h=500"
width="200px" height="200px">
</home>
<hr>
<goods>
<div slot="bottom">
底部
</div>
<a href="" slot="top">点我看好看的</a>
</goods>
</div>
</body>
<script>
// 定义三个全局组件
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-cli介绍
'vue的脚手架：快速帮我们创建出vue的项目'
1.vue2 和 vue3
-vue-cli可以创建vue2和vue3的项目，创建项目慢运行项目也慢 webpack构建工具
-Vite：新一代构建工具，只能创建vue3
-vue3上，推荐使用ts写，不推荐js写
2.使用vue-cli需要先安装nodejs后端语言
-nodejs语法是js语法但不是js:js是运行在浏览器中，浏览器有它的解释器环境，不能运行在操作系统之上。把chrom浏览器的v8引擎，把它安装在操作系统上
-c语言写了内置库，这样就可以写文件操作、网络操作
3.下载官网
https://nodejs.org/zh-cn/download/
3.1安装完会释放两个命令(在环境变量中，任意路径都能敲这俩命令)
-node python3
-npm pip
-cnpm 等同于pip ，只是下模块，直接取淘宝镜像站下载，速度快
4.安装vue-cli，通过脚手架(vue-cli)创建vue项目
cnpm install -g @vue/cli
-只要装成功，又会多出一个可执行文件(vue)
4.1 -淘宝做了一个cnpm可执行文件，用来替换npm，以后所有使用npm的地方都换成cnpm即可
npm install -g cnpm --registry=https://registry.npm.taobao.org
5.创建vue项目
vue create myfirstvue
6.ide的选择(vscode，webstorm:jetbrains公司的，跟pycharm一家的，使用习惯一样)
-使用pycharm+vue插件也可以开发vue项目
7.运行vue项目
-方式一：在命令行中敲：npm run serve
-方式二：在pycharm中点击绿色箭头运行
