账户中心 退出系统
开发文档 资讯·分享 技术交流 会员登录
phpGrace GSCMS 公众号系统
Vue 3 技术分享 - 起步,声明式渲染
来自主题 : 技术分享   ·  作者 : 林晓锦     ·  发布时间 : 11/09/2021   ·  浏览次数  :  171

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统,示例 : 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>计数器 : {{counter}}<script src="https://unpkg.com/vue@next"></script>
<script>
const App = {
  data() {
    return {
      counter: 0
    }
  },
  mounted() {
      setInterval(()=>{this.counter++;},1000);
  },
}
Vue.createApp(App).mount('#app');
</script>
</body>
</html>

上面的代码演示了 :

1 加载 vue.js

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

2 通过 Vue.creatApp().mount() 绑定到 dom 对象,完成响应式构建 :

Vue.createApp(App).mount('#app');

至此一个最简单的 Vue.js 结构就准备好了,您会发现 creatApp() 函数需要一个对象形式的参数,mount() 则对应一个 dom 对象选择器。

收藏此文
相关回复
{{comment.u_nickname}}
{{comment.u_nickname}} @ {{comment.comments_reply_uname}}
{{comment.comments_content}}
 {{comment.comments_date}}
 点赞 ({{comment.comments_like_count}})   回复 ({{comment.comments_reply_count}})
{{commentSon.u_nickname}}
{{commentSon.u_nickname}} @ {{commentSon.comments_reply_uname}}
{{commentSon.comments_content}}
 {{commentSon.comments_date}}
 点赞 ({{commentSon.comments_like_count}})   回复 ({{commentSon.comments_reply_count}})
{{loadmoreText}}