vue框架

Posted wasbg

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue框架相关的知识，希望对你有一定的参考价值。

前端框架介绍

老牌

  • jquery -> 更简单的方式去操作 dom 对象（标签对象）
  • extjs  -> 更适合做后台管理系统
  • easyui -> 模仿了 extjs 免费

新式

  • vue 国内开源的js框架
  • argularjs 国外js框架

他们都提倡前后台分离，下面是对前后台分离的解释：

传统的后台开发人员，需要做一下步骤：
controller -> jsp， service， dao -> 页面展示部分，需要用jsp等技术负责数据展示

前后台分离之后，后台开发人员，需要做一下步骤：
service, dao  -> 负责准备模型数据即可

前台开发人员，负责页面之间的跳转、从后台获取模型数据，展示数据

VUE

Vue.js（读音 /vju?/, 类似于 view） 是一套构建用户界面的渐进式框架，它只关注视图层， 采用自底向上增量开发的设计，它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

* 传统 `<script src="js路径">` 成本低
* js 分模块，编译，集成less，打包，发布，npm， 成本太高

使用

1) 引入vue.js，可以去网上下载，也可以把内容复制到本地的js文件中（也可以下载我分享的这个：https://pan.baidu.com/s/1E-e4kWlXRaR4WJZmt6Wt2g），这个文件和html文件放一块

<!-- 引入 vue.js -->
<script src="vue.js"></script>

2) 创建Vue对象

var vue = new Vue(
    el: 视图对应的标签
    data: 模型数据
    methods:
        方法1：function(),
        方法2：funciton(),
        ...
    
);

3) 展示模型数据

两标签之间的普通文字，要从模型中获取数据，语法使用 模型数据的名称
标签的属性需要从模型中获取值：v-bind:属性名 (v-bind 绑定指令)，也可以被简化为  :属性名

例子如下，绑定图片属性，获得图片地址：

<!-- 视图 -->
<div id="app">
    <!-- 给文本赋值 用  模型变量名-->
    <h1>姓名：name, 年龄: age, 图片 photo</h1>

    <!--  给属性赋值需要用 v-bind 指令 -->
    <img v-bind:src="photo">
</div>
<script>
// el -> element
var vue = new Vue(
    el: ‘#app‘, /*vue 对象对应的视图是id为app的标签*/
    data:  /*data 中包含的是模型数据*/
        name:‘zhangsan‘,
        age: 18,
        photo: ‘2_1.bmp‘
    
);
</script>

当模型数据发现变化，那么视图也会跟着变动(这也叫被重新渲染(render) )

vue的一些常用指令

1) v-for 用来遍历一个集合

v-for="(临时变量名,下标变量) in 集合名"          其中下标变量从0开始

2) v-if

用来进行条件判断，当条件成立，才会渲染视图，如果条件不成立，不会生成html代码

例子如下，因为hasError后面是false，所以不会输出用户名不正确这一行字：

<div id="app">
    <h3 v-if="hasError">用户名不正确</h3>
</div>

<script>
var vue = new Vue(
    el:"#app",
    data:
        hasError:false /*没有错误*/
    
);
</script>

3) v-show

用来进行条件判断，当条件成立（true），把此标签显示出来，如果条件不成立（false），会把此标签隐藏起来

如：v-show="hasError" ， hasError:false，所以会把此标签隐藏起来

注：这和 v-if 虽然都是可以判断之后让某些东西不显现，但是它们两个还是有 不同之处，v-if 只要不满足条件就不会生成 html 代码，而 v-show 则是生成了 html 代码，只是隐藏了而已。

7) 事件处理

传统方式处理事件，事件名称="函数()" ，如以下

<input type="button" onclick="函数()">

vue 来处理事件 格式：v-on:事件名称 ="方法名"，也可以被简化为  @事件名称 ="方法名"， 事件名称前不需要再加on了，加v-on，如以下

<input type="button" v-on:click="方法名">
<input type="button" v-on:mouseout="方法名">

如果方法有参数的话就在方法名后面加上括号里面写上参数，如  <input type="button" v-on:click="方法名(12)">，没有参数就直接写方法名。

8) 双向绑定 v-model

 v-bind 模型数据发生了改变，视图也会重新渲染，模型会影响视图，而反之不行
 v-model, 不仅是数据改变影响视图，而且视图改变也会影响数据，尤其配合表单使用

代码演示

1、v-bind和语法使用 模型数据的名称的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入 vue.js -->
    <script src="vue.js"></script>
</head>
<body>
    <!-- 视图 -->
    <div id="app">
        <!-- 给文本赋值 用  模型变量名-->
        <h1>姓名：name, 年龄: age, 图片 photo</h1>

        <!--  给属性赋值需要用 v-bind 指令 -->
        <img v-bind:src="photo">
        <img :src="photo">
    </div>

    name


    <script>
    // el -> element
    var vue = new Vue(
        el: ‘#app‘, /*vue 对象对应的视图是id为app的标签*/
        data:  /*data 中包含的是模型数据*/
            name:‘zhangsan‘,
            age: 18,
            photo: ‘2_1.bmp‘
        
    );
    </script>
</body>
</html>

结果

技术图片

从上图结果看出，如果不在el：id名 指定的id名的范围内用符号去取数据，就直接输出数据名，也就是取不到数据，这一点要注意哟。

