Vue3概念关系与重点摘要

重点摘要

基础概念

  1. 什么是vue

    简单来说就是一款构建用户界面的JavaScript 框架。基于HTML、CSS 和 JavaScript 构建，提供了一些声明式的、组件化的编程模型。搭配各大厂商自研的UI框架（Element、Ant Design Vue）可以快速实现用户的大多数场景。

  2. 主要核心

    • 声明式渲染：基于HTML拓展拓展的模版语法。
    • 响应性：实时响应式更新DOM

  3. 最简单的实例

    <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/3.2.36/vue.global.min.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello Vue!!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#hello-vue')
</script>
</body>
</html>

模版语法

  1. 文本

    数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

    <div id="app">
  <p>{{ message }}</p>
</div>

    如果 message 属性的值发生了改变，{{...}} 标签内容也会更新。

  2. Html

    一般使用v-html指令用于输出html代码：

    <div id="example1" class="demo">
    <p>使用双大括号的文本插值: {{ rawHtml }}</p>
    <p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
</div>
 
<script>
const RenderHtmlApp = {
  data() {
    return {
      rawHtml: '<span style="color: red">这里会显示红色！</span>'
    }
  }
}
 
Vue.createApp(RenderHtmlApp).mount('#example1')
</script>

  3. 属性

    HTML 属性中的值使用v-bind指令：

    <div v-bind:class="{'class1': use}">
    v-bind:class 指令
</div>

    判断use的值，为true使用class1类的样式，否则不使用

  4. 表达式

    可在{{ }}内写入表达式 无法写入 语句

    <div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
</div>
    
