Vue - day1

什么是Vue

Vue.js 是目前最火的衣一个前端框架

Vue.js 是一套构建用户界面的框架,只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合.

为什么要学习流行框架

企业为了提高开发效率

提高开发效率的发展历程: 原生js => jquery之类的类库 => 前端模板引擎 => angular.js/vue.js

在vue中一个核心的概念,就是让用户不在操作DOM元素,解放了用户双手,让程序员可以更多的时间去关注业务逻辑;

MVVM (Model View ViewModel)

MVVM 是前端视图层的分层开发思想, 主要把每个页面分成了M, V, VM其中VM 是核心

M -> Model(数据模型) (data,就是M)

V -> View(视图模型) (vue实例所控制的元素区域,就是V)

VM -> ViewModel(一个同步View和Model的对象) (new出来的Vue对象,就是VM调度者)

MVVM (Model View ViewModel)

Vue 常用系统指令

插值表达式

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：(官方)

数据绑定最常见的形式，其中最常见的是使用插值表达式，写法是{

{}} 中写表达式

例如：Message: {
    { msg }}

Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。

无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。

{

{}}对JavaScript 表达式支持，例如：

{
    { number + 1 }}{
    { ok ? 'YES' : 'NO' }}{
    { message.split('').reverse().join('') }}

但是有个限制就是，每个绑定都只能包含单个表达式，如下表达式无效：


     {
    { var a = 1 }}
     {
    { number++ }} 会报警告：vue2.js:482 [Vue warn]: You may have an infinite update loop in a component render function.
     {
    { if (ok) { return message } }}

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

这个将不会改变: {
    { msg }}

v-text

v-text可以将一段文本渲染到指定的元素中,例如


     
new Vue({  data:{      msg:'hello world'  }});

输出结果


     
      hello world

v-html

v-html可以将一段html代码插入指定元素中,例如：


     
  new Vue({      data:{          rawHtml:'hello world
'      }})

注意: 你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

v-bind (:)

Mustache 语法(插值表达式)不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

v-for

v-for用法：

item in Array(item, index) in Arrayvalue in Object(value, key, index) in Object

:key属性具有唯一性，不能重复，它能够唯一标识数组的每一项

将来数据中的某一项的值发生了改变，则v-for只会更新当前项对应的这个dom元素的值，而不是更新整个数据，从而提高效率，参考

注意：以下变动不会触发视图更新

通过索引给数组设置新值

通过length改变数组

解决：

Vue.set(arr, index, newValue)

arr.splice(index, 1, newValue)

v-model

v-model指令用来双向数据绑定,就是model和view中的值进行同步变化

v-model只能在以下元素中使用:
- input / textarea / select / components（Vue中的组件）

例如:

文本:Message is: {
    { message }}

v-on (@)

1、作用：绑定事件监听，表达式可以是一个方法的名字或一个内联语句，

如果没有修饰符也可以省略，用在普通的html元素上时，只能监听原生

DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

2、常用事件：

v-on:click  v-on:keydown  v-on:keyup  v-on:mousedown  v-on:mouseover  v-on:submit  ....

3、示例：

5、v-on的缩写形式：可以使用@替代 v-on:

6、按键修饰符

触发像keydown这样的按键事件时，可以使用按键修饰符指定按下特殊的键后才触发事件

写法：    当按下回车键时才触发kd1事件  由于回车键对应的keyCode是13，也可以使用如下替代    当按下回车键时才触发kd1事件  但是如果需要按下字母a（对应的keyCode=65）才触发kd1事件，有两种写法：  1、由于默认不支持a这个按键修饰符，需要Vue.config.keyCodes.a = 65 添加一个对应,所以这种写法为：  Vue.config.keyCodes.a = 65    这样即可触发  2、也可以之间加上a对应的数字65作为按键修饰符    这样即可触发  键盘上对应的每个按键可以通过 http://keycode.info/ 获取到当前按下键所对应的数字

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

.enter.tab.delete (捕获 “删除” 和 “退格” 键).esc.space.up.down.left.right

v-if

1、作用：根据表达式的值的真假条件来决定是否渲染元素，如果条件为false不渲染（达到隐藏元素的目的），为true则渲染。在切换时元素及它的数据绑定被销毁并重建

2、示例：


     {
    {#if isShow}}  Yes
{
    {/if}}

通常我们使用写法居多：

Yes

也可以用 v-else 添加一个 “else” 块：

Yes
No

注意：v-else 元素必须紧跟在 v-if 元素否则它不能被识别。

new Vue({    data:{      isShow:true    }});

v-show

1、根据表达式的真假值，切换元素的 display CSS 属性，如果为false，则在元素上添加 display:none来隐藏元素，否则移除display:none实现显示元素

2、示例：

Yes
new Vue({  data:{    isShow:true      }});

v-if和v-show的总结：

v-if和v-show 都能够实现对一个元素的隐藏和显示操作,但是v-if是将这个元素添加或者移除到dom中，

而v-show是在这个元素上添加 style="display:none"和移除它来控制元素的显示和隐藏的

v-cloak

v-cloak指令保持在元素上直到关联实例结束编译后自动移除，v-cloak和 CSS 规则如[v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

通常用来防止{

{}}表达式闪烁问题

例如：

在span上加上 v-cloak和css样式控制以后，浏览器在加载的时候会先把span隐藏起来，知道 Vue实例化完毕以后，才会将v-cloak从span上移除，那么css就会失去作用而将span中的内容呈现给用户

{
    {msg}}    new Vue({  data:{      msg:'hello ivan'    }})