首页 > 其他分享 >vue入门——???

vue入门——???

时间:2024-01-16 15:44:06浏览次数:24  
标签:vue 入门 age let ref setup name

上次回顾:

# 1 ref
    -放在组件上---》在父组件中--》this.$refs.名字  -->组件对象--->组件对象--->属性,方法就可以拿到
    -放在普通标签上
# 2 this.$parent
    -拿到父组件对象
    
    
# 3 props
    - 数组形式:  props:['自定义属性的名字','自定义属性的名字1']
    - 对象形式,限制类型: 
        props:{自定义属性名字:{
            type:String
        }}
    -对象形式,限制类型,默认值,必填
    props:{自定义属性名字:{
            type:String,
            required:True,
            default:'xx'
        }}
    
    
# 4 mixin 混入
    -多个组件公用的,抽取出来
        -data,methods。。。。
    -两种方式使用:
        -局部使用:配置项:mixins:[写多个]
        -全局使用:Vue.mixin(混入对象)
        
# 5 插件
    -第三方插件:vuex,vue-router,elementui
        Vue.use(插件名)
    -自定义插件:export default {
        install(Vue){
            
        }
    }
    -能干的事:
        1 设置全局变量
        2 设置全局方法
        3 自定义全局指令
        4 自定义全局组件
    -使用 在 main.js中
        Vue.use(插件名)
        
        
# 6 插槽
    匿名插槽
    具名插槽
        <div slot='插槽名字'></div>
        <template v-slot:名字>
        </template>
        
# 7 vuex 状态管理器--集中式数据[变量]管理---》跨组件间通信
    state:{}  # 变量
    组件中使用:this.$store.state.变量
    
    正统用法:
        -在组件中:this.$store.dispatch('函数名',参数)
        -index.js 的 actions
        actions:{
            函数名(context,形参){
                context.commit('函数名',参数)
            }
        }
        
        -index.js 的 mutations
        mutations:{
            函数名(state,形参){
                state.变量 进行操作
            }
        }
# 8 vue-router    实现单页面应用
    -两个组件:router-view,router-link
    -跳转:js,html中标签跳转
        this.$router.push
        router-link 的to 属性
    -跳转:传对象,携带数据[地址栏?后,地址栏中解析出]
    
    -常用api
        this.$router.push
        this.$router.replace
        this.$router.go
        this.$router.back
        
    -组件中有:
        this.$router  # 代指 vue-router 导出的对象
        this.$route    # 代指当前路由对象:当前路径,当前携带的数据
            this.$route.query     this.$route.params 
            
    -子路由:
    -路由守卫
        -全局前置路由守卫

今日内容:

vue3介绍

# Vue3的变化
    -vue3完全兼容vue2---》但是vue3不建议用vue2的写法
    -拥抱TypeScript
        -之前咱们用的JavaScript---》ts完全兼容js
    - 组合式API和配置项API
        vue2 是配置项api
        vue3 组合式api
        
        
# vue4必须要用

vue3项目创建和启动

# 创建vue3项目
    -vue-cli   官方不太建议用了
    -vite      目前官方推荐:新一代前端构建工具

# vue-cli创建
    -命令行中:vue create vue3_demo001
    -其他跟之前一样,只是选vue版本选3版本
    -使用pycharm打开---》配置启动--》跟之前一样

vue3的项目简单解释

### main.js
import { createApp } from 'vue' # 通过 createApp创建vue实例
import App from './App.vue'  # 根组件
import router from './router' # vue-router
import store from './store' #vuex

var vue = createApp(App) # 创建vue实例
vue.use(store)#使用vuex
vue.use(router)# 使用vue-router
vue.mount('#app')# 挂在index.html中得div


### 其他写起来跟之前写vue2完全一致,vue3是兼容的

vite创建vue3

 速度很快
    -创建项目还是运行项目
# 按需编译,不再等待整个应用编译完成


# 创建项目
    cnpm create vite vue3_demo002
    # 打开项目,安装依赖
    cnpm install 
    
    # 运行项目
    npm run dev
    # pycharm运行项目
  