2、v-for="(临时变量名,index) in 集合名"  的使用

<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
       
        <table border="1" width="100%">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>武力</th>
                    <th>图片</th>
                </tr>
            </thead>
            <tbody>
                <!-- v-for="(临时变量名,index) in 集合名" index 表示下标，从0开始-->
                <tr v-for="(h,index) in list">
                    <td>index+1</td>
                    <td>h.name</td>
                    <td>h.power</td>
                    <td><img style="width:80px;" v-bind:src="h.photo"/></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
    var vue = new Vue(
        el: "#app",
        data: 
            list: [
                name:"关羽", photo:"3_1.bmp", power:98,
                name:"张飞", photo:"2_1.bmp", power:99,
                name:"吕布", photo:"4_1.bmp", power:100,
                name:"赵云", photo:"10_1.bmp", power:97
            ]
        
    );
    </script>
</body>
</html>

结果

技术图片

3、vue从数据库中取数据（这个例子要在存放html的包下，放入 axios.min.js 文件，下载地址：https://pan.baidu.com/s/1ZcP3iY3dFIVHwmVLZC_kJg）

储存数据

public class Hero 
    private int id;
    private String name;
    private String sex;
    private String photo;

    @Override
    public String toString() 
        return "Hero" +
                "id=" + id +
                ", name=‘" + name + ‘\‘‘ +
                ", sex=‘" + sex + ‘\‘‘ +
                ", photo=‘" + photo + ‘\‘‘ +
                ‘‘;
    

    public int getId() 
        return id;
    

    public void setId(int id) 
        this.id = id;
    

    public String getName() 
        return name;
    

    public void setName(String name) 
        this.name = name;
    

    public String getSex() 
        return sex;
    

    public void setSex(String sex) 
        this.sex = sex;
    

    public String getPhoto() 
        return photo;
    

    public void setPhoto(String photo) 
        this.photo = photo;

搜索数据

import com.westos.domain.Hero;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Param;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface HeroDao 
    //搜索数据库中的数据
    @Select("select * from hero2 limit #m, #n")
    public List<Hero> findByPage(@Param("m") int m, @Param("n") int n);

定义接口，到时可从接口去调用实现类

import com.westos.domain.Hero;

import java.util.List;

public interface HeroService 
    public List<Hero> findByPage(int page,int row);

实现接口

import com.westos.dao.HeroDao;
import com.westos.domain.Hero;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;
//交给容器管理
@Service
//实现接口
public class HeroServiceImpl implements HeroService 
    //注入依赖
    @Autowired
    private HeroDao heroDao;
    @Override
    public List<Hero> findByPage(int page ,int row) 
        return heroDao.findByPage(row*(page-1),row);

控制类

import com.westos.domain.Hero;
import com.westos.service.HeroService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.List;
@Controller
public class HeroController 
    @Autowired
    private HeroService heroService;
    @RequestMapping("/hero/findByPage")
    @ResponseBody
    //@RequestParam 表示默认值
    public List<Hero> findByPage(@RequestParam(defaultValue = "1") int page,@RequestParam(defaultValue = "5") int row)
        return heroService.findByPage(page,row);

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.js"></script>
    <!--引入 axios.min.js 使用这个可以代替之前ajax代码，实现它的功能-->
    <script src="axios.min.js"></script>
</head>
<body>
    <div id="app">
        <table border="1" width="100%">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>性别</th>
                    <th>头像</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(h,index) in list">
                    <td>h.id</td>
                    <td>h.name</td>
                    <!--以下两种方法都可以判断男女，0为男，1为女，第二种方法比较灵活，可以写很多种判断在调用的方法里-->
                    <td> (h.sex==0)?"男":"女" </td>
                    <td> convertSex(h.sex) </td>
                    <!--src 后面是图片的请求地址-->
                    <td><img style="width:80px;" :src="‘http://localhost:8080/image/‘ + h.photo + ‘-1.bmp‘"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <script>
    var vue = new Vue(
        el:"#app",
        data: 
            //虽然是空的但是连接数据库后，这里就填入了属性名，在上面取值时，用这些属性名就好了
            list:[] /*必须有一个初始的属性*/
        ,
        methods: 
            convertSex:function(sex)  // 把 0/1 转换为 男和女
                if(sex == 0) 
                    return "男";
                 else 
                    return "女";
                
            ,
            //调用这个方法可以生成json字符串，这样页面上就可以显示这些数据了
            findHero: function() 
                axios.request(
                    url:"http://localhost:8080/hero/findByPage",
                    method:"get"
                ).then(function(response)
                    vue.list = response.data;
                );
            
        
    );

    // 使用最底层的 api 与服务器交互，这些代码都可以被上面的 axios 引出的代码替代
    /*
    var xhr = new XMLHttpRequest();
    xhr.onload = function() 
        var array = JSON.parse(xhr.responseText);
        vue.list = array;
    

    xhr.open("get", "http://localhost:8080/hero/findByPage", true);
    xhr.send();
    */

    // 响应返回时会触发 then 中的函数调用，函数的参数是服务器返回的json结果
    vue.findHero();
    </script>
</body>
</html>

 结果

技术图片

有有两张图没有，请见谅，从这个例子总可以看到一个新方法，引入 <script src="axios.min.js"></script> 可以代替以前的 ajax 代码，作用都是相同的，使代码变简洁了。

 

 

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

