标签：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入门——？？？

上次回顾：

今日内容：

vue3介绍

vue3项目创建和启动

vue3的项目简单解释

vite创建vue3

setup

ref

reactive

ref和reactive总结

监听属性-计算属性

计算属性

监听属性

生命周期

toRef

setup写法

相关文章

赞助商

阅读排行