文档章节

初识Vue.js

wshining
 wshining
发布于 2017/08/28 16:28
字数 1357
阅读 75
收藏 3

什么是vue.js

  • 一个构建数据驱动的web界面的库;
  • Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件
  • Vue.js 的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单;

安装vue.js

vue.js的属性、方法、生命周期

先看一个代码实例

window.onload=function(){
	var dataList={
		name: "vue",
		age:2
	};
	var commonfun={
		sayHello:function(){
			return 'hello,world'
		}
	};
	var app  = new Vue({
		el:'h2',
		data:dataList,
		methods:commonfun
	});
}
  • 属性:每个 Vue 实例都会代理其 data、methods、filters 对象里所有的属性,并且具有双向绑定功能:

      app.name===dataList.name;//true
      app.age===dataList.age;//true
      console.log(app.sayHello());//hello,world
    

    注: 被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新,如下代码会报错;

      //.htm 文件 中
      <h2>{{title}}</h2>
    
      //js文件中
      window.onload=function(){
      	var dataList={
      		name: "vue",
      		age:2,
      	};
      	var app  = new Vue({
      		el:'h2',
      		data:dataList
      	});
      	app.title="this is vue";
      }
      //vue.min.js:6 ReferenceError: title is not defined
    
  • Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $ ,以便与代理的数据属性区分;

  •   var app  = new Vue({
      	el:'#h',
      	data:dataList
      });
      console.log(app.$el === document.getElementById('h'));//true
    
  • 声明周期:Vue 实例在创建时有一系列初始化步骤——例如,它需要建立数据观察,编译模板,创建必要的数据绑定。在此过程中,它也将调用一些生命周期钩子,给自定义逻辑提供运行机会;

Vue数据绑定

Vue.js 的模板是基于 DOM 实现的,所有的 Vue.js 模板都是可解析的有效的 HTML,且通过一些特殊的特性做了增强。

  • 插入值

      <span>{{value}}</span>
    
  • 绑定表达式:表达式将在所属的 Vue 实例的作用域内计算。每个绑定只能包含单个表达式

      {{ number + 1 }}
    
      {{ ok ? 'YES' : 'NO' }}
    
      {{ message.split('').reverse().join('') }}
      {{ var a = 1 }}
    
      <!-- 这是一个语句,不是一个表达式: -->
      {{ var a = 1 }}
      <!-- 流程控制也不可以,可改用三元表达式 -->
      {{ if (ok) { return message } }}
    
  • 过滤器: 管道语法不是 JavaScript 语法,因此不能在表达式内使用过滤器,只能添加到表达式的后面

      {{ message | capitalize }}
      //过滤器可以串联
      {{ message | filterA | filterB }}
      //过滤器也可以接受参数
      {{ message | filterA 'arg1' arg2 }}
    
  • 指令:指令 (Directives) 是特殊的带有前缀 v- 的特性

      <p v-if="greeting">Hello!</p>
      //有些指令可以在其名称后面带一个“参数”,中间放一个冒号隔开
      <a v-bind:href="url"></a>
      <a v-on:click="doSomething"></a>
      //修饰符 (Modifiers) 是以半角句号开始的特殊后缀,用于表示指令应当以特殊方式绑定
      <a v-bind:href.literal="/a/b/c"></a>
    
  • 缩写

  •   <!-- 完整语法 -->
      <a v-bind:href="url"></a>
      <!-- 缩写 -->
      <a :href="url"></a>
    
      <!-- 完整语法 -->
      <a v-on:click="doSomething"></a>
      <!-- 缩写 -->
      <a @click="doSomething"></a>
    

Vue计算属性

在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。 如果需要多于一个表达式的逻辑,应当使用计算属性。

  • computed 属性

      <div id="demo"> a = {{a}}, b = {{ b }} </div>
    
      window.onload=function(){
      	var vm = new Vue({
      	  el: '#demo',
      	  data:{
      	  	a:1
      	  },
      	  computed:{ b: function () { return this.a + 1; }},
      	});
      }
      //a=1,b=2;
    

    这里我们声明了一个计算属性 (computed) b。我们提供的函数将用作属性vm.b的getter

  • vs.$watch 属性

    Vue.js提供了一个方法$watch,用于观察Vue实例上的数据变动。

      <div id="demo">{{fullName}}</div>
    

    更好的办法是使用计算属性而不是一个命令式的$watch回调。

      <div id="demo">{{fullName}}</div>
    
      window.onload=function(){
      	var vm = new Vue({
      	  el: '#demo',
      	  data:{
      	  	firstName:"foo",
      	  	lastName:"bar"
      	  },
      	  computed:{
      	  	fullName:function(){
      	  		return this.firstName+"  "+this.lastName;
      	  	}
      	  },
      	});
      }
    
  • 计算 setter

    计算属性默认只是getter,不过在需要时也可以提供一个setter

      computed: {
        fullName: {
          // getter
          get: function () {
            return this.firstName + ' ' + this.lastName;
          },
          // setter
          set: function (newValue) {
            var names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[names.length - 1];
          }
        }
      }
    

