首页 > 其他分享 >【2022-10-29】前端Vue框架(四)

【2022-10-29】前端Vue框架(四)

时间：2022-10-29 21:36:51浏览次数：49  
标签：10 vue name 29 var Vue 组件 data

一、计算属性

计算属性实现首字母大小写

<!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" v-model="name"> -&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt; {{ //name.slice(0, 1).toUpperCase() + name.slice(1)}}-->
    <input type="text" v-model="name"> -------------> {{handlerUpper()}}
    <hr>
    <input type="text" v-model="name2"> -------------> {{upper}}
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            name: '',
            name2: '',
        },
        methods: {
            handlerUpper() {
                // 只要页面刷新就会发生变化
                console.log('重新定义了一个input，但我每次都会执行，气不气')
                return this.name.slice(0, 1).toUpperCase() + this.name.slice(1)
            }
        },
        computed: {
            upper() {
                // 只有涉及到计算属性中使用的变量发生变化时，它才会重新运算
                console.log('执行了计算属性')
                return this.name2.slice(0, 1).toUpperCase() + this.name2.slice(1)
            }
        }

    })
</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">


    <h1>过滤案例</h1>
    <p><input type="text" v-model="search" placeholder="请输入要搜索的内容"></p>
    <ul>
        <li v-for="item in newList">{{item}}</li>
    </ul>

</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf', 'd', 'day', 'data', 'e', 'eye'],
        },
        computed: {
            newList() {
                // 计算属性必须要return出去，因为计算属性的值就是return出去的值
                return this.newList = this.dataList.filter(item => item.indexOf(this.search) >= 0)
            }
        }
    })
</script>

二、监听属性

# 监听一个属性的变化，只要它发生变化，就执行一个函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <span> <button @click="type='人文历史'">人文历史</button>|<button @click="type='走进科学'">走进科学</button>|<button
            @click="type='生活与自然'">生活与自然</button></span>
</div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            type: '人文历史',
        },
        watch: {
            type(val) {
                console.log('修改后变成了', val)
                console.log('向后端加载了数据')
            }
        }


    })
</script>
</html>

三、组件介绍与定义

# 扩展 HTML 元素，封装可重用的代码，目的是复用
	-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
	-组件把js，css，html放到一起，有逻辑，有样式，有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">
    <h1>全局组件</h1>
    <child></child>
    <hr>
    <h1>局部组件</h1>
    <jason></jason>

</div>
</body>
<script>
    // 定义全局组件 (必须在一个标签中)，组件有自己的数据、方法、生命周期.....
    var obj = {

        template: `
          <div>
          <button>前进</button>
          {{ title }}
          <button @click="handlerClick">后退</button>
          </div>`,
        data() {
            return {
                title: '谁的青春不迷茫'
            }
        },
        methods: {
            handlerClick() {
                alert('执行了')
            }
        }
    }
    Vue.component('child', obj)


    // 定义局部组件
    var jason = {
        template: `
          <div>
          <h1>我是局部组件</h1>
          {{ name }}
          </div>`,
        data() {
            return {
                name: 'jason'
            }
        }
    }
    var vm = new Vue({
        el: '#app',
        data: {},
        components: {
            jason
        }

    })
</script>

四、父子通信之父传子

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

</head>

<body>
<div id="app">
    <h1>自定义属性实现父子通信</h1>

    <jason :myname="name"></jason>
</div>
</body>
<script>

    // 定义局部组件
    var jason = {
        template: `
          <div>
          <h1>我是局部组件</h1>
          {{ myname }}
          </div>`,
        props: ['myname']
    }


    var vm = new Vue({
        el: '#app',
        data: {
            name: '胡歌',
        },
        components: {
            jason
        }

    })
</script>

五、父子通信之子传父

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

</head>
<body>
<div id="app">
    <h1>自定义事件实现父子通信之子传父</h1>
    父组件中的name值为：{{name}}
    <hr>
    <lqz @myevnet="handleEvent"></lqz>
    <hr>