# 使用vite和vue3创建项目的文件简单解释
    # main.js    
    import { createApp } from 'vue'
    import './style.css'
    import App from './App.vue'
    createApp(App).mount('#app') # 没有使用第三方插件
    
    # HelloWorld.vue   组合式api写法,跟之前不一样了
    <script setup>
    import { ref } from 'vue'
    defineProps({
      msg: String,
    })
    const count = ref(0)
    </script>
    <template>
      <h1>{{ msg }}</h1>
      <div class="card">
        <button type="button" @click="count++">count is {{ count }}</button>
      </div>
    </template>


    
    
# 后期我们可以自己引入 vuex,pina,vue-router,代码需要自己写
# 实现:创建vue2一样,自由选择一些插件
    -以后再vue3上,建议使用pinia 做状态管理
npm create vue@latest  # 常用的第三方插件,自己选即可

setup

# 1 vue3_demo001 :vue-cli创建的---》写法跟之前vue2一样
    先在这上面讲
# 2 vue3_demo002 :vite创建,但是没有状态管理器和路由 (不用它了)
# 3 vue3_demo003:vite创建,有状态管理器和路由  在这上面讲


# setup 函数,只有vue3中有
    setup为Vue3.0中一个新的配置项,值为一个函数
    setup是所有Composition API(组合API)编写的位置
    组件中所用到的:数据、方法等等,均要配置在setup中
    setup函数的返回值:返回一个对象,对象中的属性、方法, 在模板中均可以直接使用
#注意:
    尽量不要与Vue2.x配置混用
    Vue2.x配置(data、methos、computed...)中可以访问到setup中的属性、方法。
    但在setup中不能访问到Vue2.x配置(data、methos、computed...)。
    如果有重名, setup优先。
<template>
  <div class="home">
    <h1>setup函数的使用</h1>
    {{ name }}--{{ age }}
    <br>
    <button @click="add">点我年龄+1</button>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'HomeView',
  setup() {
    // vue3多的,vue2没有,以后建议vue3的代码全都写在这里,不再写配置项方式了
    // 1 定义变量,跟正常写js一样
    let name = 'lqz'
    let age = 19
    // 2 定义一个函数,点击按钮,年龄加一的函数
    let add = () => {
      // alert('111')
      // 让年龄+1,出问题了,变量确实会变,但是页面不会变化---》vue3定义的变量,默认不是响应式的
      age++
      console.log(age)

    }
    // 3 必须要有返回值,是个对象,返回的对象,可以在 模板(template)中使用
    return {name, age, add}

  },
}
</script>

ref

# ref 用来做 基础变量[数字,字符串,布尔]的响应式
# reactive用来做 对象[数组,字典]的响应式

<template>
  <div class="home">
    <h1>setup函数的使用</h1>
    {{ name }}--{{ age }}
    <br>
    <button @click="add">点我年龄+1</button>
    <br>
    <button @click="handleChange('彭于晏')">点我变彭于晏</button>
  </div>
</template>

<script>

import {ref, reactive} from 'vue'

export default {
  name: 'HomeView',
  setup() {
    // vue3多的,vue2没有,以后建议vue3的代码全都写在这里,不再写配置项方式了
    // 1 定义变量,跟正常写js一样
    let name = ref('lqz')
    // let age = 19  // 没有响应式
    let age = ref(19)  // 有响应式,变成对象了
    // 2 定义一个函数,点击按钮,年龄加一的函数
    let add = () => {
      // alert('111')
      // 让年龄+1,出问题了,变量确实会变,但是页面不会变化---》vue3定义的变量,默认不是响应式的
      // age++   自增,就不能这么写了
      age.value++  //有响应式
      console.log(age.value)

    }
    let handleChange = (n) => {
      name.value = n  //有响应式

    }
    // 3 必须要有返回值,是个对象,返回的对象,可以在 模板(template)中使用
    return {name, age, add, handleChange}

  },
}
</script>

reactive