类与样式绑定

class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。

  • 绑定HTML Class

    • 对象语法

        <div class="static" v-bind:class="{ 'class-a': isA, 'class-b': isB }"></div>
      

      v-bind:class 指令可以与普通的 class 特性共存; 当 isA 和 isB 变化时,class 列表将相应地更新。

      直接绑定数据里的一个对象:

        <div v-bind:class="classObject"></div>
      
        data: {
          classObject: {
            'class-a': true,
            'class-b': false
          }
        }
      
    • 数组语法

      根据条件切换列表中的 class,可以用三元表达式

        <div v-bind:class="[classA, isB ? classB : ' ']">
        <div v-bind:class="[classA, { classB: isB, classC: isC }]">
      
  • 绑定内联样式

    • 对象语法 v-bind:style对象语法十分直观,看着像 CSS的JavaScript 对象。CSS 属性名可以用驼峰式或短横分隔命名:

        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
      
        data: {
          activeColor: 'red',
          fontSize: 30
        }
      
        直接绑定到一个样式对象,让模板更清晰
        <div v-bind:style="styleObject"></div>
        data: {
          styleObject: {
            color: 'red',
            fontSize: '13px'
          }
        }
      
    • 数组语法

      v-bind:style 的数组语法可以将多个样式对象应用到一个元素上

        <div v-bind:style="[styleObjectA, styleObjectB]">
      
    • 自动添加前缀

      当 v-bind:style 使用需要厂商前缀的 CSS 属性时,如 transform,Vue.js 会自动侦测并添加相应的前缀

© 著作权归作者所有

共有 人打赏支持
wshining
粉丝 14
博文 67
码字总数 46645
作品 0
深圳
前端工程师
vue-cli 3.0 初体验

最近复习了下vue,突然发现vue-cli已经更新到3.0版本了,并且变化蛮大,看来要不停的学习,真是一入前端深似海。 安装步骤: 1、全局安装 npm install -g @vue/cli Vue CLI 的包名称由 vue-...

tianyawhl
08/21
0
0
今天在码云遇到一个很有意思的人 for Per.js

今天在码云遇到一个很有意思的人,他在我的Per.js项目下面评论了一句,大意为“你试试这句代码,看看速度到底是你快还是Vue快”【当然,这个评论被我手残不小心删掉了...】。 然后我就试了,...

Skyogo
09/23
0
0
Vue实现前后端分离项目的初体验

Vue实现前后端分离项目的初体验 经过之前学习的Vue的知识: vue基本指令 vue组件 vue-resource vue路由 其实我们已经可以开始实战运用到实际的Web项目中了,由于本人是Java后端开发的,所以后...

TyCoding
09/01
0
0
强大的脚手架:vue-cli 3.x UI控制台初体验

众所周知,vue的官方脚手架是vue-cli,但它已经很久没有大版本更新了,原来是憋了个大招。最近发布的vue-cli 3.x ,虽然还是bata版本,但它新增的功能是非常强大的,小编已经迫不及待的下载体...

a独家记忆
06/30
0
0
JavaScript主流框架3月趋势总结

译者按: React依旧独领风骚! 原文: What’s New in JavaScript Frameworks-March 2018 译者: Fundebug 为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习...

Fundebug
04/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Python深体验,常见的数据处理方式(必须要懂的)

1.缺失值处理 - 拉格朗日插值法 input_file数据文件内容(存在部分缺失值): from scipy.interpolate import lagrangeimport pandas as pdimport numpy as npinput_file = './dat...

无也Python
26分钟前
2
0
Spring MVC注解故障追踪记

Spring MVC是美团点评很多团队使用的Web框架。在基于Spring MVC的项目里,注解的使用几乎遍布在项目中的各个模块,有Java提供的注解,如:@Override、@Deprecated等;也有Spring提供的注解,...

Skqing
27分钟前
4
0
区块链入门教程以太坊源码分析cmd包分析

  兄弟连区块链入门教程以太坊源码分析cmd包分析。 ### cmd包概述 * geth 主要Ethereum CLI客户端。它是Ethereum网络(eth主网,测试网络或私有网)的入口点,使用此命令可以使节点作为ful...

兄弟连区块链入门教程
29分钟前
1
0
@Autowired 报红线

代码可正常跑,不过红线看着有点难受,解决方案 使用@Autowired(required=false) 或者@Resource. 这两者区别网上一大堆

斩神魂
35分钟前
3
0
DataTable中检索信息 (C#)

C#_从DataTable中检索信息 存在于内存中的虚拟表DataTable,绑定在数据显示控件后,如果想在再检索其中某些信息,可以利用DataTable.Select方法进行检索,避免了重复的读取数据库。Select方法...

CS-CS01
43分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部