前端|初学vue
1.1进入vue官网了解vue到底是啥
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
1.2安装
创建一个vue.html文件
引入 Vue:
引入:
<script src="https://cdn.jsdelivr.net/npm/vue"></script>或<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
1.3申明是渲染
① Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统:
<div id="app"> {{ message }}</div>
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})
这样我们成功船舰了一个Vue,可以得到一个Hello Vue!,数据和 DOM 已经就建立了关联,所有东西都是响应式的。注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是#app) 然后对其进行完全控制。HTML 是我们的入口,但其余都会发生在新创建的 Vue 实例内部。
个人认为为了方便理解:我可以理解为。HTML其实就是一个单纯的入口,起到关键作用的是Vue,因为其余都会发生在新创建的 Vue 实例内部,Vue实例内部才有真正的数据。是关联的DOM元素也就是这里的(#app)将入口和Vue示例内部(也就是数据和一些实际的操作)联系了起来。
② 除了文本插值,我们还可以像这样来绑定元素attribute:
<div id="app-2"> <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息! </span></div>
var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() }})
v-bind attribute 被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊 attribute。它们会在渲染的 DOM 上应用特殊的响应式行为。在这里表示:将这个元素节点的 title attribute 和 Vue 实例的messageproperty保持一致。
1.4条件循环
①
<div id="app-3"> <p v-if="seen">现在你看到我了</p></div>
var app3 = new Vue({ el: '#app-3', data: { seen: true }})
这样就会显示现在你看到我了。输入 app3.seen =false,你会发现之前显示的消息消失了。这个例子演示了我们不仅可以把数据绑定到 DOM 文本或 attribute,还可以绑定到 DOM 结构。
②Vue 还提供一个强大的过渡效果系统,可以在 Vue 插入/更新/移除元素时自动应用过渡效果。还有其它很多指令,每个都有特殊的功能。例如,v-for 指令可以绑定数组的数据来渲染一个项目列表:
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol></div>
var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] }})
输入 app4.todos.push({text: '新项目' }),你会发现列表最后添加了一个新项目。本文是参考vue官网加上一些自己的理解完成的,如理解有误还请指教。
END
- 谈谈分布式事务之二:基于DTC的分布式事务管理模型[上篇]
- 学习SpringMVC——拦截器
- 学习SpringMVC——国际化+上传+下载
- 行业研究:大数据(一)
- 控制并发访问的三道屏障: WCF限流(Throttling)体系探秘[下篇]
- 如何通过VPC在本机搭建局域网
- 你常用的10个MySQL命令
- WCF技术剖析之三十一: WCF事务编程[下篇]
- WCF技术剖析之三十一:WCF事务编程[上篇]
- 学习SpringMVC——你们要的REST风格的CRUD来了
- 并发中的同步--WCF并发体系的同步机制实现
- WCF 技术剖析之三十三:你是否了解WCF事务框架体系内部的工作机制?[下篇]
- 学习SpringMVC——从HelloWorld开始
- 小程序年底重磅更新,小游戏上线,最强入口也来了!
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 第17天:NLP实战(一)——爬取语料及其简单分析
- 搞懂 Redis 缓存穿透、击穿、雪崩
- win10_opencv4.2_cuda11_vs2019 编译
- (Demo分享)利用JavaScript(JS)做一个可输入分钟的倒计时钟功能
- Flutter ListView 列表控件
- 第18天:NLP实战(二)——用DNN实现手势识别
- 「0821更新」Flutter入门系列教程汇总
- (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能
- 第19天:NLP实战(三)——用CNN实现微博谣言检测
- (Demo分享)利用原生JavaScript-ScrollLeft-实现做轮播广告通知
- Flutter问题:Column里面嵌套两个SingleChildScrollView无法滚动
- 搞不懂JS中赋值·浅拷贝·深拷贝的请看这里
- 第20天:NLP实战(四)——用GRU模型实现电影评论情感分析
- Flutter SingleChildScrollView 滚动控件
- Flutter Stack、Positioned 层叠布局