Vue.js基础2
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM:
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
我们已经生成了我们的第一个 Vue 应用!看起来这跟单单渲染一个字符串模板非常类似,但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被绑定在一起,所有的元素都是响应式的。我们如何知道?打开你的浏览器的控制台(就在这个页面打开),并修改 app.message
,你将看到上例相应地更新。
条件与循环
控制切换一个元素的显示也相当简单:
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
继续在控制台设置 app3.seen = false
,你会发现 “现在你看到我了” 消失了。
这个例子演示了我们不仅可以绑定 DOM 文本到数据,也可以绑定 DOM 结构到数据。而且,Vue 也提供一个强大的过渡效果系统,可以在 Vue 插入/更新/删除元素时自动应用过渡效果。
v-for
指令可以绑定数组的数据来渲染一个项目列表:
<div id="div">
<ul>
<li v-for="item in arr">{{item}} {{$index}}</li>
</ul>
</div>
new Vue({
el:"#div",//id名 el:element
data:{
arr:[1,2,3,4,5]//展示的数据
}
})
另一种书写的方式:
<ul>
<li v-for="(key,value) in json">{{$index}} {{key}} {{value}}</li>
</ul>
new Vue({
el:"#div",//id名 el:element
data:{
json:{
a:123,
b:3454,
c:'werwer',
d:4645645
}
}
})
过滤器
<div id="div">
{{iNum | currency '¥'}}<br />
{{str1 | capitalize}}<br />
{{str2 | uppercase}}<br />
{{str3 | lowercase}}<br />
{{arr | limitBy 3}}
</div>
new Vue({
el:"#div",//id名 el:element
data:{
iNum:123456789,//货币符号过滤器
str1:'welcome to vue',//首字母大写
str2:"welcome to vue",//全部大写
str3:'WELCOME TO VUE', //全部小写
arr:[1,2,3,4,5,6]
}
})
明天继续啦。。。。。。
Vue.js基础2的更多相关文章
- Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- Vue.js基础拾遗
本篇目录: 模版语法 插值 指令 v-bind指令 v-on指令 计算属性与侦听器 计算属性VS方法 计算属性VS侦听属性 Class与Style绑定 绑定HTML Class 绑定内联样式 条件渲染 ...
- Vue.js 基础快速入门
Vue.js是一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.Vue.js提供了简洁.易于理解的API,使得我们能够快速地上手并使用Vue.js 如果之前已经习惯了用jQue ...
- Vue.js基础语法(三)
vue学习的一系列,全部来自于表哥---表严肃,是我遇到过的讲课最通透,英文发音最好听的老师,想一起听课就去这里吧 https://biaoyansu.com/i/hzhj1206 1过滤器filte ...
- 两万字Vue.js基础学习笔记
Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...
- 记录21.07.22 —— Vue.js基础(一)
VUE基础 语雀课件地址 Vue.js框架 Vue中文文档 Vue.js 创建vue项目 ①在一个空项目中引入vue的js文件 <script src="https://cdn.jsd ...
- 一份不错的vue.js基础笔记!!!!
第一章 Vue.js是什么? Vue(法语)同view(英语) Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项 ...
- Vue.js 基础示例
为 Vue.js 初学者写了一些简单的示例,在线示例 示例源码 了解更多请查看 Vue.js 官网文档:http://vuejs.org.cn/guide/
- vue.js基础知识篇(7):表单校验详解
目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...
- vue.js基础知识篇(6):组件详解
第11章:组件详解 组件是Vue.js最推崇也最强大的功能之一,核心目标是可重用性. 我们把组件代码按照template.style.script的拆分方式,放置到对应的.vue文件中. 1.注册 V ...
随机推荐
- 比较 GET 与 POST
post比get安全 get请求方法向url添加数据 全部用POST不是十分合理,最好先把请求按功能和场景分下类, 对数据请求频繁,数据不敏感且数据量在普通浏览器最小限定的2k范围内,这样的情况使用 ...
- elasticsearch-sql插件
elasticsearch DSL语法有些时候比较难懂换成SQL好处理一些,网上找到一个插件 https://github.com/NLPchina/elasticsearch-sql 安装elast ...
- Codeforces Round #556 (Div. 2) - D. Three Religions(动态规划)
Problem Codeforces Round #556 (Div. 2) - D. Three Religions Time Limit: 3000 mSec Problem Descripti ...
- 基础篇:6)形位公差标注(GD&T标准)-总章
本章目的:理解GD&T概念,读懂和绘制GD&T图纸.本章是GD&T指引章节. 1.GD&T概念 GD&T 是 Geometric Dimensioning ...
- 高阶篇:4.1)QFD质量功能展开-总章
本章目的:了解QFD概念和作用,为FMEA打下基础. 1.QFD定义 质量功能展开QFD(Quality Function Deployment),是把顾客或市场的要求转化为设计要求.零部件特性.工艺 ...
- Angular material mat-icon 资源参考_File
ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...
- FreeRTOS-02任务挂起和恢复
根据正点原子FreeRTOS视频整理 单片机:STM32F207VC FreeRTOS源码版本:v10.0.1 任务挂起和恢复API函数: 工程列表: 1. main.c /**/ #include ...
- css提取数据2个常用方法
提取标签里的内容 所谓数据就是HTML里标签的内容,如下面红色字体,就是标签内容 <title>我只是个实验 - SCRAPY</title> 提取标签里的数据,标签可以是ti ...
- Vue项目中使用HighChart
记:初次在Vue项目中使用 HighChart 的时候要走的坑 感谢这位哥们的思路 传送门 Vue-cli项目使用 npm install highcharts --save 让我们看看 highch ...
- nginx应用
windows: 启动:start nginx 退出:nginx -s quit 检查配置是否正确:nginx -t -c ./conf/nginx.conf 查看是否在运行:tasklist /fi ...