Vue.js - 渐进式 JavaScript 框架

weixin_47178106

已于 2024-08-17 10:39:38 修改

阅读量218

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2024-08-17 10:38:17 首次发布

本文链接：https://blog.csdn.net/weixin_47178106/article/details/141276577

"渐进式"是指可以按需引入Vue.js的部分功能, 而不必全量引入整个框架

<div id = "app">

{{msg}}
</div>

指定一个 id 为 app 的 div 元素

{{ }} 插值表达式, 可以将 Vue 实例中定义的数据在视图中进行渲染
如: Vue 实例中定义一个 msg 变量, 值为 "Hello world", 在模板中若使用插值表达式 {{ msg }} 则会被渲染成 "Hello world"

响应式数据是指当数据发生变化时, 模板中依赖于该数据的部分会自动更新

//创建一个vue应用程序
Vue.createApp({
//Composition API(组合式 API) 的 setup选项 用于设置响应式数据和方法等
setup(){
	//
	 const msg= ref('Hello vue!')
      return {
        msg
      }
}
}).mount("#app") //将 Vue 应用程序挂载(mount) 到 app 元素上

#ref()
接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 .value。

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

<div id="app">
    {{ msg }}

    <h2>{{ web.title }}</h2>
    <h3>{{ web.url }}</h3>
</div>

  //创建一个 Vue 应用程序
    Vue.createApp({
        //Composition API(组合式 API) 的 setup选项 用于设置响应式数据和方法等
        setup() {
            //Composition API 的 reactive()函数 用于创建响应式数据
            const web = Vue.reactive({ //Vue.reactive 创建一个响应式数据对象 web, 其中包含 title 和 url 属性
                title: "111",
                url: "baidu.com"
            })

            //返回数据
            return {
                msg: "success",
                web
            }
        }
    }).mount("#app") //将 Vue 应用程序挂载(mount) 到 app 元素上

#reactive()
还有另一种声明响应式状态的方式，即使用 reactive() API。与将内部值包装在特殊对象中的 ref 不同，reactive() 将使对象本身具有响应性：
import { reactive } from ‘vue’

const state = reactive({ count: 0 })
<button @click=“state.count++”>
{{ state.count }}

//将 Vue 对象中的 createApp、reactive 属性赋值给 createApp、reactive 变量
const { createApp, reactive } = Vue //解构赋值语法

createApp({
setup() {
const web = reactive({
title: “1111”,
url: “baidu.com”
})

    return {
        msg: "success",
        web
    }
}

}).mount(“#app”)