官宣：

Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

简单来说其实就是：

vue是一套构建用户界面的框架。在我看来，渐进式代表的含义是：主张最少。每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。简单说就是对于vue中你不熟悉不太把握的模块或者功能，你可以不用它，或者你可以用你熟悉有把握的技术进行代替 。这样子看来是不是感觉很友好，相对于其他框架硬要求很少了，你可以逐渐性的使用框架。

一、什么是Vue？

为了实现前后端分离的开发理念，开发前端 SPA（single page web application） 项目，实现数据绑定，路由配置，项目编译打包等一系列工作的技术框架。

二、vue全家桶

Vue有著名的全家桶系列，包含了vue-router（http://router.vuejs.org），vuex（http://vuex.vuejs.org）， vue-resource（https://github.com/pagekit/vue-resource）。再加上构建工具vue-cli，sass样式,就是一个完整的vue项目的核心构成。

概括起来就是：、1.项目构建工具、2.路由、3.状态管理、4.http请求工具。

三、vue优缺点

   其实Vue.js不是一个框架，因为它只聚焦视图层，是一个构建数据驱动的Web界面的库。

    Vue.js通过简单的API（应用程序编程接口）提供高效的数据绑定和灵活的组件系统。

     Vue.js的特性如下：

　　    1.轻量级的框架（相对而言）

　　    2.双向数据绑定

　　    3.指令

　　    4.插件化

   优点： 1. 简单：官方文档很清晰，比 Angular 简单易学。（国内框架，demo，文档多）

　　　　  2. 快速：异步批处理方式更新 DOM。（同时进行）

　　　　  3. 组合：用解耦的、可复用的组件组合你的应用程序。（功能由不同的单个功能组件构成）

　　　　  4. 紧凑：~18kb min+gzip，且无依赖。

　　　　  5. 强大：表达式 & 无需声明依赖的可推导属性 (computed properties)。

　　　　  6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

　 缺点：  1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。

　　　　　2. 影响度不是很大。

　　　　　3. 不支持IE8。

                   4. 无成名库。

 一、什么是Vue？
为了实现前后端分离的开发理念，开发前端 SPA（single page web application） 项目，实现数据绑定，路由配置，项目编译打包等一系列工作的技术框架。
二、如何使用？
直接下载vue.js引入到网页中即可。
Vue.js 官网下载地址：http://vuejs.org/guide/installation.html
三、基础语法：
1、双向绑定：
数据绑定最常见的形式就是使用 ...（双大括号）的文本插值
html:
<div id="app">
<p>message</p>
<input v-model="message"/>
</div>
js:
new Vue(
el:‘#app‘,
data:
message:‘Hello vue.js‘
)
2、渲染列表
html:
<div id="app">
<ul>
<li v-for="todo in todos">todo.text</li>
</ul>
</div>
js:
new Vue(
el:‘#app‘,
data:
todos:[
text:‘学习vue‘,
text:‘学习Sass‘,
text:‘学习webpack‘
]
)
3、处理用户输入
html:
<div id="app">
<p>message</p>
<input v-model=‘message‘/>
<button type="button" v-on:click="reverseMessage">反转</button>
</div>
js:
new Vue(
el:‘#app‘,
data:
message:‘hello world‘
,
methods:
reverseMessage:function()
this.message=this.message.split(‘‘).reverse().join(‘‘)
)
4、插值
html:
<div id="app">
<!-- 单次文本插值 -->
<p>*message</p>
<!-- 解析真的html字符串 -->
<p>raw_html</p>
<!-- html特性 -->
<p id="item-id">html特性</p>
</div>
js:
new Vue(
el:‘#app‘,
data:
message:‘Hello vue.js‘,
raw_html:‘<span>原始的html</span>‘,
id:‘1‘
)
5、绑定表达式
html:
<div id="app">
<!-- javascript表达式 -->
<p>number+1</p>
<p>ok ? ‘Yes‘ : ‘No‘</p>
<p>message.split(‘‘).reverse().join(‘‘)</p>
<!-- 过滤器 -->
<p>name | capitalize</p>
</div>
js:
new Vue(
el:‘#app‘,
data:
number:2,
ok:false,
message:‘123456789‘,
name:‘brucee lee‘
)
6、指令
html:
<div id="app">
<!-- 参数 -->
<a v-bind:href="url" v-on:click="dosomething">指令带参数</a>
<!-- v-bind、v-on缩写 -->
<a :href="url" @click="dosomething">指令缩写</a>
</div>
js:
new Vue(
el:‘#app‘,
data:
url:‘http://g.pptv.com‘
,
methods:
dosomething:function()
alert(this.url);
)
7、计算属性
html:
<div id="app">
<p>a=a,b=b</p>
<p>fullName</p>
</div>
js:
new Vue(
el:‘#app‘,
data:
a:1,
firstName:‘Micro‘,
lastName:‘Jodon‘
,
computed:
b:function()
return this.a + 1;
,
/*fullName:function()
return this.firstName + ‘ ‘ + this.lastName;
*/
fullName:
get:function()
return this.firstName + ‘ ‘ + this.lastName;
,
set:function(newValue)
var names = newValue.split(‘ ‘);
this.firstName = names[0];
this.lastName = names[names.length-1];
)
9)class与style绑定
[css] view plain copy
.static
width: 200px;
margin: 20px auto;
height: 25px;
line-height: 25px;
text-align: center;
font-size: 18px;
.class-a
background-color: #f00;
.class-b
color: #fff;
.class-c
padding: 5px 0;
[html] view plain copy
<div id="app">
<!-- 绑定class:对象语法 -->
<p class="static" v-bind:class="‘class-a‘:isA,‘class-b‘:isB">绑定class</p>
<p class="static" v-bind:class="classObject">绑定class</p>
<!-- 绑定class:数组语法 -->
<p class="static" v-bind:class="[classA,classB,classC]">绑定class</p>
<p class="static" v-bind:class="[classA, ‘class-b‘: isB,‘class-c‘: isC]">绑定class</p>
<!-- 绑定style:对象语法 -->
<p class="static" v-bind:style="styleObject">绑定style</p>
<!-- 绑定style:数组语法 -->
<p class="static" v-bind:style="[styleObjectA,styleObjectB]">绑定style</p>
</div>
[javascript] view plain copy
new Vue(
el:‘#app‘,
data:
classA:‘class-a‘,
classB:‘class-b‘,
classC:‘class-c‘,
isA:true,
isB:false,
isC:true,
classObject:
‘class-a‘:true,
‘class-b‘:true
,
styleObject:
color:‘red‘,
fontSize:‘13px‘,
backgroundColor:‘#00f‘
,
styleObjectA:
color:‘green‘,
fontSize:‘16px‘
 
,
styleObjectB:
backgroundColor:‘#f0f‘,
transform:‘rotate(7deg)‘
)
10)条件渲染
[html] view plain copy
<div id="app">
<h1 v-if="Math.random() > 0.5">对不起！</h1>
<h1 v-else>没关系</h1>
 
