首页 > 其他分享 >Vue进阶用法1

Vue进阶用法1

时间：2023-08-01 22:13:57浏览次数：41  
标签：vue 进阶 用法 var Vue template 组件 name

Vue进阶用法1

计算属性

# 如果 {{函数()}} ,每次页面刷新，函数都会重新执行
# 函数---》当属性来使用，缓存

<!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;》》 {{// name.slice(0, 1).toUpperCase() + name.slice(1)}}-->
    <input type="text" v-model="name"> ---》》 {{handleUpper()}}

    <hr>
    <input type="text" v-model="name2">--->{{upper}}
</div>
</body>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            name2: ''
        },
        methods: {
            handleUpper() {
                // 只要页面刷新就会变化
                console.log('我执行了')
                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 newdataList">{{item}}</li>
    </ul>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            dataList: [
                'a',
                'at',
                'atom',
                'be',
                'beyond',
                'cs',
                'csrf',
                'd',
                'dddd',
            ],

        },
        computed: {
            newdataList() {
                // 计算属性一定要return，因为计算属性的值就是咱们return的值
                return this.dataList.filter(item => item.indexOf(this.search) >= 0)
            }
        }


    })


</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">
    <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('修改后变成了，', 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>
    局部组件
    <lqz></lqz>
    <hr>

</div>
</body>
<script>
    // 1 定义全局组件 (必须在一个标签)，组件有自己的数据，方法，生周期.....
    var obj = {
        template: `
          <div>
          <button>后退</button>
          {{ title }}
          <button @click="handleClick">前进</button>
          </div>`,
        data() {
            return {
                title: '标题'
            }
        },
        methods: {
            handleClick() {
                alert('前进')
            }
        },
    }
    Vue.component('child', obj)


    //2 局部组件


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


    })


</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>
    父组件中的name值为：{{name}}
    <hr>
    <lqz @myevnet="handleEvent"></lqz>
    <hr>

</div>
</body>
<script>


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


    })


</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="mylqz"></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: {
            lqz
        }


    })


</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://tva1.sinaimg.cn/large/00831rSTly1gd1u0jw182j30u00u043b.jpg" 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写  js
    
    
# 先安装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

标签：vue,进阶,用法,var,Vue,template,组件,name
From： https://www.cnblogs.com/joseph-bright/p/17599227.html

相关文章

  • Vue进阶用法2
    Vue进阶用法2vue项目目录介绍myfirstvue#项目名字node_modules#文件夹，内部有很多当前项目依赖的模块，可以删除，npminstallpublic#文件夹-favicon.ico#网站小图标-index.html......
  • Vue进阶用法3
    Vue进阶用法3Vuex的使用#vue的插件，增强了vue的功能，在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信#Vuex的使用流程 -state：存数据的地址-actions：服务员，中转站......
  • Vue组件可以使用v-model实现双向数据绑定
    Vue组件可以使用v-model实现双向数据绑定。在组件中，可以在props中定义一个value属性，并在组件中的对应位置使用v-model进行绑定。例如：Copy<template><div><input:value="value"@input="$emit('input',$event.target.value)"></div></template......
  • 讲一讲我用vscode生成的Vue工程
    近照官网教程，先建立一个文件夹，然后用vscode打开，然后执行 npminitvue@latest命令出现页面我全部选择NO，那些组件用到之后再往进加，要么太乱了然后录入自己要创建的项目名称，我的名称起名myvue，注意项目名称不识别大写然后执行命令：cd myvue  再执行命令   npminstal......
  • vue3路由的两种引入方式useRouter和router进行页面跳转
    1.在vue3中有两种路由的引入方式第一种import{useRouter}from'vue-router'constuse_router=useRouter()use_router.push('/pathName')第二种importrouterfrom'@/router'router.push('/pathName') 2.两种方式的区别2.1.第一种方式的使用位置在vue......
  • JSON格式电商数据API接口，便捷式用法
    item_search-按关键字搜索商品请求参数注册Key和secret测试请求参数：q=女装&start_price=0&end_price=0&page=1&cat=0&discount_only=&sort=&page_size=40&seller_info=no&nick=&seller_info=&nick=&ppath=&imgid=&filter=参数说明：q:搜索关键字cat:......
  • PHPJSON解析 原理与用法
    PHPJSON解析原理与用法在现代编程语言中，JSON已经成为最流行的数据交换格式之一。而PHP作为一门流行的服务器端编程语言，自然也提供了一套完整的JSON解析库。本文将介绍PHPJSON解析的原理与用法，以帮助PHP开发者更好地使用JSON格式数据进行开发。什么是JSON？JSON代表“JavaScript......
  • v-model 用法详解
    基础用法v-model是vue的一个基础指令，用于表单的双向数据绑定<inputv-model="message"placeholder="editme"><p>Messageis:{{message}}</p>v-model原理一个组件上的v-model默认会利用名为value的prop和名为input的事件<inputv-model="searchText"......
  • vue3之父组件中封了子组件的抽屉(弹框类)，通过update:modelValue来进行父子组件的v-mod
    eg:父组件a.vue<AddAiDrawer:projectId="route.query.id"v-model="addAiShow"title="新增"type="spaceAi"@call-back-table="refreshTa......
  • vuex和Pinia使用上的区别-Vue3推荐上Pinia
    Vuex和Pinia都是Vue.js状态管理库，可以管理组件之间的共享状态。它们的区别在于实现方式和API设计。Vuex是Vue.js的官方状态管理库，采用集中式的方式管理全局的状态。在Vuex中，应用程序的状态存储在一个单一的store中，组件只能通过dispatch、commit等方法来修改store中的状态。Vuex还提......

赞助商

阅读排行

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

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

Copyright © 2020-2023 IPS99 版权所有 IPS99