</div>
</body>
<script>


    var lqz = {
        template: `
          <div>
          <h1>我是jason组件</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: {
            jason
        }


    })


</script>
</html>

六、ref属性

# ref属性，vue定义的
	-可以放在普通标签上，通过this.$refs.自定义的名字取到的是 原生的dom对象
    	-使用原生dom操作了(不推荐)
    -可以放在组件上：通过this.$refs.自定义的名字取到的是 vc对象(组件对象)，
    	-可以之间使用组件对象上的方法和属性---》子的数据给了父亲
        -父组件有个方法执行，需要传参数，传入子组件的数据---》子的数据给了父亲
        -拿到子对象之间使用父中的数据修改----》父传子

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

</head>
<body>
<div id="app">

    <h1>ref属性放在普通标签上</h1>
    <input type="text" ref="myinput" v-model="name">====>{{name}}
    <br>
    <button @click="handlePrint">点我，打印点东西</button>
    <hr>
    <h1>ref属性放在组件上</h1>
    <lqz ref="myjason"></lqz>


</div>
</body>
<script>


    var lqz = {
        template: `
          <div>
          <button>后退</button>
          首页--{{ age }}---{{ show }}
          <button @click="handleQJ('迪丽热巴')">前进</button>
          </div>`,
        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: {
            jason
        }


    })


</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">

    <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>

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


    })


</script>
</html>

keep-alive使用

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

</head>
<body>
<div id="app">

    <div>
        <span @click="type='home'">首页</span>|
        <span @click="type='goods'">商品</span>|
        <span @click="type='order'">订单</span>
    </div>
    <div>
        <keep-alive>
            <component :is="type"></component>
        </keep-alive>
    </div>


</div>
</body>
<script>

    // 1 定义三个全局组件
    Vue.component('home', {
        template: `
        <div>
            <h1>首页</h1>
        </div>`,
    })
    Vue.component('goods', {
        template: `
        <div>
            <h1>商品</h1>
            <input type="text" placeholder="请输入要搜索的商品"> <button>搜索</button>
        </div>`,
    })
    Vue.component('order', {
        template: `
        <div>
            <h1>订单</h1>
        </div>`,
    })
    var vm = new Vue({
        el: '#app',
        data: {
            type: 'home'
        },


    })


</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">

    <h1>插槽的使用</h1>
    <home>
        <img src="https://img0.baidu.com/it/u=4199141691,520618081&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" width="200px" height="200px">
    </home>
    <hr>
    <home>
        <div>我是div</div>
    </home>
    <hr>

    <goods>
        <div slot="bottom">
            我是底部
        </div>
        <a href="" slot="top">点我看美女</a>

    </goods>

</div>
</body>
<script>

    // 1 定义三个全局组件
    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>
</html>

九、vue-cli

# vue的脚手架：快速帮我们创建出vue的项目
# vue2 和 vue3 
    -vue-cli可以创建vue2和vue3的项目    webpack构建工具
    -Vite：新一代构建工具，速度快、效率高
    -vue3上，推荐使用ts写
    
    
# 先安装nodejs 后端语言---》语法就是js的语法
	-js运行在浏览器中，浏览器中有它的解释器环境
    -但是它不能运行在操作系统之上，后来有人把chrom浏览器的v8引擎，安装在了操作系统上
    	-c语言写了内置库：文件操作，网络操作
        
    -官网：https://nodejs.org/zh-cn/download/ ，下载，一路下一步
    -安装完会释放两个命令(在环境变量中，任意路径都能敲这俩命令)
    	-node      python3
        -npm       pip
        -cnpm      等同于pip ，只是下模块，直接取淘宝镜像站下载，速度快
        
        
 # 安装vue-cli ，通过脚手架创建vue项目 （django--->django项目--->django-admin）
 	cnpm install -g @vue/cli
    -只要装成功，又会多出一个可执行文件  vue
    
 # npm 下载时候，去国外，速度慢，使用国内镜像
	-淘宝做了一个cnpm可执行文件，用来替换npm，以后所有使用npm的地方都换成cnpm即可
    -安装cnpm 
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    
    
 # 创建vue项目
	vue create myfirstvue
    
    
    
 # ide的选择（vscode，webstorm:jetbrains公司的，跟pycharm一家的，使用习惯一样）
	-选择使用pycharm+vue插件 开发vue项目
    -使用pycharm打开vue项目
    
 # 运行vue项目
	-方式一：在命令行中敲：npm run serve
    -方式二：在pycharm中点击绿色箭头运行
    
    
    
 #cnpm install axios

安装node.js

#  官网：https://nodejs.org/zh-cn/download/ ，下载对应软件包，一路下一步安装即可

安装cnmp

安装vue_cli

创建Vue项目

运行Vue项目

标签：10,vue,name,29,var,Vue,组件,data
From： https://www.cnblogs.com/dy12138/p/16839918.html

相关文章

  • 【2022-10-26】连岳摘抄
    23:59历史不应该是忘记的负担，而应该是理智的启迪。                                    ......
  • 【2022-10-25】连岳摘抄
    23:59人的一生，无疑是个大题目。有不少人，竭尽全力，想把它撰写成一篇宏伟的文章。我只能把它写成一篇小文章，一篇像案头菜花一样的散文。菜花也是生命，凡是生命，都可以成为文章......
  • vue中动态引入图片为什么要是require， 你不知道的那些事
    相信用过vue的小伙伴，肯定被面试官问过这样一个问题：在vue中动态的引入图片为什么要使用require有些小伙伴，可能会轻蔑一笑：呵，就这，因为动态添加src被当做静态资源处理了，没有进......
  • Vue3——自定义组件-插件
    Vue3自定义指令插件官网链接：https://cn.vuejs.org/guide/reusability/custom-directives.html#introduce1.自定义指令：1.1自定义指令声明局部声明：constfocus={......
  • 10月学习心得体会
    1、主要精力是在学习2门慕课，其中大数据技术完成第3-7章学习，实践练习只是完成部分。Spark基础编程，学习第2章部分内容。比预期进度慢，在搭建大数据开发环境上，在笔记本和台式机......
  • win10启用长路径
    方法一：操作组策略Win+R输入 gpedit.msc依次点击【计算机配置】->【管理模板】->【系统】->【文件系统】，找到“启用win32长路径”并双击打开选择“启用”选项，然后单击......
  • Vue-基本语法
     Vue:v-bind绑定事件;el：是挂起的含义，“”里填类名; <!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-C......
  • 20221027数据结构与算法之线性表——顺序表
    广州疫情被封区，在家学习#pragmawarning(disable:4996)#include<stdio.h>#include<stdlib.h>//动态顺序表的实现typedefintdata_t;typedefstructSeqList{data_t*da......
  • 60-ES10-数组方法扩展-flat与flatMap
     ......
  • 58-ES10-对象扩展方法Object.fromEntries
     ......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99