DAY 75 vue03 

1 按键修饰符
    -@keyup.enter
​
    
2 数据双向绑定
    -v-model：input
3 单选和多选
    -checkbox=true
    -checkbox=[value,value]
    -radio=''   --->value值
4 购物车
    -基本的
    -带全选的
    -带加减的
5 v-model
    -lazy
    -number
    -trim
6 生命周期钩子
    -8个
    -mounted：定义再vue对象中的变量，函数，初始化完成了
7 前后端交互三种方式
    -jq的ajax（不建议使用）
    -fetch（内置：可能会有浏览器不支持）
    -axios：基于它再封装一层
    -跨域问题
        -后端解决（常用的）
        -前端使用代理（测试阶段，正式上线不会用）
        -nginx转发
        
8 计算属性
    computed：写个函数，函数名，直接当变量用
9 虚拟dom替换的diff算法

 

1 组件化开发介绍

扩展 HTML 元素，封装可重用的代码，目的是复用
    -例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
    -组件把js，css，html放到一起，有逻辑，有样式，有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">
    <myhead></myhead>
​
​
    <hr>
​
    <myhead></myhead>
​
</div>
</body>
​
<script>
​
​
    Vue.component('myhead', {
        template: `
            <div>
                    <button @click="handleClick">我是个按钮：点我看美女</button>
                    <button>我又是一个按钮</button>
            </div>
​
        `,
        methods: {
            handleClick(){
                alert('美女')
            }
        },
    })
​
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
​
​
        }
    })
</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">
    <myhead></myhead>
​
​
    <hr>
​
​
​
​
</div>
</body>
​
<script>
​
​
    Vue.component('myhead', {
        template: `
            <div>
                <button @click="handleClick">我是个按钮：点我看美女</button>
                <button>我又是一个按钮--{{name}}</button>
                {{show}}
                <hr>
                看到美女了
                <child></child>
            </div>
​
        `,
        methods: {
            handleClick() {
                alert('美女')
            }
        },
        components:{
            child:{
                template:`
                <div>
                    <img src="./img/1.jpg" alt="" v-show="show" height="60px" width="60px">
                    <button @click="handleRemove">点我图片消失</button>
                </div>
                `,
                data(){
                    return {
                        show:true
                    }
                },
                methods:{
                    handleRemove(){
                        this.show=!this.show
                    }
                }
            }
        },
        data(){
            return {name:'lqz'}
        },
    })
​
​
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {}
    })
</script>
​
</html>

 

3 组件间通信

3.1 父传子

在子组件上新增属性

<myhead myname="lqz"></myhead>

在子组件中：定义，myname要跟新增的属性名一致

props:['myname']

在子组件中就可以使用myname变量了，从父组件传入的

注意加不加:的区别

<myhead :myname="lqz"></myhead>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
​
</head>
<body>
​
<div id="app">
<!--    <myhead myname="lqz"></myhead>-->
​
<!--    <hr>-->
<!--    <myhead :myname="name"></myhead>-->
​
    <hr>
    <myhead :mybool="false"></myhead>
​
​
</div>
</body>
​
<script>
​
​
    Vue.component('myhead', {
        template: `
            <div>
                <button>我是按钮</button>
                我的名字是：
                <br>
                传入的布尔值是：{{typeof mybool}}
            </div>
​
        `,
​
        // props:['myname','mybool']
        //类型限制
        props: {
            mybool: Boolean,
        }
​
    })
​
​
    var vm = new Vue({
        el: '#app',
        data: {
            name: '迪丽热巴'
        },
​
​
    })
</script>
​
</html>

3.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">
​
    <myhead @myevent="handleParent" @egon="handleEgon"></myhead>
​
​
</div>
</body>
​
<script>
​
​
    Vue.component('myhead', {
        template: `
            <div>
                <button @click="handleChild">我是按钮</button>
            </div>
​
        `,
        data(){
            return {
                n:100,
                m:200
            }
        },
        methods:{
            handleChild(){
                console.log('子组件的按钮被点击了')
                // this.$emit('myevent') //触发自定义的事件执行（触发myevent的执行）
                // this.$emit('myevent',this.n,this.m) //触发自定义的事件执行（触发myevent的执行）
                // this.$emit('egon')
            }
        },
        mounted(){
             this.$emit('egon')
        }
​
​
    })
​
​
    var vm = new Vue({
        el: '#app',
        data: {
            n:0,
            m:0,
        },
        methods:{
            handleParent(n,m){
                console.log('自定义的事件执行了')
                this.n=n
                this.m=m
                console.log(n)
                console.log(m)
​
            },
            handleEgon(){
                console.log('egon被打了')
            }
        }
​
​
    })
</script>
​
</html>

3.2 通过ref实现父子通信

<!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" placeholder="我是父组件的1" ref="myinput">
    <input type="text" placeholder="我是父组件的2" ref="myinput2">
    <input type="password" placeholder="我是父组件的3" ref="myinput3">
    <button @click="handleParentButton">点我执行一个函数</button>
    <hr>
​
    <myhead ref="mychild"></myhead>
​
​
</div>
</body>
​
<script>
​
​
    Vue.component('myhead', {
        template: `
            <div>
                <button>我是按钮</button>
            </div>
​
        `,
        data(){
            return {
                name:'lqz'
            }
        },
        methods:{
            tgc(name){
                this.name=name
                alert(name)
                
            }
        },
​
​
​
    })
