Vue.js库的第一天的学习
一,vue.js简介
Vue.js可以作为一个js库来使用,也可以用它全套的工具来构建系统界面,这些可以根据项目的需要灵活选择
所以说, vue.js是一套构建用户界面的渐进式框架
Vue.js的核心库只关注视图层,Vue的目标通过尽可能简单的API实现相应的数据绑定,
在这一点上Vue.js类似于后台的模板语言
Vue.js也可以将界面拆分成一个个的组件,通过组件来构件界面,
然后用自动化工具来生成单页面系统
二,Vue实例
<!-- 每一个Vue应用都是通过实例化一个新的Vue对象开始的 -->
<div id="app">{{ msg }}</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'Hello World!'
}
})
</script>
其中,el属性对应一个标签,当vue对象创建后,这个标签的区域就被vue对象接管,
在这个区域就可以使用vue对象中定义的属性和方法
三,Vue.js模板语法
模板语法指的是如何将输入放入html中, Vue.js使用了基于HTML的模板语法,
允许开发者声明式的将DOM绑定至底层Vue实例的数据。
<div id="app">
<!-- 插入式, 使用'Mustache'语法的文本插值 -->
<p>{{ sTr }}</p>
<p>{{ sTr.split('').reverse().join('')}}</p>
<p>{{ iNum+15 }}</p>
<p>{{ bisOk?'Yes':'No' }}</p>
<a v-bind:href=sUrl>百度的链接</a><br><br>
<!-- 指令, 监听click事件来执行fnReversal方法 -->
<input type="button" value="反转" v-on:click='fnReversal'>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
sTr:'Hello World!',
iNum:10,
bisOk: true,
sUrl:'http://www.baidu.com'
},
methods:{
fnReversal:function(){
this.sTr = this.sTr.split("").reverse().join('');
}
}
})
</script>
四,class 与 style绑定
使用v-bind指定来设置元素的class属性或者style属性,它们的属性值可以是表达式,
vue.js在这个一块做了增强,表达式结果除了是字符串之外,还可以是对象或数组
<div id="app" v-bind:class="{big:isActive, red:haserror}">
绑定方式一,对象语法
</div>
<script>
// 第一种方式对象语法
var vm = new Vue({
el:'#app',
data:{
isActive: true,
haserror: false
}
})
</script>
五,条件渲染
通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)
<!-- v-if 可以控制元素的创建或者被销毁 -->
<!-- v-if 是真正的把元素删除了 -->
<div id="box">
<h1 v-if='isV'>这是使用 v-if 的h1</h1>
<h2 v-else>这是使用 v-else 的h2</h2> <!-- v-else 必须紧跟在 v-if或者v-else-if 后面 --> <h3 v-show='isV'>这是使用 v-show 的h3</h3> <!-- v-show把元素的 display 状态改为none,只是隐藏了-->
<div v-if='sCode=="A"'>A</div>
<div v-else-if='sCode=="B"'>B</div>
<div v-else-if='sCode=="C"'>C</div>
<div v-else>NOT A/B/C</div>
</div>
<script>
var vm = new Vue({
el:'#box',
data:{
isV: false,
sCode:'D'
}
})
</script>
Vue.js库的第一天的学习的更多相关文章
- 前端之Vue.js库的使用
vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架 ...
- vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目
vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...
- 2018-11-21 手工翻译Vue.js源码第一步:14个文件重命名
背景 对现有开源项目的代码进行翻译(文件名/命名/注释) · Issue #107 · program-in-chinese/overview 简单地说, 通过翻译源码, 提高项目代码可读性(对于母语 ...
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
- Vue.js源码全方位深入解析--学习笔记
模板中的插入变量是如何渲染到DOM上的? initMixin(Vue)->_init->$options-> $mount()当执行该挂载方法时DOM变化 为什么可以通过this访问 ...
- vue js库的条件渲染
条件渲染 通过条件指令可以控制元素的创建(显示)或者销毁(隐藏),常用的条件指令如下: v-if v-if可以控制元素的创建或者销毁 <h1 v-if="ok">Yes ...
- 总结:iview(基于vue.js的开源ui组件)学习的一些坑
1.要改变组件的样式 找到这个组件的class名,然后覆盖样式. 举例:修改select框,显示圆角.只需给找到类名并写样 .ivu-select-selection{ border-radius:1 ...
- Vue.js学习笔记 第一篇 数据绑定
双花括号文本插值 先来个最简单的例子,看完之后立马会用Vue了,是不是很有成就感 <!DOCTYPE html> <html> <head> <meta ch ...
- 前端架构之路:使用Vue.js开始第一个项目
Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. ...
随机推荐
- [kuangbin带你飞]专题二十二 区间DP----POJ - 2955
区间DP标准入门题目. 区间DP大概思路是这样的. 第一层枚举长度,因为我们需要从小区间一步步推到大区间 第二层枚举左端点,那么右端点就定了. 第三层枚举间断点,由间断点合并得到大区间. 这道括号匹配 ...
- 哈尔滨工业大学(威海)第九届ACM程序设计竞赛 Virtual Youtuber
链接 [https://ac.nowcoder.com/acm/contest/624/G] 题意 其实题意说的辣鸡死了,没有说明确. y is the subsequences that its s ...
- 微信内分享第三方H5链接无法使用内置浏览器打开的解决方案
很多朋友在微信内想分享转发H5链接的时候都会很容易碰到H5链接在微信内无法打开或在微信内无法打开app下载页的情况.通常这种情况微信会给个提示 “已停止访问该网址” ,那么导致这个情况的因素有哪些呢, ...
- 脚本安装Rocky版OpenStack 1控制节点+1计算节点环境部署
视频安装指南请访问: http://39.96.203.138/wordpress/document/%E8%84%9A%E6%9C%AC%E5%AE%89%E8%A3%85rocky%E7%89%8 ...
- laravel 开启定时任务需要操作
1.在xshell 中 crontab -e //编辑任务crontab -l //查看执行中的任务列表 2.在打开的任务中: /home/wwwroot/default 换为自己项目的根路径 vag ...
- 题解 P2763 【试题库问题】
这题可以用网络流,但我用的是匈牙利算法 进入正题 设第个类型需要个.将每个类型拆成个点,用一个边集数组记录它拆成的点. 第个试题有个类型,分别将与拆成的点连边,这样便构成了一个二分图. 使用匈牙利算法 ...
- python-装饰器初解
# 装饰器的作用# 不想修改函数的调用方式( func() 还是这样调用),但是还想再原来函数前后添加功能# timer() 就是一个装饰器函数,只对一个函数,有一些装饰作用 import time ...
- Logstash处理json格式日志文件的三种方法
假设日志文件中的每一行记录格式为json的,如: {"Method":"JSAPI.JSTicket","Message":"JS ...
- leveldb实现原理
LevelDb日知录之一:LevelDb 101 说起LevelDb也许您不清楚,但是如果作为IT工程师,不知道下面两位大神级别的工程师,那您的领导估计会Hold不住了:Jeff Dean和Sanja ...
- 浅谈flex布局中小技巧
最近有个面试,面试官问到,在一个横向布局上,假设有三个div,每个宽度为定宽apx,如果想使两侧宽度为x,中间div间间隔为2x.x可以自适应.如下图: 怎么做很简单,两行代码就搞定: justi ...