计算属性

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>

标签：vue,name,04,Vue,template,组件,data
From： https://www.cnblogs.com/040714zq/p/16841916.html

vue-04