一,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库的第一天的学习的更多相关文章

  1. 前端之Vue.js库的使用

    vue.js简介 Vue.js读音 /vjuː/, 类似于 view Vue.js是前端三大新框架:Angular.js.React.js.Vue.js之一,Vue.js目前的使用和关注程度在三大框架 ...

  2. vue.js 踩坑第一步 利用vue-cli vue-router搭建一个带有底部导航栏移动前端项目

    vue.js学习 踩坑第一步 1.首先安装vue-cli脚手架 不多赘述,主要参考WiseWrong 的 Vue 爬坑之路(一)-- 使用 vue-cli 搭建项目 2.项目呈现效果 项目呈现网址:w ...

  3. 2018-11-21 手工翻译Vue.js源码第一步:14个文件重命名

    背景 对现有开源项目的代码进行翻译(文件名/命名/注释) · Issue #107 · program-in-chinese/overview 简单地说, 通过翻译源码, 提高项目代码可读性(对于母语 ...

  4. vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

    这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...

  5. Vue.js源码全方位深入解析--学习笔记

    模板中的插入变量是如何渲染到DOM上的? initMixin(Vue)->_init->$options-> $mount()当执行该挂载方法时DOM变化 为什么可以通过this访问 ...

  6. vue js库的条件渲染

    条件渲染 通过条件指令可以控制元素的创建(显示)或者销毁(隐藏),常用的条件指令如下: v-if v-if可以控制元素的创建或者销毁 <h1 v-if="ok">Yes ...

  7. 总结:iview(基于vue.js的开源ui组件)学习的一些坑

    1.要改变组件的样式 找到这个组件的class名,然后覆盖样式. 举例:修改select框,显示圆角.只需给找到类名并写样 .ivu-select-selection{ border-radius:1 ...

  8. Vue.js学习笔记 第一篇 数据绑定

    双花括号文本插值 先来个最简单的例子,看完之后立马会用Vue了,是不是很有成就感 <!DOCTYPE html> <html> <head> <meta ch ...

  9. 前端架构之路:使用Vue.js开始第一个项目

    Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发.   一.技术准备 笔者建议在开始项目前,对以下两个技术点进行了解. ...

随机推荐

  1. Git使用(积累一些常用的命令)

    1. 取消某一次合并  git merge --abort 可以参考的教程:https://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248 ...

  2. java接口测试入门

    一.什么是接口 接口是前端和后端的数据通道 二.如何获取接口 1.开发不提供接口文档,通过抓包工具比如fiddler进行抓取,如下: 步骤一:设置浏览器(比如火狐)代理 步骤二:设置url过滤器,进入 ...

  3. iOS App上架流程(2016详细版)来源DeveloperLY

    一.前言: 作为一名iOSer,把开发出来的App上传到App Store是必要的.下面就来详细讲解一下具体流程步骤. 二.准备: 一个已付费的开发者账号(账号类型分为个人(Individual).公 ...

  4. Centos7 启动指定docker容器报错

    今天做docker实验时,把docker镜像pull下后,启动报如下错误: 错误信息:WARNING: IPv4 forwarding is disabled. Networking will not ...

  5. java学习——JDK1.8接口和实现类

    Java 8 新特性:接口的静态方法和默认方法 https://blog.csdn.net/sun_promise/article/details/51220518 接口的默认方法和静态方法 http ...

  6. mysql排序,同样的sql,mysql 每次查询结果顺序不一致

    某天项目中写了一句排序sql,但是发现每次执行的结果都不同,就是排序顺序不一样. select * from table_tmp order by printStatus asc,dealTime d ...

  7. SpringBoot+Redis整合

    SpringBoot+Redis整合 1.在pom.xml添加Redis依赖 <!--整合Redis--> <dependency> <groupId>org.sp ...

  8. Python基础:搭建开发环境(1)

    1.Python语言简介 2.Python环境 Python环境产品存在多个. 2.1 CPython CPython是Python官方提供的.一般情况下提到的Python就是指CPython,CPy ...

  9. Microsoft Connect 2018 Summary

    https://www.microsoft.com/en-us/connectevent/

  10. NOIP算法小结(转载)

    (一)数论 1.最大公约数,最小公倍数 2.筛法求素数 3.mod规律公式 4.排列组合数,错排 5.Catalan数 6.康托展开 7.负进制 8.中位数的应用 9.位运算 (二)高精度算法 1.朴 ...