精通系列）WebStorm版

Posted 2022-08-27 蓝盒子itbluebox

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了精通系列）WebStorm版相关的知识，希望对你有一定的参考价值。

javascript 之 Vue3 入门到精通（一篇文章精通系列）【WebStorm版】

项目源代码：https://download.csdn.net/download/qq_44757034/86440913

一、Vite创建Vue3 项目

npm init vite@latest my-vue-app -- --template vue

创建成功

用WebStorm打开项目

自动下载好对应的依赖

启动运行项目

 npm run dev

http://127.0.0.1:5173/

提示要安装插件

二、Vue3基本语法

1、定义全局变量

<template>
  <h1>msg</h1>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
let msg  = "itbluebox"

</script>
<style scoped>
.logo 
  height: 6em;
  padding: 1.5em;
  will-change: filter;

.logo:hover 
  filter: drop-shadow(0 0 2em #646cffaa);

.logo.vue:hover 
  filter: drop-shadow(0 0 2em #42b883aa);

</style>

访问：http://127.0.0.1:5173/

2、定义函数

翻转字符串函数

<template>
  <h1>msg</h1>
  <h1>reMsg(msg)</h1>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
let msg  = "itbluebox"

function reMsg(val)
  return val.split('').reverse().join('')


</script>
<style scoped>
.logo 
  height: 6em;
  padding: 1.5em;
  will-change: filter;

.logo:hover 
  filter: drop-shadow(0 0 2em #646cffaa);

.logo.vue:hover 
  filter: drop-shadow(0 0 2em #42b883aa);

</style>

访问：http://127.0.0.1:5173/

3、定义响应式ref

<template>
  <h1>msg</h1>
  <h1>reMsg(msg)</h1>
  <button @click="setMsg">点击修改</button>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
let msg  = "itbluebox"

function reMsg(val)
  return val.split('').reverse().join('')


function setMsg()
  msg = "red！！！"


</script>
<style scoped>
.logo 
  height: 6em;
  padding: 1.5em;
  will-change: filter;

.logo:hover 
  filter: drop-shadow(0 0 2em #646cffaa);

.logo.vue:hover 
  filter: drop-shadow(0 0 2em #42b883aa);

</style>

访问：http://127.0.0.1:5173/

点击，发现没有反应

数据以及发生变化，但是没有响应式

设置响应式
//通过 ref 创建响应式对象

<template>
  <h1>msg</h1>
  <h1>reMsg(msg)</h1>
  <button @click="setMsg">点击修改</button>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import ref from  'vue'
//通过 ref  创建响应式对象
let msg  = ref("itbluebox")

function reMsg(val)
  return val.split('').reverse().join('')


function setMsg()
  msg.value = "red！！！"



</script>
<style scoped>
.logo 
  height: 6em;
  padding: 1.5em;
  will-change: filter;

.logo:hover 
  filter: drop-shadow(0 0 2em #646cffaa);

.logo.vue:hover 
  filter: drop-shadow(0 0 2em #42b883aa);

</style>

http://127.0.0.1:5173/

分析HelloWorld.vue

4、响应式reactive

设置一个对象并显示

<template>
  <div>
    <h1>用户名：user.username</h1>
    <h1>年龄：user.age</h1>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
<script setup>
  import HelloWorld from './components/HelloWorld.vue'
  import ref from  'vue'

  var user = ref(
    username: 'itbluebox',
    age:18
  )

</script>
<style scoped>
.logo 
  height: 6em;
  padding: 1.5em;
  will-change: filter;

.logo:hover 
  filter: drop-shadow(0 0 2em #646cffaa);

.logo.vue:hover 
  filter: drop-shadow(0 0 2em #42b883aa);

</style>

显示成功

显示成功

但是在修改的时候（设置点击事件设置点击修改年龄）

刷新页面
点击修改年龄，值已经被修改，但是页面没有变化

值设置为value的方式

点击修改
页面值发生变化

设置响应式的转换

<template>
  <div>
    <h1>用户名：user.username</h1>
    <h1>年龄：user.age</h1>
    <button @click="setUserAge">点击修改年龄</button>
    <h1>老师： teacher.username </h1>
    <button @click="setTeacherName">修改名字</button>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
<script setup>
  import HelloWorld from './components/HelloWorld.vue'
  import ref,reactive from  'vue'

  var user = ref(
    username: 'itbluebox',
    age:18
  )

  const teacher = reactive(
    username: 'itbluebox teacher',
    sex:"男",
    age:18
  )

  function setUserAge()
    //user.age = 14
    user.value.age = 14
    console.log(user)
  

  function setTeacherName()
    teacher.username = "redbox"
  

</script>
<style scoped>
.logo 
  height: 6em;
  padding: 1.5em;
  will-change: filter;

.logo:hover 
  filter: drop-shadow(0 0 2em #646cffaa);

.logo.vue:hover 
  filter: drop-shadow(0 0 2em #42b883aa);

</style>

<template>
  <div>
    <h1>用户名：user.username</h1>
    <h1>年龄：user.age</h1>
    <button @click="setUserAge">点击修改年龄</button>
    <h1>老师： teacher.username </h1>
    <button @click="setTeacherName">修改名字</button>
    <h1>用户名：user2.username</h1>
    <h1>年龄：user2.age</h1>
    <button @click="setUser2Age">点击修改年龄</button>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
<script setup>
  import HelloWorld from './components/HelloWorld.vue'
  import ref,reactive from  'vue'

  var user = ref(
    username: 'itbluebox',
    age:18
  )
  const teacher = reactive(
    username: 'itbluebox teacher',
    sex:"男",
    age:18
  )
  function setUserAge()
    //user.age = 14
    user.value.age = 14
    console.log(user)
  
  function setTeacherName()
    teacher.username = "redbox"
  
  let user2 = reactive(user.value)
  function setUser2Age()
    user2.age = 100;
  
</script>
<style scoped>
.logo 
  height: 6em;
  padding: 1.5em;
  will-change: filter;

.logo:hover 
  filter: drop-shadow(0 0 2em #646cffaa);

.logo.vue:hover 
  filter: drop-shadow(0 0 2em #42b883aa);

</style>

修改成功

5、Vue3事件对象与传递参数

事件对象

<template>
  <div>
    <h1>用户名：user.username</h1>
    <h1>年龄：user.age</h1>
    <button @click="setUserAge">点击修改年龄</button>
    <h1>老师： teacher.username </h1>
    <button @click="setTeacherName">修改名字</button>
    <h1>用户名：user2.username</h1>
    <h1>年龄：user2.age</h1>
    <button @click="setUser2Age">点击修改年龄</button>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>
<script setup>
  import HelloWorld from './components/HelloWorld.vue'
  import ref,reactive from  精通系列）WebStorm版
 精通系列）webpack（常用语法）WebStorm版本
 精通系列）webpack（常用语法）WebStorm版本
 精通系列）webpack（常用语法）WebStorm版本
 精通系列）（我的第一个TS程序）WebStorm版本
 精通系列）（我的第一个TS程序）WebStorm版本