目录

1:什么是Vue.js

2:MVC和MVVM。

3:为什么要学习前段框架

4:框架和库的区别

5:怎么使用Vue。

6:常见的Vue指令

7:  五大事件修饰符

8:在vue中使用class样式

9:使用内联样式

10:v-for指令

11:v-if和v-show指令

小技巧:

注意:

总结:

1:什么是Vue.js

1.1: Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于Weex)
1.2:Vue.js 是前端的**主流框架之一**,和Angular.js、React.js 一起,并成为前端三大主流框架!
1.3: Vue.js 是一套构建用户界面的框架,**只关注视图层**,它不仅易于上手,还便于与第三方库或既有项目整合。(Vue有配套的第三方类库,可以整合起来做大型项目的开发)

2:MVC和MVVM(背诵)

 
前端的主要工作?主要负责MVC中的V这一层;主要工作就是和界面打交道,来制作前端页面效果;

3:为什么要学习流行框架

企业为了提高开发效率:在企业中,时间就是效率,效率就是金钱。
提高开发效率的发展历程:原生JS -> Jquery之类的类库(不断操作兼容性) -> 前端模板引擎(不断操作dom元素) -> Angular.js / Vue.js(能够帮助我们减少不必要的DOM操作;提高渲染效率;双向数据绑定的概念【通过框架提供的指令,我们前端程序员只需要关心数据的业务逻辑,不再关心DOM是如何渲染的了】)
 + 在Vue中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑;
 

4:框架和库的区别

4.1: 框架:是一套完整的解决方案;对项目的侵入性较大,项目如果需要更换框架,则需要重新架构整个项目。
 - node 中的 express;
4.2: 库(插件):提供某一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易切换到其它库实现需求。
  - 1. 从Jquery 切换到 Zepto
  - 2. 从 EJS 切换到 art-template
 

5:怎么使用Vue;

5.1:导包
5.2:创建Vue对象。VM调度这,配置对象。
5.3:插值表达式{{}}.
 

6:常见的指令

6.1:v-cloak  解决插值表达式的闪烁问题。原理是标签的显示隐藏。
6.2:v-text  用来实现数据。
6.3:  v-html  用来展示html文本
6.4:v-bind:   是Vue中,提供用于绑定属性的指令。
   v-bind:可以简写成:
6.5:v-on  Vue中提供了v-on:事件绑定机制。
  v-on:可以简写成@
 
6.6:v-model  双向数据绑定。

 v-mdoel可以实现model和view的双向绑定 v-model只能用在表单元素中 。
input(radio, text, address, email....) select  checkbox  textarea 
 
区别:
1:v-text:没有插值表达式闪烁的问题。
2: v-text会覆盖元素内容。但是插值表达式只会修改插值表达式,不会把整个内容覆盖。
 

7:五大事件修饰符

事件修饰符:
.stop        阻止冒泡
.prevent    阻止默认事件
.capture    添加事件侦听器时使用事件捕获模式
.self       只当事件在该元素本身(比如不是子元素)触发时触发回调
.once       事件只触发一次
 

8:在Vue中使用使用class样式

1. 数组
<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>
 
2. 数组中使用三元表达式
<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>
 
3. 数组中嵌套对象
<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>
4. 直接使用对象
<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>
 

9:使用内联样式

1. 直接在元素上通过 `:style` 的形式,书写样式对象
<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>
 
2. 将样式对象,定义到 `data` 中,并直接引用到 `:style` 中
 + 在data上定义样式:
data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}
 + 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
<h1 :style="h1StyleObj">这是一个善良的H1</h1>
3. 在 `:style` 中通过数组,引用多个 `data` 上的样式对象
 + 在data上定义样式:
data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}
 + 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>
 
 

10:v-for遍历

1:遍历数组
2:遍历对象数组
3:遍历对象
4:遍历数组
key属性添加,如果出现错误的话,key的值是字符串或者数值。
 

11:v-if和v-show指令

 v-if的特点是:每次都会重新删除或者创建元素
 v-for的特点是:每次不会进行DOM的删除或者创建,只是切换元素的状态。
性能上:v-if有较高的性能消耗 ,v-show有较高的初始的渲染消耗
 
小技巧
1:!(英文)+点击enter或者Tab键快速生成基本的代码。
2:div#app直接点击enter生成div标签
 
注意 :
1:在vm实例中,如果想获取data上的数据,或者想要调用methods中国你的方法,必须通过this.属性名字或者this.方法名,来进行访问,这里的this就表示我们new出来的vm实例对象。
2:箭头函数:用来解决内部this指向外部this的问题。
 
 
总结:
<!-- 1. MVC 和 MVVM 的区别 -->
<!-- 2. 学习了Vue中最基本代码的结构 -->
<!-- 3. 插值表达式   v-cloak   v-text   v-html   v-bind(缩写是:)   v-on(缩写是@)   v-model   v-for   v-if     v-show -->
<!-- 4. 事件修饰符  :  .stop   .prevent   .capture   .self     .once -->
<!-- 5. el  指定要控制的区域    data 是个对象,指定了控制的区域内要用到的数据    methods 虽然带个s后缀,但是是个对象,这里可以自定义了方法 -->
<!-- 6. 在 VM 实例中,如果要访问 data 上的数据,或者要访问 methods 中的方法, 必须带 this -->
<!-- 7. 在 v-for 要会使用 key 属性 (只接受 string / number) -->
<!-- 8. v-model 只能应用于表单元素 -->
<!-- 9. 在vue中绑定样式两种方式  v-bind:class   v-bind:style -->

