Vue-1.0

2017-03-21 本文已影响39人 Jianshu9527

发布时间:2014年2月开源的一个前端开发库

1 官网介绍

1 是一套构建用户界面的渐进式框架
2 采用自底向上增量开发的设计
3 Vue只关注视图层,使其容易和其他的第三方库或者项目整合
4 当单文件组件和Vue生态系统支持的库结合使用时,能给为复杂的单页面程序提供驱动

2 版本下载

http://v1-cn.vuejs.org/guide/installation.html
(提供了开发版本和生产版本)

3 基本指令起步

3.1 构造器

每一个Vue.js都是通过构造函数Vue创建一个Vue的实例来进行启动

var vm = new Vue({//变量名vm 表示Vue实例
        //代码    
})

3.2 属性与方法

Vue实例会代理data对象里面的所有属性

var  data = { a : 1}
var vm = new Vue({
     data:data
})
vm.a == data.a    //=>true
vm.a = 2 //修改属性也会影响到原始的数据
data.a    // a=>2
data.a = 3    //同理
vm.a     //a=>3

小结:代理的属性是响应的,在实例创建之后添加新的属性到实例上,是不会触发视图更新

3.3 常见指令
指定(directive)是带有v- 前缀的的特殊属性,指令的作用就是当其表达式的值改变时相应的将某些行为应用到DOM上

1 数据绑定指令

v-model
双向数据绑定,只能在表单元素中使用,修改当前的数据则会影响相对应的数据值(使用v-model必须要赋初始值)
v-text
可以直接渲染data里面的数据,只能输出文本,不能输出元素标签
v-html
可以直接输出html字符串和文本内容

2 指令接受参数(接受一个参数,用冒号来指明即可)

v-bind:src
v-bind:class
v-bind:href
v-bind:id
v-html:

3 条件指令(作为一个自定义的属性来使用)

v-if(背景图的颜色改变)//控制多个兄弟元素可以使用template元素
v-else
v-else-if(2.0新增)
v-show

4 循环指令

v-for(value in array)//数组遍历
v-for((val,index) in array)//获取每个索引值,从零开始

v-for(val in obj)//对象遍历
v-for((val,key) in obj)//获取键和值

<template v-for="(val ,key) in obj">
    <h2>{{val}}</h2>
    <p>{{key}}</p>
</template>

v-for(val in 10)//整数循环 ,从零开始

5 计算属性(声明式的描述一个值依赖了其他的值)

data:数据存放
methods:方法和事件的操作

<h2>{{getAge(birthday)}}</h2>
data:{
   birthday:"1996-10-21"
}
//计算年龄
methods:{
    getAge:function(birthday){
      var d1 = new Date(birthday);  
      var d2 = new Date();
      return d2.getFullYear() - d1.getFullYear();//
    }
}

//计算属性方法
<h2>{{age}}</h2>
computed:{
    age:function(){
      var d1 = new Date(this.birthday);//this 代表当前
      var d2 = new Date();
      return d2.getFullYear() - d1.getFullYear(); 
    }
  }
//理解:就是属性加方法的合体

1 计算属性的两大特征

缓存性能(和调用methods函数之间的区别)
使用计算属性的时候,依赖的值如果没有发生变化的时候(相互有依赖的关系),则当前的计算属性就会使用缓存,不会重新执代码(如果是普通方法,则会重新执行代码)
get特征

//方法中设置和修改
age:{
  get : function(){
    return new Date().getFullYear() - this.birthday
  },
  set:function(val){//birthday
    this.birthday = new Date().getFulYeatr() - val;
  }
}

6 过滤器
对数据的进行不同的处理,在不同需求下,对数据,文本进行不同的格式化

使用格式{{变量 | 过滤器名称*(参数1,参数2,参数3)}} //版本1之后都放弃了过滤器

7 事件

1 点击事件

v-on:click="方法名()";
简写 @click="方法名"

2 操作DOM

v-on:click = "方法名($event)"//获取当前的元素
3 停止冒泡
v-on:click.stop = "方法名"//阻止事件进行冒泡
事件注意事项
绑定事件没有on ,
事件名称都是小写

8 表单处理

数据双向绑定
模型的变化 ---> 视图的更新
视图的变换 ---> 模型的更新
指令 v-model(只能应用表单输入框中)

9 修饰符

10 样式操作(class和style)

是对元素的属性操作(v-bind:)
通过表达式的值来增添元素类
表达式的结果类型除了字符串,还支持对对象和数组的操作

1 对象语法

//案例一
isActive:为true的时候,添加active类
<div v-bind:class='{active:isActive}'>Test</div>
//案例二
isActive的值大于2的时候,添加active类
<div v-bind:class='{active:isActive>2}'>Test</div>
//案例三
多个条件同时判断,满足则添加相对应的类,多个类用逗号进行分隔
<div v-bind:class='{activea:isActive,activeb:isActive==10}'>Test</div>

案例四:通过计算属性来绑定样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>对象语法</title>
    <!-- js -->
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="vue.min.js"></script>
    <!-- js -->
    <script type="text/javascript">
        $(function(){
            var vm = new Vue({
                el:".body",
                data:{
                    isActive: true,
                    hasError: false
                },
                computed:{
                    classObject:function(){
                        return {
                            active: this.isActive && !this.error,
                            'text-danger': this.error && this.error.type === 'fatal',
                        }
                    }
                }
            })
        })
    </script>
</head>
<body>
    <div class="body">
        <div v-bind:class="classObject"></div>
    </div>
</body>
</html>

*methods只是提供数据逻辑,而不是DOM的细节处理

Vue-1.0

1 官网介绍

2 版本下载

3 基本指令起步

4 循环指令

猜你喜欢

热点阅读