<template v-if="ok">
<h1>标题</h1>
<p>段落1</p>
<p>段落2</p>
</template>
 
<h1 v-show="isShow">Hello!</h1>
 
<custom-component v-show="condition"></custom-component>
<p v-show="!condition">这可能也是一个组件</p>
</div>
[javascript] view plain copy
// 定义
var MyComponent = Vue.extend(
template: ‘<div>A custom component!</div>‘
);
 
// 注册
Vue.component(‘custom-component‘, MyComponent);
new Vue(
el:‘#app‘,
data:
ok:true,
isShow:false,
condition:true
,
 
)
11)列表渲染
[html] view plain copy
<div id="app">
<!-- 数组v-for -->
<ul>
<template v-for="item in items" track-by="_uid">
<li> parentMessage - $index - item.message </li>
<li class="divider"></li>
</template>
</ul>
<!-- 对象v-for -->
<ul>
<li v-for="(key,val) in object">key : val</li>
</ul>
<!-- 值域v-for -->
<span v-for="n in 10"> n </span>
</div>
[css] view plain copy
ul
list-style: none;
width: 150px;
.divider
height: 2px;
background-color: #00f;
span
padding: 0 2px;
[javascript] view plain copy
var vm=new Vue(
el:‘#app‘,
data:
parentMessage:‘水果‘,
items:[
_uid:‘001‘,message:‘香蕉‘,
_uid:‘002‘,message:‘橘子‘
],
object:
FirstName: ‘John‘,
LastName: ‘Doe‘,
Age: 30
);
//变异方法：push()、pop()、shift()、unshift()、splice()、sort()、reverse()
vm.items.push(message:‘苹果‘,message:‘梨子‘);//推入两项
vm.items.shift();//取出第一项
//非变异方法：filter(), concat(), slice(),可用替换数组来修改原数组
vm.items=vm.items.filter(function (item)
return item.message.match(/子/);
)
12)方法与事件处理器
[html] view plain copy
<div id="app">
<!-- 内联语句处理器 -->
<button type="button" v-on:click="say(‘Hello‘,$event)">提交</button>
<!-- 事件修饰符 -->
<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
 
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
 
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
 
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
 
<!-- 添加事件侦听器时使用 capture 模式 -->
<div v-on:click.capture="doThis">...</div>
 
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
 
<!-- 按键修饰符 -->
<input v-on:keyup.enter="submit">
 
</div>
[javascript] view plain copy
var vm=new Vue(
el:‘#app‘,
methods:
say:function(msg,event)
alert(msg+","+event.target.tagName);
event.preventDefault();
);
13)表单控件绑定
[html] view plain copy
<div id="app">
<!-- 多行文本 -->
<span>这是您的评论：</span>
<p>message</p>
<textarea v-model="message" placeholder="请输入您的评论"></textarea>
<br>
<!-- 单选框 -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox"> checked </label>
<br>
<!-- 多个单选框 -->
<input type="checkbox" id="jack" value="马云" v-model="checkedNames">
<label for="jack">马云</label>
<input type="checkbox" id="john" value="马化腾" v-model="checkedNames">
<label for="john">马化腾</label>
<input type="checkbox" id="mike" value="李彦宏" v-model="checkedNames">
<label for="mike">李彦宏</label>
<br>
<span>选中的值: checkedNames | json </span>
<br>
<!-- 单选钮 -->
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>选中的值: picked </span>
<br>
<!-- 下拉列表单选 -->
<select v-model="selected">
<option selected>湖北</option>
<option>北京</option>
<option>上海</option>
</select>
<span>选中的值: selected </span>
<br>
<!-- 下拉列表多选 -->
<select v-model="selecteds" multiple>
<option v-for="option in options" v-bind:value="option.value"> option.text </option>
</select>
<br>
<span>选中的值: selecteds | json </span>
<br>
 
