目录

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. Kafka之Producer

    通过https://www.cnblogs.com/tree1123/p/11243668.html 已经对consumer有了一定的了解.producer比consumer要简单一些. 一.旧版本p ...

  2. ansible模块介绍之ios_facts

    一.模块简介 收集运行IOS系统的(此处指思科的ios)的远端设备信息 二.模块参数 auth_pass #特权密码,如果参数authorize=no,则不会检索此密码,如果任务task不指定,则默认 ...

  3. Windows Server 2008磁盘管理

    下面学习一下磁盘管理,基本磁盘 分区 空间只能是同一块磁盘的空间,动态磁盘  卷 空间可以是多块硬盘上的空间,怎么创建 RAID-0  条带卷 读写快 无容错 适合存放不太重要的数据 ,RAID-1  ...

  4. Joda学习笔记

       Joda Time简介 日常业务开发中,经常需要处理日期.比如:获取当前一个月之内的开播记录,获取十分钟之内的红包记录等等.我们之前是用java.util.Calendar实现的,直到我看到占小 ...

  5. 【StyleCop】StyleCop规则汇总

    所有规则的翻译(基于版本4.7.44.0): 文档规则 1.SA1600:ElementsMustBeDocumented元素必须添加注释 2.SA1601: PartialElementsMustB ...

  6. ParquetDecodingException: Can not read value at 0 in block -1 in file hdfs:...

    : jdbc:hive2://master01.hadoop.dtmobile.cn:1> select * from cell_random_grid_tmp2 limit 1; INFO : ...

  7. JIra配置权限方案

    目录: 添加用户 添加用户组 将用户分配到不同的组中 创建项目权限方案 配置项目采用的权限方案 1. 添加用户 1)使用admin权限的账户登录后,点击右上角的配置,选择system 2)在打开的页面 ...

  8. 成功项目管理与PMP认证2017

    http://study.163.com/course/courseLearn.htm?courseId=1064005#/learn/video?lessonId=1003778171&co ...

  9. HDU-DuoXiao第二场hdu 6315 Naive Operations 线段树

    hdu 6315 题意:对于一个数列a,初始为0,每个a[ i ]对应一个b[i],只有在这个数字上加了b[i]次后,a[i]才会+1. 有q次操作,一种是个区间加1,一种是查询a的区间和. 思路:线 ...

  10. codeforces 813 D. Two Melodies(dp)

    题目链接:http://codeforces.com/contest/813/problem/D 题意:求两个不相交的子集长度之和最大是多少,能放入同一子集的条件是首先顺序不能变,然后每一个相邻的要么 ...