<template>
  <div class="home">
    <h1>setup函数的使用</h1>
    <p>用户名:{{ userInfo.name }}</p>
    <p>年龄:{{ userInfo.age }}</p>
    <p>爱好:{{ userInfo.hobby }}</p>

    <button @click="handleAdd">点我年龄+1</button>
  </div>

</template>

<script>

import {ref, reactive} from 'vue'

export default {
  name: 'HomeView',
  setup() {
    let userInfo = reactive({
      name: 'lqz',
      age: 19,
      hobby: '篮球'
    })

    let handleAdd = () => {
      userInfo.age++
      console.log(userInfo)
    }
    return {userInfo, handleAdd}
  },
}
</script>

ref和reactive总结

# ref函数
    作用: 定义一个响应式的数据
    语法: let xxx = ref(initValue)
    创建一个包含响应式数据的引用对象(reference对象,简称ref对象)。
    JS中操作数据: xxx.value
    模板中读取数据: 不需要.value,直接:<div>{{xxx}}</div>
    # 备注:
    接收的数据可以是:基本类型、也可以是对象类型。
# reactive函数
    作用: 定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)
    语法:let 代理对象= reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)
    reactive定义的响应式数据是“深层次的”,对象无论多少层,都可以

监听属性-计算属性

计算属性

<template>
  <div class="home">
    <h1>计算属性:computed</h1>
    <p>姓:<input type="text" v-model="person.firstName"></p>
    <p>名:<input type="text" v-model="person.lastName"></p>
    <p>全名:{{ person.fullName }}</p>
    <p>全名修改:<input type="text" v-model="person.fullName"></p>
  </div>

</template>

<script>

import {ref, reactive, computed} from 'vue'

export default {
  name: 'HomeView',
  setup() {
    let person = reactive({
      firstName: '',
      lastName: ''
    })
    // 计算属性--->获取值
    // person.fullName = computed(() => {
    //   return person.firstName + person.lastName
    // })
    // 计算属性---》修改值
    person.fullName = computed({
      get() {
        return person.firstName +person.lastName
      },
      set(newValue) {
        console.log(newValue)
        person.firstName=newValue.substring(0,1)
        person.lastName=newValue.slice(1)
      }
    })
    return {person}
  },
}
</script>

监听属性

<template>
  <div class="home">
    <h1>监听属性:watch</h1>
    {{ age }} ====
    <button @click="handleClick">点我+1</button>
    <hr>
    <p>用户名:{{ userInfo.name }}</p>
    <button @click="handleChange">点我变长名字</button>
  </div>

</template>

<script>

import {ref, reactive, watch, computed} from 'vue'

export default {
  name: 'HomeView',
  setup() {
    let age = ref(0)
    let handleClick = () => {
      age.value++
    }
    // 1 监听基本类型
    watch(age, (newValue, oldValue) => {
      console.log(oldValue)
      console.log(newValue)
    })

    // 2 监听对象
    let userInfo = reactive({
      name: 'lqz',
      age: 19
    })
    let handleChange = () => {
      userInfo.name = '谢谢谢谢谢寻寻寻寻'
    }
    watch(() => userInfo.name, (newValue, oldValue) => {
      console.log('名字变了:' + userInfo.name)
    })


    // 3 同时监听多个变量变化
     watch([age,], (newValue, oldValue) => {
      console.log('age或msg变化了', newValue, oldValue)
    })

    return {age, handleClick, userInfo, handleChange}
  },
}
</script>

生命周期

# vue2 : 8个生命周期钩子
    
# vue3中变成
    beforeDestroy改名为 beforeUnmount
    destroyed改名为 unmounted
    
    
    Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下:
        beforeCreate===>setup()
        created=======>setup()
        beforeMount ===>onBeforeMount
        mounted=======>onMounted
        beforeUpdate===>onBeforeUpdate
        updated =======>onUpdated
        beforeUnmount ==>onBeforeUnmount
        unmounted =====>onUnmounted
<template>
  <div class="home">
    <h1>生命周期</h1>
    {{ name }}
    <br>
    <button @click="handleClick">点我变名字</button>
  </div>