<!--绑定动态值到Vue实例-->
 
<!-- 选中时为a，未选中时为b -->
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="b"/>
<span>选中时的值：toggle</span>
<br>
 
<input type="radio" v-model="pick" v-bind:value="c">男
<input type="radio" v-model="pick" v-bind:value="d">女
<span>选中时的值：pick</span>
 
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model="msg" lazy>
<!-- 设置转换为数值类型 -->
<input v-model="age" number>
<!-- 设置延时 -->
<input v-model="msg" debounce="500">
</div>
[javascript] view plain copy
var vm=new Vue(
el:‘#app‘,
data:
checkedNames: [],
options:[
text:‘南京‘,value:‘南京‘,
text:‘苏州‘,value:‘苏州‘,
text:‘无锡‘,value:‘无锡‘
],
a:‘选中‘,
b:‘未选中‘,
c:‘男‘,
d:‘女‘
);
14)css过渡
[html] view plain copy
<div id="app">
<div v-if="show" transition="expand">Hello1</div>
<div v-if="show" :transition="transitionName">Hello2</div>
<button type="button" v-on:click="toggle">过渡效果演示</button>
</div>
[javascript] view plain copy
/* 必需 */
.expand-transition
transition: all 0.5s ease;
height: 30px;
padding: 10px;
background-color: #eee;
overflow: hidden;
 
/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */
.expand-enter, .expand-leave
height: 0;
padding: 0 10px;
opacity: 0;
.fade-transition
transition: all 0.5s ease;
height: 30px;
padding: 10px;
background-color: #2df;
overflow: hidden;
.fade-enter, .fade-leave
padding: 0 10px;
opacity: 0.5;
[javascript] view plain copy
var vm=new Vue(
el:‘#app‘,
data:
show:true,
transitionName:‘fade‘
,
methods:
toggle:function()
if(this.show)
this.show=false;
else
this.show=true;
 
,
transitions:
expand:
beforeEnter: function (el)
el.textContent = ‘beforeEnter‘
,
enter: function (el)
el.textContent = ‘enter‘
,
afterEnter: function (el)
el.textContent = ‘afterEnter‘
,
beforeLeave: function (el)
el.textContent = ‘beforeLeave‘
,
leave: function (el)
el.textContent = ‘leave‘
,
afterLeave: function (el)
el.textContent = ‘afterLeave‘
);
15)css自定义过渡（注：与animats.css配合使用）
[html] view plain copy
<div id="app">
<div v-show="ok" class="animated" transition="bounce">只有我最摇摆</div>
<button type="button" v-on:click="toggle">演示过渡效果</button>
</div>
[css] view plain copy
.animated
width: 150px;
background-color: #2df;
height: 30px;
padding: 10px;
[javascript] view plain copy
var vm=new Vue(
el:‘#app‘,
data:
ok:true
,
methods:
toggle:function()
if(this.ok)
this.ok=false;
else
this.ok=true;
,
transitions:
bounce:
enterClass: ‘bounceInLeft‘,
leaveClass: ‘bounceOutRight‘
);
16)CSS动画（注：与animats.css配合使用）
[html] view plain copy
<div id="app">
<div v-show="ok" class="animated" transition="bounce">看我变一个</div>
<button type="button" v-on:click="toggle">演示动画效果</button>
</div>
[css] view plain copy
.animated
width: 150px;
background-color: #2df;
height: 30px;
padding: 10px;
.bounce-transition
display: inline-block; /* 否则 scale 动画不起作用 */
.bounce-enter
animation: bounce-in .5s;
.bounce-leave
animation: bounce-out .5s;
@keyframes bounce-in
0%
transform: scale(0);
50%
transform: scale(1.5);
100%
transform: scale(1);
@keyframes bounce-out
0%
transform: scale(1);
50%
transform: scale(1.5);
100%
transform: scale(0);
[javascript] view plain copy
var vm=new Vue(
el:‘#app‘,
data:
ok:true
,
methods:
toggle:function()
if(this.ok)
this.ok=false;
else
this.ok=true;
);
17)Javascript过渡
[html] view plain copy
<div id="app">
<p transition=‘fade‘>什么和什么？</p>
</div>
[css] view plain copy
.fade-transition
transition: all 0.5s ease;
height: 30px;
padding: 10px;
background-color: #2df;
overflow: hidden;
[javascript] view plain copy
var vm=new Vue(
el:‘#app‘
);
vm.transition(‘fade‘,
css: false,
enter: function (el, done)
// 元素已被插入 DOM
// 在动画结束后调用 done
$(el)
.css(‘opacity‘, 0)
.animate( opacity: 1 , 1000, done)
,
enterCancelled: function (el)
$(el).stop()
,
leave: function (el, done)
// 与 enter 相同
$(el).animate( opacity: 0 , 1000, done)
,
leaveCancelled: function (el)
$(el).stop()
)
18)渐进过渡
[html] view plain copy
<div id="example-1">
<input v-model="query">
<ul>
<li v-for="item in list | filterBy query" transition="staggered" stagger="100">
item.msg
</li>
</ul>
</div>
[css] view plain copy
#example-1
width:200px;
margin:20px auto;
font-size:14px;
color:#ff6600;
ul
padding-left: 0;
font-family: Helvetica, Arial, sans-serif;
.staggered-transition
transition: all .5s ease;
overflow: hidden;
margin: 0;
height: 25px;
.bounceInLeft, .bounceOutRight
opacity: 0;
height: 0;
[javascript] view plain copy
var exampleData=
query: ‘‘,
list: [
msg: ‘Bruce Lee‘ ,
msg: ‘Jackie Chan‘ ,
msg: ‘Chuck Norris‘ ,
msg: ‘Jet Li‘ ,
msg: ‘Kung Fury‘
]
;
var exampleVM = new Vue(
el:‘#example-1‘,
data:exampleData,
transitions:
staggered:
enterClass:‘bounceInLeft‘,
leaveClass: ‘bounceOutRight‘
);
 