​
​
    var vm = new Vue({
        el: '#app',
        data: {
​
        },
        methods:{
            handleParentButton(){
                console.log('父组件的button按钮被点击了')
                //
                // console.log(this.$refs.myinput3.value)
                // console.log(this.$refs.myinput3.type)
                console.log(this.$refs.mychild.tgc('lqz is big'))
            }
        }
​
​
    })
    //ref属性如果加在普通标签上，通过this.$refs.myinput，取到的就是这个标签
    //ref属性如果加在组件上，通过this.$refs.mychild，取到的就是这个组件,拿到组件的值，拿到组件的方法，并且可以执行
</script>
​
</html>

3.3 通过事件总线实现组件通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
​
</head>
<body>
​
<div id="app">
    <myhead></myhead>
    <hr>
    <child1></child1>
​
</div>
</body>
​
<script>
​
    // 定义一个事件总线
    var bus = new Vue() //new一个vue的实例，就是中央事件总线
​
​
    Vue.component('myhead', {
        template: `
            <div>
                <button>我是按钮</button>
                来自另一个组件的数据:  <span v-text="recv"></span>
            </div>
​
        `,
        mounted() {
            //生命周期，当前组件dom创建完后悔执行
            console.log('当前组件dom创建完后悔执行')
            //订阅消息
            bus.$on('suibian', (item) => {
                console.log('收到了', item)
                this.recv=item
​
            })
        },
        data(){
            return {
                recv:''
            }
        }
​
​
    })
​
    Vue.component('child1', {
        template: `
            <div>
                <input type="text" v-model="input_1">
                <button @click="handleClick">点我</button>
            </div>`,
        methods: {
            handleClick() {
                bus.$emit('suibian', this.input_1) //发布消息，名字跟订阅消息名一致
            }
        },
        data(){
            return {
                input_1:''
            }
        }
    })
​
​
    var vm = new Vue({
        el: '#app',
        data: {},
​
​
    })
    //ref属性如果加在普通标签上，通过this.$refs.myinput，取到的就是这个标签
    //ref属性如果加在组件上，通过this.$refs.mychild，取到的就是这个组件,拿到组件的值，拿到组件的方法，并且可以执行
</script>
​
</html>

 

4 动态组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>

<div id="app">
    <button @click="who='myhead1'">显示组件1</button>
    <button @click="who='myhead2'">显示组件2</button>
    <button @click="who='myhead3'">显示组件3</button>

    <keep-alive>
        <component :is="who"></component>
    </keep-alive>

</div>
</body>

<script>


    Vue.component('myhead1', {
        template: `
            <div>
                <button> myhead1的按钮</button>
                <div>
                我是组件1111的样子
                </div>
            </div>

        `,

    })
    Vue.component('myhead2', {
        template: `
            <div>
                <button >myhead2的按钮</button>
                 <div>
                我是组件222的样子
                <input type="text">
                </div>
            </div>

        `,

    })
    Vue.component('myhead3', {
        template: `
            <div>
                <button >myhead3的按钮</button>
                           <div>
                我是组件333的样子
                <button>点我</button>
                <hr>
                <span>xxx</span>
                </div>
            </div>

        `,

    })


    var vm = new Vue({
        el: '#app',
        data: {
            who: 'myhead1'
        },


    })
    //ref属性如果加在普通标签上，通过this.$refs.myinput，取到的就是这个标签
    //ref属性如果加在组件上，通过this.$refs.mychild，取到的就是这个组件,拿到组件的值，拿到组件的方法，并且可以执行
</script>

</html>

5 vue-cli创建项目

1 安装node环境：最新是14
	-跟python比较
    -node    python
    -npm     pip3
    -安装cnpm，淘宝做的npm，以后使用npm的地方，都是用cnpm
2 安装cli脚手架
	-cnpm install -g @vue/cli
    
3 创建项目
    vue create my-project # 命令行
    # OR
    vue ui  #图形化界面

 

 

 

6 目录介绍

 

node_moduls:当前项目依赖的所有第三方包，把项目给别人，这个文件夹删掉
    	-npm install  就会又把依赖装上
        -pi3 install -r request.txt
        
public:(你不用动)
    index.html  单页面开发（整个vue项目就这一个页面）
    favicon.ico  网站图标
src：（经常动，你的所有代码）
    assets ：静态资源，图片，js，css
    components：组件，小组件
    router：装了Router才有，否则没有，页面跳转
    store：vuex才有的，状态管理器
    views：组件，页面组件
    App.vue  根组件
    main.js  整个项目的入口js
.gitignore  # git的忽略文件，讲到git才知道
babel.config.js # 不用动
package.json     #依赖的模块
package-lock.json #依赖的模块
README.md      # 介绍

重点

每一个组件都有三部分
#html内容写在这
<template>
    <div class="home">

    </div>
</template>


#js内容
<script>
    export default {
      name: 'Home',
      data(){
          return {
             a:'asdfasdfasdfasdfasd'
          }

      },

    }
</script>

#style的内容
<style>
    
</style>

把vue项目编译成纯html，css，js

webpack:模块化
npm run build
在项目路径下有个dist文件夹：html，css，js
posted @ 2021-06-17 15:58  DEJAVU_ERIC  阅读(24)  评论(0)  编辑  收藏  举报