</template>

<script>

import {
  ref,
  reactive,
  watch,
  computed,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted
} from 'vue'
import axios from 'axios'

export default {
  name: 'HomeView',
  setup() {
    //1 这里写的代码,就是 beforeCreate,没有数据[变量没定义],没挂载
    console.log('beforeCreate')
    // 2 这里写代码,就是created,有数据,变量定义了,没挂载
    let name = ref('lqz')
    axios.get('http://127.0.0.1:8000/film/').then(res => {
      name.value = res.data.msg
    })
    // 3 onMounted
    onMounted(() => {
      console.log('挂载完了')
    })
    // 4 onUpdated
    onUpdated(() => {
      console.log('页面更新')
    })

    // 5 onUnmounted
    onUnmounted(() => {
      console.log('组件销毁')
    })
    let handleClick = () => {
      name.value = 'afdasdfasdfasdf'
    }

    return {name, handleClick}
  },

  //配置项api====》变了最后俩
  // beforeCreate() {
  // },
  // created() {
  // },
  // beforeMount() {
  // },
  // mounted() {
  // },
  // beforeUpdate() {
  // },
  // updated() {
  // },
  // beforeUnmount() {
  // },
  // unmounted() {
  // }

}
</script>

toRef

<template>
  <div class="home">
    <h1>toRef函数</h1>
    {{ name }}---{{ age }}---{{ hobby }}---{{ count }}
  </div>

</template>

<script>

import {
  ref,
  toRefs,
  reactive,
} from 'vue'

export default {
  name: 'HomeView',
  setup() {

    let data = reactive({
      name: 'lqz',
      age: 19,
      hobby: '篮球'
    })
    let count = ref(0)
    let xx = {...toRefs(data)}  // {name:lqz,age:19,bobby:篮球}
    console.log(xx)

    // 可以把对象解压

    return {...toRefs(data), count}   // {name:lqz,age:19,bobby:篮球,count:0}
  },


}
</script>

setup写法

<template>
  <h1>我是首页</h1>
  <!--  <div>{{ name }}</div>-->
  <!--  <button @click="handleChange">点我变名字</button>-->

  <!--  <button @click="load">点我加载</button>-->
  <!--  <div v-for="film in filmList">-->
  <!--    <p>{{ film.name }}</p>-->

  <!--  </div>-->

  <!--  <HelloWorld msg="lqz is handsome"></HelloWorld>-->


  <!--  <RouterLink to="/about">-->
  <!--    <button>点我跳转到about</button>-->
  <!--  </RouterLink>-->

  <!--  <button @click="handleGo">点我跳转到about</button>-->

<!--  {{ store.count }}-->
<!--  <button @click="handleAdd">点击+1</button>-->


  <hr>
  <el-button type="primary">Primary</el-button>
  <br>
  <el-switch v-model="value1"/>


</template>

<script setup lang="js">
//1  以后这里面写的,就相当于 写在setup函数中,现在不需要返回,在template都能用到
// import {ref,reactive} from 'vue'
// let name = ref('lqz')
// let handleChange = () => {
//   name.value = 'sadfasdfafs'
//   console.log(name)
// }


//2  加载电影数据
// import {ref, reactive} from 'vue'
// import axios from 'axios'
//
// let filmList = reactive([])
//
// //发送ajax
// let load = () => {
//   axios.get('http://127.0.0.1:8000/film/').then(res => {
//     filmList = res.data.results
//     console.log(filmList)
//   })
// }


// 3 注册组件
import HelloWorld from '@/components/HelloWorld.vue'


// 4 路由跳转  setup中没有this了---》想用谁,就是导入谁
// this.$router.push()  // 用不了了
// import {useRouter, useRoute} from 'vue-router'
//
// const router = useRouter()
// const route = useRoute()
//
//
// let handleGo = () => {
//   router.push('/about?name=lqz')
// }


// 5 pinia的使用
// import {useCounterStore} from '@/stores/counter'
// // 可以在组件中的任意位置访问 `store` 变量 ✨
// const store = useCounterStore()
// // console.log(store.count)
// let handleAdd = () => {
//   store.count++
// }