/* exampleVM.transition(‘stagger‘,
stagger: function (index)
// 每个过渡项目增加 50ms 延时
// 但是最大延时限制为 300ms
return Math.min(300, index * 50)
)*/
19)组件
[html] view plain copy
<div id="example">
<my-component></my-component>
</div>
[javascript] view plain copy
//定义
/*var myComponent=Vue.extend(
template:‘<div>A custom component!</div>‘
);*/
//注册
//Vue.component(‘my-component‘,myComponent);
//在一个步骤中定义与注册
Vue.component(‘my-component‘,
template:‘<div>A custom component!</div>‘
);
//创建根实例
new Vue(
el:‘#example‘
);
20)组件局部注册
[html] view plain copy
<div id="example">
<parent-component></parent-component>
</div>
[javascript] view plain copy
//定义
/*var Child=Vue.extend(
template:‘<div>A child component!</div>‘
);*/
var Parent=Vue.extend(
template:‘<div>A parent component!<my-component></my-component></div>‘,
components:
// <my-component> 只能用在父组件模板内
‘my-component‘:
template:‘<div>A child component!</div>‘
);
// 注册父组件
Vue.component(‘parent-component‘, Parent);
//创建根实例
new Vue(
el:‘#example‘
);
21)使用props传递数据
[html] view plain copy
<div id="example" class="demo">
<input type="text" v-model="parentMessage"/><br>
<child v-bind:my-message="parentMessage"></child>
<!-- 双向绑定 -->
<child :msg.sync="parentMessage"></child>
 
