Vue组件与Vue cli脚手架安装方法超详细讲解

Vue
301
0
0
2023-06-10
Vue悬浮窗和聚焦登录组件功能实现
上一篇
Vue如何监测数组类型数据发生改变的(推荐)
下一篇
标签   Vue组件
目录
  • 计算属性
  • 监听属性
  • 组件介绍和定义
  • 父子通信
  • 父传子
  • 子传父
  • ref属性
  • 动态组件
  • 插槽
  • vue-cli

计算属性

计算属性关键字：computed

每次页面刷新都会重新加载数据，而我们有时候退出页面再返回页面后希望保持原来选择商品的价格总价，这是就可以运用到计算属性：只有涉及到计算属性中使用的变量发生变化它才会重新运算

<body>
<div id="app">
    <input type="text" v-model="name"> ---》》 {{handleUpper()}}
    <hr>
    <input type="text" v-model="name">--->{{upper}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            name: ''
        },
        methods: {
            handleUpper() {
                // 只要页面刷新就会变化
                console.log('我执行了')
            }
        },
        computed: {
            upper() {
                console.log('我执行了计算属性')
            }
        }
    })
</script>
</html>

监听属性

监听属性关键字：watch

当监听的属性发生变化时，会自动调用回调函数执行相关操作

<body>
<div id="app">
    <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('向后端加载数据了')
            }
        }
    })
</script>
</html>

组件介绍和定义

组件的介绍

为了提高代码的可重用性，减少代码的重复开发，我们可以把代码封装到一个自定义标签内。以.vue结尾的文件一般由三部分组成：template、script、style

- 组件导出：export default{}

- 组件导入：import Hello World from“./components/HelloWorld.vue”

组件定义

- 全局组件：全局可以使用，可以用在任意其它组件中

<div id="app">
    <h>全局组件</h1>
    <child></child>
</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)
</script>

- 局部组件：局部组件只能在定义的位置(组件中)使用

<body>
<div id="app">
    <h>局部组件</h1>
    <part></part>
    <hr>
</div>
</body>
<script>
var part = {
        template: `
          <div>
          <h>我是part组件</h1>
          {{ name }}
          <child></child3>
          </div>`,
        data() {
            return {
                name: 'part'
            }
        },
        components: {
            'child': {
                template: `
            <div>
              <h>我是lqz组件内的组件</h2>
              </div>`,
            }
        }
    }
    var vm = new Vue({
        el: '#app',
        data: {},
        components: {
            part
        }
    })
</script>

父子通信

父传子

父子组件可以理解为组件中再嵌套一个组件，他们的定义和普通组件是一样的只是多了一个嵌套；父组件中需要声明子组件，引入子组件对象

ps：无论是哪种类型的组件每个组件都相当于一个完整的vue实例，组件与组件之间的数据是不互通的

- 子组件使用父组件数据关键字：props

<div id="app">
    <h>自定义事件实现父子通信之子传父</h1>
    父组件中的name值为：{{name}}
    <hr>
    <lqz @myevnet="handleEvent"></lqz>
    <hr>
</div>
</body>
<script>
    var child= {
        template: `
          <div>
          <h>我是a组件</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: {
            child
        }
    })
</script>

子传父

- 子组件向父组件传递必须通过自定义事件来完成

<div id="app">
    <!--子组件中监听自定义事件，随便起名-->
    <navbar @myevent="handleClick($event)"></navbar>
</div>
</body>
<script>
    Vue.component('navbar', {
        template: `
            <div>
                <button>返回</button>
                组件
                <button @click="handleEvent">点击按钮把子组件数据传递到父组件</button>
                <br>
            </div>
        `,
        data(){
            return {
                name:'abc'
            }
        },
        methods:{
            handleEvent(){
                // this.$emit('myevent') //myevent:子组件中监听自定义事件
                this.$emit('myevent',) //100表示传递的参数
            }
        }
    })
    var vm = new Vue({
        el: '#box',
        data: {},
        methods:{
            handleClick(ev){
                console.log('点击子组件，我会执行')
                console.log(ev)
            }
        }
    })
</script>

ref属性

可以放在普通标签上，通过this.$refs.自定义的名字取到的是 原生的dom对象

- 使用原生dom操作了(不推荐)

可以放在组件上：通过this.$refs.自定义的名字取到的是 vc对象(组件对象)，

可以之间使用组件对象上的方法和属性---》子的数据给了父亲

- 父组件有个方法执行，需要传参数，传入子组件的数据---》子的数据给了父亲

- 拿到子对象之间使用父中的数据修改----》父传子

<body>
<div id="app">
    <h>ref属性放在普通标签上</h1>
    <input type="text" ref="myinput" v-model="name">====>{{name}}
    <br>
    <button @click="handlePrint">点我，打印点东西</button>
    <hr>
</div>
</body>
<script>
    var abc = {
        template: `
          <div>
          <button>后退</button>
          首页--{{ age }}---{{ show }}
          <button @click="handleQJ('大帅哥')">前进</button>
          </div>`,
        data() {
            return {
                show: true,
                age:
            }
        },
        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=
                // this.$refs.mylqz.show = false
                // this.$refs.mylqz.handleQJ()
                // this.name=this.$refs.mylqz.age
                this.$refs.mylqz.handleQJ(this.name)
            }
        },
        components: {
            abc
        }
    })
</script>

动态组件

点击不同的标签展示不同的组件

<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>
    // 定义三个全局组件
    Vue.component('home', {
        template: `
        <div>
            <h>首页</h1>
        </div>`,
    })
    Vue.component('goods', {
        template: `
        <div>
            <h>商品</h1>
        </div>`,
    })
    Vue.component('order', {
        template: `
        <div>
            <h>订单</h1>
        </div>`,
    })
    var vm = new Vue({
        el: '#app',
        data: {
            type: 'home'
        },
    })
</script>

插槽

简单理解就是组件内部留一个或多个的插槽位置，可供组件传对应的模板代码进去。插槽的出现，让组件变的更加灵活

<body>
<div id="app">
    <h>插槽的使用</h1>
    <home>
        <img src="美女.jpg" width="px" height="200px">
    </home>
    <hr>
    <home>
        <div>我是div</div>
    </home>
    <hr>
    <goods>
        <div slot="bottom">
            我是底部
        </div>
        <a href="" slot=" rel="external nofollow" 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>

vue-cli

Vue-cli是vue官方出品的快速构建单页应用的脚手架，能快速的帮我们创建出vue2和vue3项目------->>>目前新一代构建工具：Vite创建vue3项目推荐使用ts写

第一步先安装nodejs后端语言

- 官网：https://nodejs.org/zh-cn/download/

- 安装完释放两个命令：node、npm等同于python3和pip

- npm下载得去国外速度慢可以直接取淘宝镜像站下载cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

第二步安装vue-cli

- 安装成功会多出一个可执行文件 vue

cnpm install -g @vue/cli

- 创建vue项目

vue create 项目名

第三步ide的选择

- vscode、webstorm：跟pycharm同公司使用比较友好

第四步安装axios

- 选择自定义：Manually select features

- 通过上下键选择空格选中或取消：Babel、Router、Vuex其它都不要选

- 选择版本号：3.x、2.x

- 选择In package.json来做包管理 

Vue悬浮窗和聚焦登录组件功能实现
上一篇
Vue如何监测数组类型数据发生改变的(推荐)
下一篇