vue框架

vue

基础设置

输入命令行

全局安装 vue-cli

npm install --global vue-cli

创建一个基于 webpack模板的新项目

vue init webpack 项目名称

安装依赖

cd 项目名称

npm install

npm run dev

vue不支持IE8以下的版本

vue简介

Vue.js 是一套构建用户界面的渐进式框架

Vue 采用自底向上增量开发的设计

Vue 的核心库只关注视图层

 当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

vue基础用法

在Vuejs中变量在html中绑定标签是两个花括号{{变量}}

在vuejs中的获取页面中id不可以放在body和html标签里

vuejs启用的区域就在id为demo的div块中

vue js的执行顺序

1.在页面引入vue js

script

2.实例化vue js

new Vue({ })

3.创建vue js的应用区域

el: ' '

4.填充绑定数据

data:{ msg:' '}

vuejs数据双向绑定

主要使用vuejs的v-model属性

注意

v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

vuejs双向绑定并不能适用于所有的html表单，限制为input、select、textarea、components。

使用

例如：我们创建一个文本框并定义它的v-model的属性的内容为我们在vue中定义的msg

<input type=\"text\" v-model=\"msg\">

运行效果

我们在改变文本框内容的同时，在标签中的msg也同时会改变。以后我们说双向绑定，都是指的是类似input这样的，自带change事件的表单项目。

vuejs中的v-text属性

v-text属性来控制整个标签的内容绑定

例如：我们把v-text属性放到span标签中

<span v-text='msg'>hello<span>

我们可以看到在span标签中的内容并没有被输出，输出的是我们在vue定义的变量msg的内容。v-text属性会把整个标签的内容绑定为我们定义的内容。

Vuejs的常用指令

v-html

作用

v-html 更新元素或者变量的innerHTML，按普通html解析，和v-text的区别是在变量中的html标签会被浏览器解析，比如<br>会直接解析为换行

例如：<div v-html=\"msg\"></div>

data:{             msg:'第一行<br><hr>第二行'          }

效果

第一行和第二行中间有条线同时也换行了。

v-show

v-show 根据条件解析元素display的属性的真假，如果为真则display为block，假的话则为none在页面不显示。

例如：<span v-show=\"Show\">你能看到我!</span>          <span v-show=\"Hide\">你能看到我吗!</span>

我们在vue中定义了两个变量，Show为true，为true的话display的属性为block直接显示在页面中。

v-if

例如： <p>第一组</p>           <p>预期显示“你能看到我!”</p>          <span v-if=\"Show\">你能看到我!</span>          <span v-else>你能看到我吗!</span>          <br>          <p>第二组</p>          <p>预期显示“你能看到我吗!”</p>          <span v-if=\"hide\">你能看到我!</span>          <span v-else>你能看到我吗!</span>          <br>          <p>第三组</p>          <p>预期显示“你真的能看到我吗!”</p>          <span v-if=\"hide\">你能看到我!</span>          <span v-else-if=\"hide\">你能看到我吗!</span>          <span v-else>你真的能看到我吗!</span>

1.v-else不需要表达式，但是需要跟在v-if和v-else-if后面

2.我们在实验中直接使用了true和false在实际使用中可以使用表达式，例如v-if=\"1>3\"

v-if是一个指令，需要将它添加到一个元素上。但如果我们想切换多个元素，我们可以引入<template>元素当作包装元素，并在上面使用v-if

v-for

循环遍历

例如：<div v-for=\"item in items\">               {{ item.text }}          </div>          <div v-for=\"item in items\">               {{ item.name }}           </div>           <div v-for=\"item in items\">              {{ item.text }}{{ item.name }}           </div>           <div v-for=\"item in items\">              {{ item }}           </div>

说明：items为数据，item为数据的元素，text为数据中的元素内容

上述示例中我们可以看到v-for的使用方法 items 数据对象放到一个数组里，标准json格式。 在我们使用中如果需要得到每条内容的索引，我们可以给数据添加索引。v-for=\

v-on

绑定事件监听

<!-- 方法处理器 --><button v-on:click=\"doThis\"></button><!-- 内联语句 --><button v-on:click=\

在页面中的按钮绑定了一个单击事件dothis，在dothis中我们在控制台中输出hello vuejs。 在vuejs中方法绑定在methods中定义。

vuejs中经常使用的修饰性功能

push( )      //在结尾增加一条或多条数据pop( )        //删除最后一条数据shift( )       //删除第一条数据，并返回这条数据unshift( )   //在开始增加一条或多条数据，并返回数组长度splice( )     //向/从数组中添加/删除项目，然后返回被删除的项目。sort( )       //对数组的元素进行排序。reverse( )    //颠倒数组中元素的顺序。

vuejs组件

template