<!-- 单次绑定 -->
<child :msg.once="parentMessage"></child>
</div>
[css] view plain copy
.demo
border: 1px solid #eee;
border-radius: 2px;
padding: 25px 35px;
margin-bottom: 40px;
font-size: 1.2em;
line-height: 1.5em;
[javascript] view plain copy
new Vue(
el:‘#example‘,
data:
parentMessage:‘Message from parent‘
,
components:
child:
props:[‘myMessage‘],
template:‘<span>myMessage</span>‘
);
22)prop验证
[html] view plain copy
<div id="example" class="demo">
<child></child>
</div>
[css] view plain copy
.demo
border: 1px solid #eee;
border-radius: 2px;
padding: 25px 35px;
margin-bottom: 40px;
font-size: 1.2em;
line-height: 1.5em;
[javascript] view plain copy
new Vue(
el:‘#example‘,
components:
child:
props:
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型 (1.0.21+)
propM: [String, Number],
// 必需且是字符串
propB:
type: String,
required: true
,
// 数字，有默认值
propC:
type: Number,
default: 100
,
// 对象/数组的默认值应当由一个函数返回
propD:
type: Object,
default: function ()
return msg: ‘hello‘
,
// 指定这个 prop 为双向绑定
// 如果绑定类型不对将抛出一条警告
propE:
twoWay: true
,
// 自定义验证函数
propF:
validator: function (value)
return value > 10
,
// 转换函数（1.0.12 新增）
// 在设置值之前转换值
propG:
coerce: function (val)
return val + ‘‘; // 将值转换为字符串
,
propH:
coerce: function (val)
return JSON.parse(val); // 将 JSON 字符串转换为对象
,
template:‘<span>hello world!</span>‘
);
23)父子组件通信
[html] view plain copy
<!--子组件模板-->
<template id="child-template">
<input type="text" v-model="msg"/>
<button type="button" v-on:click="notify">派发事件</button>
</template>
<!--父组件模板-->
<div id="events-example" class="demo">
<p>Messages: messages | json </p>
<child v-on:child-msg="handleIt"></child>
</div>
[css] view plain copy
.demo
border: 1px solid #eee;
border-radius: 2px;
padding: 25px 35px;
margin-bottom: 40px;
font-size: 1.2em;
line-height: 1.5em;
[javascript] view plain copy
// 注册子组件,将当前消息派发出去
Vue.component(‘child‘,
template:‘#child-template‘,
data:function()
return msg:‘hello‘
,
methods:
notify:function()
if(this.msg.trim())
this.$dispatch(‘child-msg‘,this.msg);
this.msg=‘‘;
);
// 初始化父组件,收到消息时将事件推入一个数组
var parent=new Vue(
el:‘#events-example‘,
data:
messages:[]
,
methods:
handleIt:function(msg)
this.messages.push(msg);
// 在创建实例时 `events` 选项简单地调用 `$on`
/*events:
‘child-msg‘:function(msg)
this.messages.push(msg);
*/
)
24)自定义指令-基础
[html] view plain copy
<div id="demo" v-demo:hello.a.b="msg"></div>
[javascript] view plain copy
Vue.directive(‘demo‘,
bind: function ()
console.log(‘demo bound!‘)
,
update: function (value)
this.el.innerHTML =
‘name - ‘ + this.name + ‘<br>‘ +
‘expression - ‘ + this.expression + ‘<br>‘ +
‘argument - ‘ + this.arg + ‘<br>‘ +
‘modifiers - ‘ + JSON.stringify(this.modifiers) + ‘<br>‘ +
‘value - ‘ + value
);
var demo = new Vue(
el: ‘#demo‘,
data:
msg: ‘hello!‘
)
25)自定义指令-高级选项
[html] view plain copy
<div id="demo" >
<!--对象字面量-->
<div v-demo-1=" color: ‘white‘, text: ‘hello!‘ "></div>
<!--字面修饰符-->
<div v-demo-2.literal="foo bar baz"></div>
<!--元素指令-->
<my-directive></my-directive>
<!--高级选项-params-->
<div v-example a="hi"></div>
</div>
[javascript] view plain copy
Vue.directive(‘demo-1‘, function(value)
console.log(value.color);
console.log(value.text);
);
Vue.directive(‘demo-2‘,function(value)
console.log(value);
);
Vue.elementDirective(‘my-directive‘,
bind:function()
console.log(this.el);
);
Vue.directive(‘example‘,
params:[‘a‘],
bind:function()
console.log(this.params.a);
);
Vue.directive(‘two‘,
twoWay: true,
bind: function ()
this.handler = function ()
// 将数据写回 vm
// 如果指令这样绑定 v-example="a.b.c"
// 它将用给定值设置 `vm.a.b.c`
this.set(this.el.value)
.bind(this);
this.el.addEventListener(‘input‘, this.handler);
,
unbind: function ()
this.el.removeEventListener(‘input‘, this.handler)
);
vm=new Vue(
el: ‘#demo‘
);
26)自定义过滤器
[html] view plain copy
<div id="demo" class="demo">
<!--基础过滤器-->
<span v-text="message | reverse"></span><br>
<span v-text="message | wrap ‘before‘ ‘after‘"></span><br>
<!--双向过滤器-->
<input type="text" v-model="money | currencyDisplay"/>
<p>ModelValue:money | currencyDisplay</p>
<!--动态参数-->
<input v-model="userInput"/>
<span>msg | concat userInput</span>
</div>
[css] view plain copy
.demo
border: 1px solid #eee;
border-radius: 2px;
padding: 25px 35px;
margin-bottom: 40px;
font-size: 1.2em;
line-height: 1.5em;
[javascript] view plain copy
Vue.filter(‘reverse‘,function(value)
return value.split(‘‘).reverse().join(‘‘);
);
Vue.filter(‘wrap‘,function(value,begin,end)
return begin+‘ ‘+value+‘ ‘+end;
);
Vue.filter(‘currencyDisplay‘,
// model -> view
// 在更新 `<input>` 元素之前格式化值
read:function(val)
return ‘$‘+val.toFixed(2)
,
// view -> model
// 在写回数据之前格式化值
write: function(val, oldVal)
var number = +val.replace(/[^\d.]/g, ‘‘)
return isNaN(number) ? 0 : parseFloat(number.toFixed(2))
);
Vue.filter(‘concat‘,function(value,input)
return value+input;
)
new Vue(
el:‘#demo‘,
data:
message:‘abc‘,
money:123.45,
msg:‘hello‘,
userInput:‘hi‘
);
27)混合
[html] view plain copy
<div id="demo" class="demo">
 
</div>
[css] view plain copy
.demo
border: 1px solid #eee;
border-radius: 2px;
padding: 25px 35px;
margin-bottom: 40px;
font-size: 1.2em;
line-height: 1.5em;
[javascript] view plain copy
var myMixin=
created:function()
this.hello();
,
methods:
hello:function()
console.log(‘hello from mixin!‘);
;
// 定义一个组件，使用这个混合对象
var Component = Vue.extend(
mixins: [myMixin]
);
var component = new Component();
new Vue(
el:‘#demo‘
);
28)混合-选项合并
[html] view plain copy
<div id="demo" class="demo">
 
</div>
[css] view plain copy
.demo
border: 1px solid #eee;
border-radius: 2px;
padding: 25px 35px;
margin-bottom: 40px;
font-size: 1.2em;
line-height: 1.5em;
[javascript] view plain copy
var mixin=
created:function()
console.log(‘mixin hook called‘);
,
methods:
foo: function ()
console.log(‘foo‘);
,
conflicting: function ()
console.log(‘from mixin‘);
;
var vm=new Vue(
el:‘#demo‘,
mixins:[mixin],
created:function()
console.log(‘component hook called‘);
,
methods:
bar: function ()
console.log(‘bar‘);
,
conflicting: function ()
console.log(‘from self‘);
);
vm.foo();
vm.bar();
vm.conflicting();//组件优先

