专业网站建设,服装定制的宣传广告,网页微信下载,怎么用链接进自己做的网站吗文章目录1. 前言2. Vue 的特点3. 安装 Vue4. HelloWord1. 前言 vue是什么 #xff1f; 引用 #xff1a; vue.js 文档 Vue (读音 /vjuː/#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是#xff0c;Vue 被设计为可以自底向上逐层…
文章目录1. 前言2. Vue 的特点3. 安装 Vue4. HelloWord1. 前言 vue是什么 引用 vue.js 文档 Vue (读音 /vjuː/类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue 的核心库只 关注视图层不仅易于上手还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时Vue 也完全能够为复杂的单 页应用提供驱动。 可以看到 上面说 vue 是 一套用于构建用户界面的渐进式框架 啥意思呢
构建用户界面 : 将我们拿到的数据 通过某些方法 变成用户所能看到的界面 。
渐进式 Vue 可以自底向上逐层的应用 .
简单来说 : 如果我们自己写的应用非常简单 就可以 引入一个轻量小巧的核心库 。 如果应用比较复杂 就可以引入各式各样的Vue 插件 。 2. Vue 的特点 1.采用组件化模式 提高代码复用率 且让代码更好维护。 2. 声明式编码 , 让编码人员无需直接操作 DOM 提高开发效率 . 假设 有一组数据
[{id 001, name :张三 , age :18}{id 002, name :李四 , age :18}{id 003, name :王五 , age :18}
]在提供一个容器 ul id list /ul 想要实现下面这样的效果 这里先使用 js 写 , 命令式 编码 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/headbodyul idlist/ul/ulscript// 数据let persons [{id: 001, name: 张三, age: 18},{id: 002, name: 李四, age: 18},{id: 003, name: 王五, age: 18}]// 准备 html 字符串let htmlStr persons.forEach(p {htmlStr li${p.id} - ${p.name} - ${p.age}/li})// 获取 list 内容let list document.getElementById(list);// 修改内容 (亲自操作 DOM )list.innerHTML htmlStr;/script
/body/html使用 vue 完成 声明式 编码 !DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src../js/vue.js/script
/headbodydiv idrootulli v-for(person,index) in persons :keyindex{{person.id}} - {{person.name}} - {{person.age}}/li/ul/divscriptnew Vue({el: #root,data: {persons: [{id: 001, name: 张三, age: 18},{id: 002, name: 李四, age: 18},{id: 003, name: 王五, age: 18}]}})/script
/body/html3. 使用虚拟DOM 优秀的 Diff算法 , 尽量复用 DOM 节点. 3. 安装 Vue 这里可以通过 官方文档 下载 Vue.js (vuejs.org) 这里我们安装完 vue 引入 vue . vue 开发者工具安装 下面通过 vue 来 写一个 helloword 程序 4. HelloWord 这里我们想要通过 vue 来让页面显示HelloWord 就需要先创建一个 vue 实例对象 让后通过 配置项 el 指定服务的容器 el 指定完 后 就可以通过 data 存储数据 来为 el 所指定的容器使用 。 (此时涉及到插值语法 ,后面说). 下面我们根据这个 案例 引出一个注意事项 : 容器和实例一一对应 另外