// 6 使用elementui
import {ref} from 'vue'

let value1 = ref(true)

</script>

 

标签:vue,入门,age,let,ref,setup,name
From: https://www.cnblogs.com/wzh366/p/17967828

相关文章

  • 《全局实例篇》Vue.compont注册全局组件
    注册一个全局组件语法格式如下:Vue.component(tagName,options)tagName为组件名,options为配置选项。注册后,我们可以使用以下方式来调用组件:<tagName></tagName>全局组件所有实例都能用全局组件。<divid="app"> <runoob></runoob></div><script>//注册Vue.compon......
  • 《标签篇》Vue.directives自定义指令v-my
    参考链接:https://www.runoob.com/vue2/vue-custom-directive.html自定义指令除了默认设置的核心指令(v-model和v-show),Vue也允许注册自定义指令。下面我们注册一个全局指令v-focus,该指令的功能是在页面加载时,元素获得焦点:<divid="app"> <p>页面载入时,input元素自......
  • SqlSugar入门
    SqlSugar入门创建对象你可以使用SqlSugarClient(new模式)或者 SqlSugarScope(单例) 对数据库进行增、删、查、改等功能注意:除了名字和使用模式不同,功能和API都一模一样SqlSugarClient(new模式)优点:性能比SqlSugarScope有5%左右提升缺点:db不能跨上下文使用,需要new......
  • 【vue】《 npm、pnpm和cnpm的区别及使用 》
    区别npm  NPM全称NodePackageManager,是Node.js包管理工具,是全球最大的模块生态系统,里面所有的模块都是开源免费的;也是Vue/Node.js的包管理工具,相当于Java中的Maven、Python中的PIP。  npm是Node.js官方推出的包管理工具,它是JavaScript世界中最流行的包管理工具之一。通过......
  • 初始化一个vite+vue3的前端项目要做的额外的事儿
    添加.editorconfig文件#http://editorconfig.orgroot=true[*]charset=utf-8indent_style=spaceindent_size=4end_of_line=lfinsert_final_newline=truetrim_trailing_whitespace=true[*.md]insert_final_newline=falsetrim_trailing_whitespace......
  • vue引入图片的几种方式
    vue引入图片的几种方式:https://blog.csdn.net/qq_36571836/article/details/118806421?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-4-118806421-blog-80015777.235^v40^pc_relevant_3m_sort_dl_base2&spm=1001.2101.3001.4242......
  • jmeter入门:数据库压力测试全解析
    一.下载安装下载地址https://jmeter.apache.org/download_jmeter.cgi解压,打开apache-jmeter-5.2.1\binjmeter.bat即可。 二.配置jmeter1.添加线程组其中参数为:线程数:相当为50个用户ramp-up:每秒增加的线程数0相当于并发循环次数:emmm....2.配置jdbc以下选项需......
  • C语言入门-printf库函数
    printf()库函数调用格式:printf("<格式化字符串>",<参量表>);声明intprintf(constchar*format,...)参数格式字符意义a,A以十六进制形式输出浮点数(C99新增)。实例printf("pi=%a\n",3.14);输出pi=0x1.91eb86p+1。d以十进制形式输出带符号整数(正数不......
  • PyTorch深度学习零基础入门
    在人工智能时代,机器学习技术日新月异,深度学习是机器学习领域中一个全新的研究方向和应用热点,它是机器学习的一种,也是实现人工智能的必由之路。深度学习的出现不仅推动了机器学习的发展,还促进了人工智能技术的革新。PyTorch作为深度学习的重要框架,近年来备受读者喜爱,自推出后得到了......
  • vue在idea中的各级目录作用,工作流程
    vue工程目录作用预览:接下来进行我的一些理解记录:1.vue脚手架运行后,app.vue是所有页面的入口,会先进入到app.vue识别到router-linkto“”标签中router路由路径path,并且转到路由的路径下即src/router.2.根据app.vue中的路径对router中不同的path进行匹配,之后会获取到匹配......