参考资料：

 
 

1、在即将创建项目的文件下按 shift+右键，点击打开命令窗口 
2、在命令窗口中依次输入： 
1) 全局安装 vue-cli 
npm install –global vue-cli 
2) 创建一个基于 webpack 模板的新项目 
vue init webpack my-project 
步骤如下： 
技术图片

3) 安装依赖 
cd my-project(项目名称） 
4) 安装 npm 
npm install 
全局安装 cnpm 
npm install -g cnpm –registry=https://registry.npm.taobao.org

在创建好的项目下运行npm

 

 

js框架 vue

1. 职责划分-MVVM

Model 模型 - 数据 
View 视图 - html 标签，样式 
ViewModel 用来结合模型和视图 - 决定数据展示在哪个标签上

2. 例子

vue中的数据和页面上标签内容是’绑定’在一起的，模型数据发生了变动，页面视图也会相应变化。这种特性称之为响应式框架。

例如：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
<!--  由两个占位，到模型中找相应的数据, 匹配的是模型数据的属性名称 -->
<div id="app">name</div>

<script>
    // 每个页面要创建一个Vue对象（
    var vue = new Vue(
    // el 把数据和视图结合在一起，视图会在此处寻找对应的标签
        el:"#app"
        // 模型数据存储于data之中，其中多个属性，可以配合进行显示
        data: 
            name: "hello, world"
        ,

    );
</script>
</body>
</html>

注意： 
1. 绑定时，要把一个统一的父标签与Vue对象进行绑定 
2. 不要把Vue对象和html或body标签绑定，建议和一个div标签绑定

3.计算属性

可以在中进行简单的计算，一般情况下计算由计算属性完成，更合理

<div id="app">
    <!--由计算属性完成-->
    <p>nameReverse</p>
    <!--简单计算也可以在中完成 -->
    <p>age+1</p>
    <div>
        <span>sex</span>
    </div>
</div>



<script>
    // 每个页面要创建一个Vue对象
    var vue = new Vue(
        el:"#app",
        computed: 
            /* 计算属性*/
            nameReverse : function()
                // this 代表vue对象
                return this.name.split("").reverse().join("");
            
        
    );
</script>

4. v-for 指令

<div id="app">
    <!--  循环指令 v-for -->
    <p v-for="p in list"> p.name , p.price, p.img</p>
</div>

<script>
    var vue = new Vue(
        el:"#app",
        data:
            list:[
                name:"商品1", price:3000.00, img:"图片名1.jpg",
                name:"商品2", price:4000.00, img:"图片名2.jpg",
                name:"商品3", price:2000.00, img:"图片名3.jpg"
            ]
        
    );
</script>

5. v-if 指令

条件成立，在视图上就显示此标签，否则视图上不会有这个标签

<div id="app">
    <!-- 指令 循环指令 v-for -->
    <p v-for="p in list"> p.name , p.price, p.img</p>

    <table border="1" width="100%" v-if="list.length>0">
        <tbody>
            <!-- p代表数组中第i个元素，i是下标值-->
            <tr v-for="(p,i) in list">
                <td>i+1</td>
                <td>p.name</td>
                <td>p.price</td>
                <td>p.img</td>
            </tr>
        </tbody>
    </table>
    <span v-else>暂无商品</span>
</div>

v-show 指令 根据条件决定表示是否显示， 
与v-if的区别在于，条件不成立时，标签根本不会出现 
v-show是条件不成立时，隐藏了标签 
v-show不能配合v-else 使用

6. v-bind 绑定属性

要实现标签属性的绑定，必须使用v-bind 指令

<table border="1" width="100%" v-show="list.length>0">
    <tbody>
        <!-- p代表数组中第i个元素，i是下标值-->
        <tr v-for="(p,i) in list">
            <td>i+1</td>
            <td>p.name</td>
            <td>p.price</td>
            <!--  语法只能用来占位内容，不能作为标签的属性(特性)
                要绑定标签的属性，需要使用 v-bind:属性名="变量"

                简化写法(省略了v-bind)：
                :属性名="变量"
             -->
            <td><img width="110" v-bind:src=" ‘images/‘ + p.img" :title="p.title"></td>
            <td><img width="110" :src=" ‘images/‘ + p.img"></td>
        </tr>
    </tbody>
</table>

7. 事件处理

<div id="app">
    <!-- 格式：        v-on:事件名
         简化写法：    @事件名
         还可以实现参数传递
    -->
    <input type="button" value="点我" v-on:click="abc(50)">
    <input type="button" value="点我" @click="abc(100)">
</div>


<script>
    var vue = new Vue(
        el:"#app",
        data: 

        ,
        methods: 
            abc: function(i)
                console.log("点击了按钮", i);
            
        
    );
</script>

8. 双向绑定

v-bind:属性名 只能实现单向的绑定：模型的修改能够立刻反应到视图，但视图的修改不能影响模型

v-model:属性名 能够实现双向绑定：不仅有v-bind的功能，而且视图的修改也能影响模型了

 

以上是关于vue框架的主要内容，如果未能解决你的问题，请参考以下文章

前端Vue.js框架是啥？

vue UI框架对比

VUE框架

vue框架官网悬浮头部怎么做

vue框架

vue框架是用哪句话体现的