01 (H5*) Vue第一天的更多相关文章

  1. 【爬虫入门01】我第一只由Reuests和BeautifulSoup4供养的Spider

    [爬虫入门01]我第一只由Reuests和BeautifulSoup4供养的Spider 广东职业技术学院  欧浩源 1.引言  网络爬虫可以完成传统搜索引擎不能做的事情,利用爬虫程序在网络上取得数据 ...

  2. 小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式:

    小白学习VUE第一篇文章---如何看懂网上搜索到的VUE代码或文章---使用VUE的三种模式: 直接引用VUE; 将vue.js下载到本地后本目录下使用; 安装Node环境下使用; ant-desig ...

  3. 总结Vue第一天:简单介绍、基本常用知识、辅助函数

    总结Vue第一天:简单介绍.基本常用知识.辅助函数 中文官网:https://cn.vuejs.org/v2/guide/syntax.html 遇到不熟悉的可以先看一下官网,然后再看一下一些别人写的 ...

  4. H5学习第一周

    已经接触H5一个周了,经过学习,总算对H5有了一些了解和认知,下面就总结一下我对H5的认知和感悟. 首先接触的是H5的常用标签[meta],它有其以下常用属性 1.charset属性.单独使用,设置文 ...

  5. vue聊天室|h5+vue仿微信聊天界面|vue仿微信

    一.项目简介 基于Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室——vueChatRoom,实现 ...

  6. 【01】Vue 之hello wolrd

    1.1. Vue简介 Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view].新的Vue版本参考了React的部分设计,当然也有自己独特的地方,比如Vue的单文件组件开发方 ...

  7. 02 (H5*) Vue第二天

    目录: 1:全局过滤器的使用 2:局部过滤器 3:自定义键盘码 4:自定义指令 5:自定义私有指令 6:Vue生命周期. 7:网络请求 1:全局过滤器的使用 Vue.filter("msgF ...

  8. VUE第一个项目怎么读懂

    VUE介绍 VUE是前端开发框架. 原始的前端开发需要工程师写html.写css.写javascript(js).js是脚本语言,浏览器可以运行js来执行一些js支持的动作,例如点击反馈,下拉菜单.操 ...

  9. 开始自学H5前端-第一天

    自从iOS工作丢了后 就萌生了自学这个想法 但是一直在纠结学哪一门语言好 我是计算机科学与技术专业的 其实对于我来说 学啥都算是有点基础的 但是被iOS坑惨了之后 就会不自觉的进行各个方向和前景分析 ...

随机推荐

  1. Oracle中的转换函数

    Oracle中的转换函数有三个,分别为to_char(),to_date(),to_number() 1.to_char()的用法 格式化当前的日期时间 select sysdate,to_char( ...

  2. 写个shell脚本搭载jenkins让你的程序部署飞起来

    [转载请注明]: 原文出处:https://www.cnblogs.com/jstarseven/p/11399251.html    作者:jstarseven    码字挺辛苦的.....  说明 ...

  3. net必问的面试题系列之基本概念和语法

    上个月离职了,这几天整理了一些常见的面试题,整理成一个系列给大家分享一下,机会是给有准备的人,面试造火箭,工作拧螺丝,不慌,共勉. 1.net必问的面试题系列之基本概念和语法 2.net必问的面试题系 ...

  4. SpringMVC源码分析2:SpringMVC设计理念与DispatcherServlet

    转自:https://my.oschina.net/lichhao/blog SpringMVC简介 SpringMVC作为Struts2之后异军突起的一个表现层框架,正越来越流行,相信javaee的 ...

  5. 自由变形技术(Free-Form Deformation)

    自由变形技术Free-Form Deformation是编辑几何模型的重要手段,它于80年代由Sederberg等人提出,目前许多三维建模软件中都有这种变形算法.自由变形方法在变形过程中并不是直接操作 ...

  6. lua_基本语法

    学习lua,首先应该了解热更新. 热更新:可以在不重新下载客户端的情况下更新软件内容.在使用软件过程中,我们经常会遇到这种情况:升级软件,没错,这就使用的是热更新. C#不能直接热更新,原因为:C#脚 ...

  7. 海量数据搜索---demo展示百度、谷歌搜索引擎的实现

    在我们平常的生活工作中,百度.谷歌这些搜索网站已经成为了我们受教解惑的学校,俗话说得好,“有问题找度娘”.那么百度是如何在海量数据中找到自己需要的数据呢?为什么它搜索的速度如此之快?我们都知道是因为百 ...

  8. 提升RabbitMQ消费速度的一些实践

    RabbitMQ是一个开源的消息中间件,自带管理界面友好.开发语言支持广泛.没有对其它中间件的依赖,而且社区非常活跃,特别适合中小型企业拿来就用.这篇文章主要探讨提升RabbitMQ消费速度的一些方法 ...

  9. P2762 太空飞行计划问题 最大权闭合子图

    link:https://www.luogu.org/problemnew/show/P2762 题意 承担实验赚钱,但是要花去对应仪器的费用,仪器可能共用.求最大的收益和对应的选择方案. 思路 这道 ...

  10. 基于DP+位运算的RMQ算法

    来源:http://blog.csdn.net/y990041769/article/details/38405063 RMQ算法,是一个快速求区间最值的离线算法,预处理时间复杂度O(n*log(n) ...