一个字符串模板作为 Vue 实例的标识使用。模板将会替换 挂载的元素。 如果值以 # 开始，则它用作选项符，将使用匹配元素的 innerHTML 作为模板。常用的技巧是用 <script type=\"x-template\"> 包含模板。

v-bind指令

v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。在绑定 class 或 style 特性时，支持其它类型的值，如数组或对象。v_bind:class在应用中是非常有用的。

第一种

<!-- 绑定一个属性 --><img v-bind:src=\"imageSrc\"><!-- 缩写 --><img :src=\"imageSrc\"><!-- with inline string concatenation --><img :src=\"'/path/to/images/' + fileName\"><!-- class 绑定 --><div :class=\"{ red: isRed }\"></div><div :class=\

第二种  class绑定

<style>        .active{            color: red;        }</style>

<a v-bind:class=\"{ active: isActive }\">红色</a>

data:{            isActive:true            //isActive:false        }

Vuejs组件

组件Component是 Vue.js 最强大的功能之一

组件可以扩展 HTML 元素，封装可重用的代码

在较高层面上，组件是自定义元素， Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

<div id=\"demo\">      <my-component></my-component></div>

my-component是组件的名称

html中： 把组件名称当做一个标签来写即可

后面的{ }里可以写参数，我们看到这里写了一个template，它是组件将会渲染的html内容

Vuejs组件注册要写在前面，Vue实例初始化要写在后面. template可以写正常的html语法

第二种：使用css选择器的ID 首先我们要定义一个tempalte

<div id=\"demo\">        <my-component></my-component> </div>

可以重复调用 ：my-component标签

<script type=\"text/tmplate-x\" id=\"my_component-template\">        <div>一个vuejs组件例子!</div></script>

在注册组件中直接调用：#my_component-template

在上图中可以看到，正常输出了我们在template中输出的内容。 vue会把<my-component></my-component>渲染成<div>一个vuejs组件例子!</div>

在组件中如何使用在vue里注册的变量

步骤

1.在组件中定义一个props

2.然后在我们使用的自定义标签中绑定

 <div id=\"demo\">        <my-component v-bind:msg='msg'></my-component>        <my-component></my-component>        <my-component></my-component>    </div>

<script type=\"text/x-tmplate\" id=\"my_component\">        <div>一个vuejs组件例子! {{msg}}</div></script>

一个vuejs组件例子！一个vuejs组件例子！一个vuejs组件例子！

组件单独写到一个js文件中

组件也可以单独的写到一个js文件中，这样更加增加页面重用性，一个页面可以定义使用多个组件

<div id=\"demo\">        <h1>{{msg}}</h1>         <my-component v-bind:items='items'></my-component></div>

<script type=\"text/x-tmplate\" id=\"my_component\">    <form  @submit.prevent=\"additem(newitem)\" >         <div v-for=\"item in items\">               <p>{{ item.text }}</p>          </div>         <div>               <input type=\"text\" v-model=\"newitem.text\">          </div>          <div>               <button>添加</button>          </div>     </form></script>

Vuejs中的组件操作

子组件向父组件中传值: 使用event (输出过程)

父组件向子组件中传值: 使用props binding (输入过程)

子组件调用父组件的方法: 使用event(方法调用)

使用v-model 简化

Vuejs计算属性

我们把计算属性都写到computed中，可以让我们的代码看起来更加简洁

计算长度

第一种方法

<div id=\"demo\">      <h1>{{msg}}</h1>      <form  @submit.prevent=\"additem(newitem)\" >            <p>{{items.length}}</p>            <div v-for=\"item in items\">                <p>{{ item.text }}</p>             </div>            <div>                <input type=\"text\" v-model=\"newitem.text\">            </div>            <div>                <button>添加</button>            </div>       </form></div>

第二种方法：在模块中直接使用方法名，在vue中定义方法

<div id=\"demo\">   <h1>{{msg}}</h1>    <form  @submit.prevent=\"additem(newitem)\" >        <p>{{itemlenth}}</p>            <div v-for=\"item in items\">                <p>{{ item.text }}</p>             </div>            <div>                <input type=\"text\" v-model=\"newitem.text\">            </div>            <div>                <button>添加</button>            </div>      </form></div>

字符串链接

用法

<div id=\"demo\">       {{stringjoin}}</div>

把计算属性放到computed中，计算属性依赖data里面的数据，如果data里面的数据不变，计算属性可以自动缓存。

生命周期

图解

文字解释

创建前

undefined

创建之后

绑定数据的内容

mount之前

html代码

mount之后

状态管理

vue resource

MVVM

模型Model

视图View

ViewModel

ViewModel 是 View 层的抽象. ViewModel 需要暴露自己的属性和命令Command给 View 层.

Binder