行业网站名录,建网站要多少钱,百度推广代理商与总公司的区别,wordpress模块化我们已经知道了Vue框架可以 基于数据帮助我们渲染出用户界面#xff0c;那应该怎么做呢#xff1f;
核心步骤#xff08;4步#xff09;#xff1a; 准备容器 引包#xff08;官网#xff09; — 开发版本/生产版本 创建Vue实例 new Vue() 指定配置项#xff0c;渲…我们已经知道了Vue框架可以 基于数据帮助我们渲染出用户界面那应该怎么做呢
核心步骤4步 准备容器 引包官网 — 开发版本/生产版本 创建Vue实例 new Vue() 指定配置项渲染数据 el:指定挂载点data提供数据
参考代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title创建Vue实例/title
/head
body
!-- 不是Vue管理的范围 --
div classbox2box2 -- {{ count }}
/div
div classboxbox -- {{ msg }}
/div
-----------------------------------------------------
!-- Vue所管理的范围 --
div idapp!-- 这里将来会编写一些用于渲染的代码逻辑 --h1{{ msg }}/h1a href#{{ count }}/a
/div!-- 引入的是开发版本包 - 包含完整的注释和警告 --
script srchttps://cdn.jsdelivr.net/npm/vue2.7.14/dist/vue.js/scriptscript// 一旦引入 VueJS核心包在全局环境就有了 Vue 构造函数const app new Vue({// 通过 el 配置选择器指定 Vue 管理的是哪个盒子el: #app,// 通过 data 提供数据data: {msg: Hello 星辰大海,count: 666}})
/script
/body
/html
运行效果
我们已经成功创建了第一个 Vue 应用看起来这跟渲染一个字符串模板非常类似但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联所有东西都是响应式的。
