• Vue组件与Vue-cli脚手架安装

    计算属性

    ∙ 计算属性关键字：computed

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

    1. <body>
    2. <div id="app">
    3.     <input type="text" v-model="name"> ---》》 {{handleUpper()}}
    4.     <hr>
    5.     <input type="text" v-model="name2">--->{{upper}}
    6. div>
    7. body>
    8.  
    9. <script>
    10.     var vm = new Vue({
    11.         el: '#app',
    12.         data: {
    13.             name: '',
    14.             name2: ''
    15.         },
    16.         methods: {
    17.             handleUpper() {
    18.                 // 只要页面刷新就会变化
    19.                 console.log('我执行了')
    20.             }
    21.         },
    22.         computed: {
    23.             upper() {
    24.                 console.log('我执行了计算属性')
    25.             }
    26.         }
    27.     })
    28. script>
    29. html>

    监听属性

    ∙ 监听属性关键字：watch

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

    1. <body>
    2. <div id="app">
    3.     <span> <button @click="type='人文'">人文button>|<button @click="type='社科'">社科button>|<button
    4.             @click="type='地理'">地理button>span>
    5.     <br>
    6.     {{type}}
    7. div>
    8. body>
    9.  
    10. <script>
    11.     var vm = new Vue({
    12.         el: '#app',
    13.         data: {
    14.             type: '人文',
    15.         },
    16.         watch: {
    17.             type(val) {
    18.                 console.log('向后端加载数据了')
    19.             }
    20.         }
    21.     })
    22. script>
    23. html>

    组件介绍和定义

    ∙ 组件的介绍

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

    - 组件导出：export default{}

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

    ∙ 组件定义

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

    1. <div id="app">
    2.     <h1>全局组件h1>
    3.     <child>child>
    4. div>
    5. body>
    6. <script>
    7.     // 1 定义全局组件 (必须在一个标签)，组件有自己的数据，方法，生周期.....
    8.     var obj = {
    9.         template: `
    10.           
    11.           
    12.           {{ title }}
    13.           
    14.           
      `,
  • data() {
  • return {
  • title: '标题'
  • }
  • },
  • methods: {
  • handleClick() {
  • alert('前进')
  • }
  • },
  • }
  • Vue.component('child', obj)
  • script>

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

    1. <body>
    2. <div id="app">
    3.     <h1>局部组件h1>
    4.     <part>part>
    5.     <hr>
    6.  
    7. div>
    8. body>
    9. <script>
    10. var part = {
    11.         template: `
    12.           <div>
    13.           <h1>我是part组件h1>
    14.           {{ name }}
    15.           <child3>child3>
    16.           div>`,
    17.         data() {
    18.             return {
    19.                 name: 'part'
    20.             }
    21.         },
    22.         components: {
    23.             'child3': {
    24.                 template: `
    25.             <div>
    26.               <h2>我是lqz组件内的组件h2>
    27.               div>`,
    28.             }
    29.         }
    30.     }
    31.     var vm = new Vue({
    32.         el: '#app',
    33.         data: {},
    34.         components: {
    35.             part
    36.         }
    37.  
    38.     })
    39. script>

    父子通信

    ∙ 父传子

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

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

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

    1. <div id="app">
    2.     <h1>自定义事件实现父子通信之子传父h1>
    3.     父组件中的name值为：{{name}}
    4.     <hr>
    5.     <lqz @myevnet="handleEvent">lqz>
    6.     <hr>
    7.  
    8. div>
    9. body>
    10. <script>
    11.  
    12.  
    13.     var child= {
    14.         template: `
    15.           
    16.           
      我是a组件
    17.            ---》{{ name }}
    18.           
    19.           
    20.           
      `,
  • 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>

    • ∙ 子传父

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

    1. <div id="app">
    2.     
    3.     <navbar @myevent="handleClick($event)">navbar>
    4. div>
    5. body>
    6. <script>
    7.     Vue.component('navbar', {
    8.         template: `
    9.             
    10.                 
    11.                 组件
    12.                 
    13.                 
    14.
  • `,
  • data(){
  • return {
  • name:'abc'
  • }
  • },
  • methods:{
  • handleEvent(){
  • // this.$emit('myevent') //myevent:子组件中监听自定义事件
  • this.$emit('myevent',100) //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对象(组件对象)，
    ∙ 可以之间使用组件对象上的方法和属性---》子的数据给了父亲
            - 父组件有个方法执行，需要传参数，传入子组件的数据---》子的数据给了父亲
            - 拿到子对象之间使用父中的数据修改----》父传子

    1. <body>
    2. <div id="app">
    3.  
    4.     <h1>ref属性放在普通标签上h1>
    5.     <input type="text" ref="myinput" v-model="name">====>{{name}}
    6.     <br>
    7.     <button @click="handlePrint">点我，打印点东西button>
    8.     <hr>
    9. div>
    10. body>
    11. <script>
    12.     var abc = {
    13.         template: `
    14.           
    15.           
    16.           首页--{{ age }}---{{ show }}
    17.           
    18.           
      `,
  • data() {
  • return {
  • show: true,
  • age: 19
  • }
  • },
  • 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=999
  • // this.$refs.mylqz.show = false
  • // this.$refs.mylqz.handleQJ()
  • // this.name=this.$refs.mylqz.age
  • this.$refs.mylqz.handleQJ(this.name)
  • }
  • },
  • components: {
  • abc
  • }
  • })
  • script>

    • 动态组件

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

    1. <body>
    2. <div id="app">
    3.  
    4.     <div>
    5.         <span @click="type='home'">首页span>|
    6.         <span @click="type='goods'">商品span>|
    7.         <span @click="type='order'">订单span>
    8.     div>
    9.     <div>
    10.         <component :is="type">component>
    11.     div>
    12.  
    13.  
    14. div>
    15. body>
    16. <script>
    17.  
    18.     // 1 定义三个全局组件
    19.     Vue.component('home', {
    20.         template: `
    21.         <div>
    22.             <h1>首页h1>
    23.         div>`,
    24.     })
    25.     Vue.component('goods', {
    26.         template: `
    27.         <div>
    28.             <h1>商品h1>
    29.         div>`,
    30.     })
    31.     Vue.component('order', {
    32.         template: `
    33.         <div>
    34.             <h1>订单h1>
    35.         div>`,
    36.     })
    37.     var vm = new Vue({
    38.         el: '#app',
    39.         data: {
    40.             type: 'home'
    41.         },
    42.  
    43.  
    44.     })
    45.  
    46.  
    47. script>

    插槽

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

    1. <body>
    2. <div id="app">
    3.  
    4.     <h1>插槽的使用h1>
    5.     <home>
    6.         <img src="美女.jpg" width="200px" height="200px">
    7.     home>
    8.     <hr>
    9.     <home>
    10.         <div>我是divdiv>
    11.     home>
    12.     <hr>
    13.  
    14.     <goods>
    15.         <div slot="bottom">
    16.             我是底部
    17.         div>
    18.         <a href="" slot="top">点我看美女a>
    19.  
    20.     goods>
    21.  
    22. div>
    23. body>
    24. <script>
    25.     // 1 定义三个全局组件
    26.     Vue.component('home', {
    27.         template: `
    28.         <div>
    29.         <button>后退button>
    30.            <span>首页span>
    31.          <button>前进button>
    32.          <hr>
    33.          <slot>slot>
    34.         div>`,
    35.     })
    36.  
    37.     Vue.component('goods', {
    38.         template: `
    39.         <div>
    40.         <slot name="top">slot>
    41.         <hr>
    42.         <button>后退button>
    43.            <span>首页span>
    44.          <button>前进button>
    45.          <hr>
    46.          <slot name="bottom">slot>
    47.         div>`,
    48.     })
    49.     var vm = new Vue({
    50.         el: '#app',
    51.         data: {
    52.             type: 'home'
    53.         },
    54.  
    55.  
    56.     })
    57.  
    58.  
    59. 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来做包管理

  • 相关阅读:
    三面面试官：运行 npm run xxx 的时候发生了什么？
    Redis (持续更新…)
    java-php-python-基于J2EE的购物网站计算机毕业设计
    【数据结构】二叉树的顺序结构实现及时间复杂度计算（二）
    Git/Gitee零基础入门教程
    mongodb导出聚合查询的数据
    Jmeter常用参数化技巧总结
    GBase 8a常用命令
    项目进度延误，危机管理5大注意事项
    【Webpack】webpack的基础使用详细总结 上（建议收藏）
  • 原文地址：https://blog.csdn.net/weixin_52596593/article/details/127602052