setup()与reactive、toRefs

hamimelon2020

已于 2022-03-02 17:46:38 修改

阅读量150

点赞数

分类专栏： vue JavaScript 文章标签： vue.js javascript 前端

于 2022-03-02 12:13:19 首次发布

本文链接：https://blog.csdn.net/weixin_40945354/article/details/123226975

版权

vue 同时被 2 个专栏收录

722 篇文章 4 订阅

订阅专栏

JavaScript

628 篇文章 6 订阅

订阅专栏

const app = Vue.createApp({});和const app = Vue.createApp({xxx});是组件的标志。如果没有组件，不用打头就是这个。是不是？

<!DOCTYPE html>
<div id="app">
<p>作者: {{ author }</p>
<p>书名: {{ title }}</p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
//const app = Vue.createApp({});
const { reactive, toRefs } = Vue;
const app = Vue.createApp({
  setup() {
    const book = reactive({
      author: '孙鑫',
      year: '2020',
      title: 'Java无难事',
      description: '让Java的学习再无难事',
      price: '188'
    })

    let { author, title } = book;
    return {
      author,
       title
    }
  }
})

app.mount('#app')

</script>

不知道为啥
不对

<!DOCTYPE html>
<div id="app">
<p>作者: {{ author }</p>
<p>书名: {{ title }}</p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>

const { reactive, toRefs } = Vue;
const app = Vue.createApp({
  setup() {
    const book = reactive({
      author: '孙鑫',
      year: '2020',
      title: 'Java无难事',
      description: '让Java的学习再无难事',
      price: '188'
    })

    let { author, title } = book;
    return {
      author,
       title
    }
  }
})

app.mount('#app')

</script>

<!DOCTYPE html>
<div id="app">
<p>作者: {{ author }</p>
<p>书名: {{ title }}</p>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>

const {reactive, toRefs} = Vue;
const app = Vue.createApp({
  setup() {
    const book = reactive({
      author: '孙鑫',
      year: '2020',
      title: 'Java无难事',
      description: '让Java的学习再无难事',
      price: '188'
    })

    let { author, title } = toRefs(book);
    return {
      author,
       title
    }
  }
})

const vm = app.mount('#app')

</script>

<!DOCTYPE html>
<html>
    <head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
        <div id="app">
            <p>作者：{{author}}</p>
            <p>书名：{{title}}</p>
        </div>
		<script src="https://unpkg.com/vue@next"></script>
        <script>
            const {reactive, toRef} = Vue;
            const app = Vue.createApp({
                setup(){
                    const book = reactive({
                        author: '孙鑫',
                        year: '2020',
                        title: 'Java无难事',
                        description: '让Java的学习再无难事',
                        price: '188'
                    })
                let { author, title } = book;
                    
                   
                    return {
                        author,
                        title
                    }
                }
            })
            const vm = app.mount('#app');
        </script>
	</body>
</html>

少了一个}

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<div id="app">
<p>作者:{{author}}</p>
<p>书名: {{title}}</p>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const {reactive, toRefs} = Vue;
const app = Vue.createApp({
  setup(){
    const book = reactive({
      author: '孙鑫',
      year: '2020',
      title: 'Java无难事',
      description: '让Java的学习再无难事',
      price: '188'
    })
    let { author, title } = book;
    
    return {
      author,
       title
    }
  }
}).mount('#app')

</script>
</html>

hamimelon2020

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
setup()与reactive、toRefs

const app = Vue.createApp({});和const app = Vue.createApp({xxx});是组件的标志。如果没有组件，不用打头就是这个。是不是？<!DOCTYPE html><div id="app"><p>作者: {{ author }</p><p>书名: {{ title }}</p></div><script src="https://unpkg.com/vue
复制链接

扫一扫