大家好，我是讯享网，很高兴认识大家。



 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> 

讯享网

Vue.js是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App,Vue.js也可以用于手机App开发,但需要借助于Weex)
Vue.js 是前端的主流框架之一,和Angular.js,React.js一起,称为前端三大主流框架!
Vue.js 是一套构建用户界面的前端框架,,它不仅易于上手,还便于与第三方库或既有项目整合. (Vue.js有配套的第三方类库,可以整合起来做大型项目的开发)
前端的主要工作? 主要负责MVC中的V这一层;主要工作就是和界面打交道.

1.企业为了提高开发效率,在企业中,时间就是效率,效率就是金钱.
2.企业中,使用框架,能够提高开发的效率.
3.提高开发效率的发展历程: 原生js(存在浏览器兼容问题) -> Jquery之类的类库(解决了浏览器兼容问题,存在频繁操作DOM) -> 前段模板引擎(调用模板引擎自动生成DOM,存在操作不必要的DOM操作[如: 有一千条数据,id除了有两条数据不是按照从小到大的顺序排序,现在需要对1000条数据按照id从小到大的顺序排序,模板引擎需要先对1000条数据排序,然后浏览器重新重绘和重排DOM,存在不必要的DOM操作,消耗浏览器性能]) -> Angular.js / Vue.js (减少不必要的DOM操作,提高渲染效率:都提供了双向数据绑定的概念[通过框架提供的指令,前端程序员只需要关心数据的业务逻辑,不再关心DOM是如何渲染])
4.在Vue.js中,一个核心的概念,就是让用户不再操作DOM元素,解放了用户的双手,让程序员可以更多的时间去关注业务逻辑;
5.增强自己就业时候的竞争力.
5.1.人无我有,人有我优

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

包括自定义指令

1.MVC 是后端的分层开发概念;
2.MVVM 是前端视图层的概念,主要关注于 视图层分离,也就是说: MVVM把前端的视图层,分为了 三部分:Model,View, VM ViewModel
3.为什么有了MVC 还要有MVVM?
3.1.MVVM 是前端视图层的分层开发思想,主要把每个页面,分成了 M,V和VM,其中VM是MVVM思想的核心,因为VM是M 和 V 之间的调度者

M : 是数据
V : 是界面
VM : 是调度者

1. 导包
2. 写MVVM中的V

讯享网

3. 定义data

4. 创建一个Vue.js的实例

讯享网

写法:

讯享网

1.1.通过在浏览器中查看,v-text并没有闪烁问题;
1.2.V-text会覆盖元素中原本的内容,插值表达式只会替换自己的占位符,不会把整个元素的内容清空;
1.3.插值表达式可以前后拼接字符串,或者运算,v-text则不可以进行拼接和运算;
2.v-html:
2.1.V-html和v-text一样都会覆盖元素中原本的内容;
2.2.V-text不会解析data中的html标签,v-html会解析:

---

讯享网

vue指令 的三种用法:
1.直接使用指令
2.使用简化指令
3.在绑定的时候,拼接绑定内容就使用 :title=‘btnTitle+“这是追加的内容”’

讯享网

讯享网

如何定义一个基本的Vue代码结构
和


vue提供的属性绑定机制 缩写是
vue提供的事件绑定机制 缩写是

事件修饰符

1. 阻止冒泡
2. 阻止默认事件
3. 添加事件侦听器时使用事件捕获模式
4. 只当事件在该元素本身(比如不是子元素) 出发时出发回调
5. 事件只出发一次

按键修饰符

官网地址: https://cn.vuejs.org/v2/guide/events.html#%E6%8C%89%E9%94%AE%E4%BF%AE%E9%A5%B0%E7%AC%A6

2.x自定义全局按键修饰符

在vue实例上方,即写vue实例的script标签的顶部,和创建vue实例同级:

讯享网

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符;

讯享网

讯享网

讯享网

使用class样式就是在元素的class属性上进行操作

总共有四种方式,第5个例子是class和:class混合使用:

注意: 第一种使用方式,直接传递一个数组,注意: 这里的class需要使用 做数据绑定

讯享网

讯享网

讯享网

讯享网

在data上定义样式:
H1StyleObj就是无序键值对的集合:
注意: 如何属性名由中横线连接的必须加引号(单引或双引):

讯享网

在data上定义样式:

讯享网

在元素中,通过属性绑定的形式,将样式对象应用到元素中:

讯享网

讯享网

当Vue.js用v-for正在更新已渲染过的元素列表时,它默认用”就地复用”策略. 如果数据项的顺序被改变,Vue将不是移动DOM元素来匹配数据想的顺序,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素;

为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有的元素,需要为每项提供一个唯一key属性;

讯享网

图片位置 https://blog.csdn.net/u0/article/details/pic/1.png

图片位置 https://blog.csdn.net/u0/article/details/pic/2.png

因为没有指定key,所以只是认为选中了索引为4的,如果指定key之后,就会选择对应key的一项;
指定key:
注意: :key的值只能是string或number 不能是对象,item等;
注意: key 在使用的时候,必须使用v-bind属性绑定的形式,指定key的值;
Key是保证数据的唯一性的;

讯享网

下载地址:
github地址: https://github.com/vuejs/vue-devtools
搭建环境:
http://www.runoob.com/nodejs/nodejs-install-setup.html

参考链接:http://www.cnblogs.com/lolDragon/p/6268345.html

参考链接:https://www.jianshu.com/p/4643a8e43b79

1.MVC 和 MVVM 的区别;
2.学习Vue.js中最基本代码的结构;
3.插值表达式 v-clock, 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;

react,ng,vue作用差不多,适合做单页面应用程序;

第二天准备开始!!!