<script>
const app = {
  data() {
    return {
      ok: true,
      message: 'qwertyui!!'
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

  5. 指令

    指令是带有 v- 前缀的特殊属性，用于在表达式的值改变时，将某些行为应用到 DOM 上。

    v-if指令 判断某个值 来决定是否执行

    <div id="app">
    <p v-if="seen">测试测试</p>
</div>
    
<script>
const app = {
  data() {
    return {
      seen: true  /* 改为false，信息就无法显示 */
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

    v-for指令可以绑定数组的数据来渲染一个项目列表

    <div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'xx' },
        { text: 'ss' },
        { text: 'qq' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

  6. 参数

    参数在指令后以冒号指明。

    <!-- class 为参数 -->
<div v-bind:class="{'class1': use}">
    v-bind:class 指令
</div>

  7. 用户输入

    input为用户输入框，一般配合v-model使用：

    <div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
 
<script>
const app = {
  data() {
    return {
      message: ''
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script

  8. 缩写

    <!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

条件语句

  1. v-if

    条件判断使用v-if指令，指令的表达式返回 true 时才会显示

  2. v-else

    配合v-if使用，无法单独使用，用于给v-if添加一个else块

  3. v-else-if

    v-else-if 即v-if的 else-if 块 ，无法单独使用

  4. v-show

    使用 v-show 指令来根据条件展示元素：

    <!-- 判断ok的值 来进行展示 -->
<h1 v-show="ok">Hello!</h1>

循环语句

  1. 迭代数组

    <div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'xx' },
        { text: 'ss' },
        { text: 'qq' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

  2. 第二个参数(索引)

    <div id="app">
  <ol>
    <li v-for="(site, index) in sites">
      {{index}} -- {{ site.text }}
    </li>
  </ol>
</div>
<script>
const app = {
  data() {
    return {
      sites: [
        { text: 'xx' },
        { text: 'ss' },
        { text: 'qq' }
      ]
    }
  }
}

Vue.createApp(app).mount('#app')
</script>

  3. 迭代对象

    <div id="app">
  <ul>
    <!-- 迭代 value -->
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
const app = {
  data() {
    return {
      object: {
        name: 'wxs',
        age: '8',
        slogan: '噢力给'
      }
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

    <div id="app">
  <ul>
    <!-- 迭代 key value -->
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>
 
<script>
const app = {
  data() {
    return {
      object: {
        name: 'wxs',
        age: '8',
        slogan: '噢力给'
      }
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

    <div id="app">
  <ul>
    <!-- 迭代 key value  并添加索引-->
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>
 
<script>
const app = {
  data() {
    return {
      object: {
        name: 'wxs',
        age: '8',
        slogan: '噢力给'
      }
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

组件

  1. 简单实例

    <div id="app">
    <testtest></testtest>
</div>
 
<script>
// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 testtest 的新全局组件
app.component('testtest', {
    template: '<h1>自定义组件!</h1>'
})
 
app.mount('#app')
</script>

  2. button组件

    <div id="app">
    <button-counter></button-counter>
</div>
 
<script>
// 创建一个Vue 应用
const app = Vue.createApp({})
 
// 定义一个名为 button-counter 的新全局组件
app.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <button @click="count++">
      点了 {{ count }} 次！
    </button>`
})
 
app.mount('#app')
</script>

  3. 局部组件

    <div id="app">
    <local-a></local-a>
</div>
<script>
var localA = {
  template: '<h1>自定义组件!</h1>'
}
 
const app = Vue.createApp({
  components: {
    'local-a': localA
  }
})
 
app.mount('#app')
</script>

  4. Prop

    prop 是子组件用来接受父组件传递过来的数据的一个自定义属性

    <div id="app">
  <name title="xx"></name>
  <name title="ss"></name>
  <name title="qq"></name>
</div>
 
<script>
const app = Vue.createApp({})
 
app.component('name', {
  <!-- 父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop" -->
  props: ['title'],
  template: `<h4>{{ title }}</h4>`
})
 
app.mount('#app')
</script>

计算属性--computed

在处理一些复杂逻辑时使用

  1. 实例

    <div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
    
<script>
const app = {
  data() {
    return {
      message: 'wxs'
    }
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

  2. computed vs methods

    我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

监听属性

监听属性 watch 检测响应数据，检测到数据发送变化执行

  1. 实例

    <div id = "app">
    <p style = "font-size:25px;">计数器: {{ counter }}</p>
  	<!-- counter++ 为 counter + 1 counter-- 为 counter - 1 -->
    <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
    
<script>
const app = {
  data() {
    return {
      counter: 1
    }
  }
}
vm = Vue.createApp(app).mount('#app')
vm.$watch('counter', function(nval, oval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
});
</script>

事件处理

使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。

v-on 指令可以缩写为 @ 符号

  1. 基础语法

    v-on:click="methodName"
或
@click="methodName"

  2. 接收一个定义的方法来调用

    <div id="app">
  <!-- `greet` 是在下面定义的方法名 -->
  <button @click="greet">点我</button>
</div>
 
<script>
const app = {
  data() {
    return {
      name: 'wxs'
    }
  },
  methods: {
    greet(event) {
      // `methods` 内部的 `this` 指向当前活动实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM event
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

表单

  1. 输入框

    <input> <!-- 普通输入框 -->
<textarea></textarea> <!-- 文本域 -->

  2. 单选框/复选

    <div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
    
  <p>多个复选框：</p>
  <input type="checkbox" id="a" value="a" v-model="checkedNames">a
  <input type="checkbox" id="b" value="b" v-model="checkedNames">b
  <input type="checkbox" id="c" value="c" v-model="checkedNames">c
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>
 
<script>
const app = {
  data() {
    return {
      checked : false,
      checkedNames: []
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

  3. 下拉框

    <div id="app">
  <select v-model="selected" name="site">
    <option value="">选择一个网站</option>
    <option value="www.baidu.com">www.baidu.com</option>
    <option value="www.google.com">www.google.com</option>
  </select>
</div>
 
<script>
const app = {
  data() {
    return {
    }
  }
}
 
Vue.createApp(app).mount('#app')
</script>

钩子函数

  • created : 在绑定元素的属性或事件监听器被应用之前调用。
  • beforeMount : 指令第一次绑定到元素并且在挂载父组件之前调用。。
  • mounted : 在绑定元素的父组件被挂载后调用。。
  • beforeUpdate: 在更新包含组件的 VNode 之前调用。。
  • updated: 在包含组件的 VNode 及其子组件的 VNode 更新后调用。
  • beforeUnmount: 当指令与在绑定元素父组件卸载之前时，只调用一次。
  • unmounted: 当指令与元素解除绑定且父组件已卸载时，只调用一次。
import { createApp } from 'vue'
const app = createApp({})
 
// 注册
app.directive('my-directive', {
  // 指令是具有一组生命周期的钩子：
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  created() {},
  // 在绑定元素的父组件挂载之前调用
  beforeMount() {},
  // 绑定元素的父组件被挂载时调用
  mounted() {},
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate() {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated() {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount() {},
  // 卸载绑定元素的父组件时调用
  unmounted() {}
})
 
// 注册 (功能指令)
app.directive('my-directive', () => {
  // 这将被作为 `mounted` 和 `updated` 调用
})
 
// getter, 如果已注册，则返回指令定义
const myDirective = app.directive('my-directive')

路由

是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。

我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
    <router-link to="/">Go to Home</router-link>
    <router-link to="/about">Go to About</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

Ajax(axios)

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中

  1. Get

    axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

  2. Post

    axios.post(url)
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });

概念关系图

  1. Vue3的请求生命周期

    vue3请求生命周期

posted @   佛系工程师  阅读(44)  评论(0)  编辑  收藏  举报
相关博文：
·  使用Docker搭建ClickHouse+Zookeeper集群
·  vue3基础入门
·  Vue基础
·  Vue核心介绍
·  Vue3的学习---2
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手