石家庄网站推广,长湖南营销型网站,工程公司资质怎么申请,宁国网站设计公司目录 一、简介1.1 参考网址1.2 下载 二、Hello Vue2.1 创建页面2.2 安装Live Server插件2.4 安装 vue-devtools2.5 预览效果 一、简介 Vue#xff08;读音 /vjuː/, 类似于 view#xff09; 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是#xff0c;Vue 被设… 目录 一、简介1.1 参考网址1.2 下载 二、Hello Vue2.1 创建页面2.2 安装Live Server插件2.4 安装 vue-devtools2.5 预览效果 一、简介 Vue读音 /vjuː/, 类似于 view 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单页应用提供驱动概括为以下三点
Vue 是一套构建用户界面的渐进式框架。Vue 只关注视图层 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
1.1 参考网址
Vue3 官网Vue2 中文文档官网
1.2 下载
开发版和生产版下载地址Vue.js下载 二、Hello Vue 用VSCode新建一个简单的VUEJS工程结构目录如下 2.1 创建页面
新建index.html页面引入vue.js准备一个div容器创建Vue模板将Vue实例和容器绑定
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../lib/vue.js/script
/head
body!-- 准备好一个容器:称为Vue模板 两个花括号为插值语法里面的为js表达式--div idrooth1hello {{name.toUpperCase()}}!/h1/divscript// 阻止 vue 在启动时生成生产提示。Vue.config.productionTip false;// 创建Vue实例容器和实例一对一new Vue({el:#root,// data中用于存储数据数据提供el所指定的的容器去使用。data: {name:Vue}});/script
/body
/html2.2 安装Live Server插件
在扩展里面搜索Live Server 然后安装 安装完成之后在html页面中右击可以查看到Open with Live Server选项以后页面就此选项打开。 2.4 安装 vue-devtools
打开Microsoft Edge 浏览器在插件应用商店里面搜索vue-devtools安装即可。
2.5 预览效果
我们打开Vue-devtools 可以查看到Vue的实例数据。现在数据和 DOM 已经被建立了关联所有东西都是响应式的。
注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #root) 然后对其进行完全控制。那个 HTML 是我们的入口但其余都会发生在新创建的 Vue 实例内部。
