计算属性
1.computed--计算属性--只有涉及到计算属性中的变量发生变化 它才重新运算
2.不是计算属性--页面刷新就会变化
<body>
<div id="app">
<input type="text" v-model="name">
{{ handleUpper() }}
<input type="text" v-model="name1">
{{ handleDown }}
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
name: '',
name1:''
},
methods:{
handleUpper(){
console.log('我执行了111')
return this.name.slice(0, 1).toUpperCase() + this.name.slice(1)
},
},
computed:{
handleDown(){
console.log('我执行了222')
return this.name1.slice(0, 1).toUpperCase() + this.name1.slice(1)
}
}
})
</script>
3.案例--计算属性写过滤
<body>
<div class="app">
<p><input type="text" v-model="search" placeholder="请输入内容"></p>
<p v-for="item in newList">{{ item }}</p>
</div>
</body>
<script>
var vm=new Vue({
el: '.app',
data: {
search: '',
slist: [
a,
ab,
cc,
dc,
beds,
asdc
],
},
computed: {
newList() {
return this.slist.filter(item => {
return item.indexOf(this.search) >= 0
})
}
}
})
</script>
监听属性
1.watch--监听一个属性的变化，只要它发生变化，就执行一个函数
2.代码：
<body>
<div id="app">
<button @click="type='首页'">首页</button>
<button @click="type='商品页'">商品页</button>
<button @click="type='购物车'">购物车</button>
<br>
{{ type }}
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
type:'首页'
},
watch:{
type(val){
console.log(val)
}
}
})
</script>
组件介绍和定义
1.定义组件 （）
全局组件：全局可以使用，可以用在任意其它组件中
局部组件：局部组件只能在定义的位置(组件中)使用
1.1 定义全局组件 (必须在一个标签)，组件有自己的数据，方法，生周期.....
1.2 定义局部组件：
2.代码
<body>
<div id="app">
<h1>全局组件</h1>
<child></child>
<li></li>
</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 lili = {
template: `
<div>
<h1>我是tom组件</h1>
{{ name }}
<child1></child1>
<child></child>
</div>
`,
data(){
return{
name:'tom'
}
},
}
new Vue({
el:'#app',
data:{
},
component:{
lili
}
})
</script>
</html>
父子通信
父传子
1.父传子
自定义属性:myname
在组件中渲染自定义属性名
2.代码：
props:['myname',]完成父传子通信
<body>
<div id="app">
<lili :myname="name"></lili>
</div>
</body>
<script>
var lili={
template:`
<div>
<h1>我是lili组件</h1>
{{ myname }}
</div>
`,
props:['myname',]
}
new Vue({
el:'#app',
data:{
name:'kevin'
},
components:{
lili
}
})
</script>
子传父
1.子传父
子组件在父组件中自定义事件(需要传参数)：<lili @myevent="handleEvent">
子组件中执行点击事件：里面传自定义事件名与传的参数
methods:{
handleClick(){
this.$emit('myevent',this.name)
}},
父组件中执行自定义事件：
methods: {
handleEvent(name){
this.name=name
}},
2.代码：
<body>
<div id="app">
<h1>父子通信</h1>
{{ name }}
<lili @myevent="handleEvent"></lili>
</div>
</body>
<script>
var lili={
template:`
<div>
<h1>子组件lili</h1>
<input type="text" v-model="name">{{ name }}
<button @click="handleClick">提交获取子组件数据</button>
</div>
`,
data(){
return{
name:''
}
},
methods:{
handleClick(){
this.$emit('myevent',this.name)
}
},
}
new Vue({
el:'#app',
data:{
name:'kevin'
},
methods: {
handleEvent(name){
this.name=name
}
},
components:{
lili
}
})
</script>
ref属性
1.ref属性放在普通标签上：相当于dom操作
普通标签：--->{{ name }}
通过this.$refs.inputout(自定义ref属性名)获取原生dom对象
通过this.$refs.inputout.value='222'改值
2.ref属性放在组件上：
通过this.$refs.inputoutter(子组件中定义的ref属性名)获取vc对象(组件对象)
可以之间使用组件对象上的方法和属性---》子的数据给了父亲
父组件有个方法执行，需要传参数，传入子组件的数据---》子的数据给了父亲
-拿到子对象之间使用父中的数据修改----》父传子
3.代码：
<body>
<div id="app">
<h1>父组件</h1>
<input type="text" ref="inputout" v-model="name">--->{{ name }} //ref属性放在普通标签
<button @click="handleClick">提交</button>
<lili ref="inputoutter"></lili> //ref属性放在组件上
</div>
</body>
<script>
var lili={
template:`
<div>
<button>后退</button>
<span>点我</span>
{{ name }}---{{ age }}
<button @click="handleClick">前进</button>
</div>
`,
data(){
return{
name:'tom',
age:18
}
},
methods: {
handleClick(){
alert('123')
}
}
}
new Vue({
el:'#app',
data:{
name:'lili'
},
methods:{
handleClick(){
console.log(this.$refs)
this.$refs.inputout.value='222' //原生dom操作
this.$refs.inputoutter.name='tom' //父组件修改子组件数据
this.name=this.$refs.inputoutter.name //子组件修改父组件
}
},
components:{
lili
}
})
</script>
动态组件
1.通过
2.代码：
<body>
<div id="app">
<div>
<span @click="type='home'">首页</span>
<span @click="type='goods'">商品</span>
<span @click="type='car'">购物车</span>
</div>
{# <home></home> //可以通过v-if做判断显示#}
{# <goods></goods>#}
{# <car></car>#}
<div>
<component :is="type"></component>
</div>
</div>
</body>
<script>
Vue.component('home', {
template: `
<div>
<span>首页</span>
</div>`,
})
Vue.component('goods',{
template:`
<span>商品</span>
`}
)
Vue.component('car',{
template:`
<span>购物车</span>
`}
)
new Vue({
el:'#app',
data:{
type:'home'
}
})
</script>
keep-alive
1.keep-alive标签--保留组件数据不会销毁
2.代码：
<body>
<div id="app">
<div>
<span @click="type='home'">首页</span>
<span @click="type='goods'">商品</span>
<span @click="type='car'">购物车</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="请输入需要搜索的内容"><button>搜索</button>
</div>
`
})
Vue.component('car',{
template:`
<div>
<h1>购物车</h1>
</div>
`
})
new Vue({
el:'#app',
data:{
type:'home'
}
})
</script>
插槽
1.通过
2.具名插槽--多个插槽
3.代码：
<body>
<div id="app">
<home>
<img src="https://t13.baidu.com/it/u=2296451345,460589639&fm=224&app=112&size=w931&n=0&f=JPEG&fmt=auto?sec=1667235600&t=7ae0228c284af79b220539e31d60389d" alt="">
</home>
</div>
</body>
<script>
Vue.component('home',{
template:`
<div>
<h1>首页</h1>
<hr>
<slot>
</slot>
</div>
`
})
new Vue({
el:'#app',
data:{
}
})
</script>
vue-cli
1.vue的脚手架：快速帮我们创建出vue的项目
2.vue2 和 vue3
vue-cli可以创建vue2和vue3的项目 webpack构建工具
Vite：新一代构建工具
vue3上，推荐使用ts写 js
3.先安装nodejs 后端语言---》语法就是js的语法
js运行在浏览器中，浏览器中有它的解释器环境
不能运行在操作系统之上，把chrom浏览器的v8引擎，把它安装在操作系统上
c语言写了内置库：文件操作，网络操作
官网：https://nodejs.org/zh-cn/download/ ，下载，一路下一步
安装完会释放两个命令(在环境变量中，任意路径都能敲这俩命令)
-node python3
-npm pip
-cnpm 等同于pip ，只是下模块，直接取淘宝镜像站下载，速度快
4.安装vue-cli ，通过脚手架创建vue项目 （django--->django项目--->django-admin）
安装vue-cli：cnpm install -g @vue/cli
-只要装成功，又会多出一个可执行文件 vue
5.npm 下载时候，去国外，速度慢，使用国内镜像
淘宝做了一个cnpm可执行文件，用来替换npm，以后所有使用npm的地方都换成cnpm即可
安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org
6.创建vue项目：vue create myfirstvue
7.ide的选择（vscode，webstorm:jetbrains公司的，跟pycharm一家的，使用习惯一样）
选择使用pycharm+vue插件 开发vue项目
使用pycharm打开vue项目
8.运行vue项目
方式一：在命令行中敲：npm run serve
方式二：在pycharm中点击绿色箭头运行
9.安装axios：cnpm install axios
作业
1.获取所有图书接口drf写，处理跨域（响应头）前端vue项目首页，只要加载好就获取所有图书v-for循环显示在页面上
1.获取所有图书接口drf代码：
class BookViews(GenericAPIView):
queryset = Book.objects.all()
serializer_class = BookSerializer
def get(self, request):
book_list = self.get_queryset()
ser = self.get_serializer(instance=book_list, many=True)
return Response(ser.data, headers={'Access-Control-Allow-Origin': '*'})
2.vue显示：
<template>
<div class="home">
<div class="bs-example" data-example-id="striped-table">
<table class="table table-striped">
<thead>
<tr>
<th>序号</th>
<th>书名</th>
<th>价格</th>
<th>出版社</th>
</tr>
</thead>
<tbody>
<tr v-for="book in res">
<th>{{ book.id }}</th>
<td>{{ book.name }}</td>
<td>{{ book.price }}</td>
<td>{{ book.publish }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'HomeView',
data(){
return{res:''}
},
created() {
axios('http://127.0.0.1:8000/book/').then(res=>{
console.log(res)
this.res=res.data
console.log(this.res)
})
}
}
</script>
posted on
浙公网安备 33010602011771号