文档章节

初识Vue.js

wshining
 wshining
发布于 2017/08/28 16:28
字数 1357
阅读 73
收藏 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
博文 64
码字总数 41353
作品 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
Vue命令行工具vue-cli

Vue.js 提供一个官方命令行工具,可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可...

韦姣敏
06/23
0
0
vue入门环境搭建及demo运行

vue简介: Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,V...

挑战者666888
05/22
0
0
Vue常用经典开源项目汇总参考-海量

Vue常用经典开源项目汇总参考-海量   Vue是什么?   Vue.js(读音 /vju/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。...

80368704
06/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

arts-week5

Algorithm 824. Goat Latin - LeetCode 152. Maximum Product Subarray - LeetCode 110. Balanced Binary Tree - LeetCode 67. Two Sum II - Input array is sorted - LeetCode 665. Non-dec......

yysue
10分钟前
0
0
iOS开发之AddressBook框架详解

iOS开发之AddressBook框架详解 一、写在前面 首先,AddressBook框架是一个已经过时的框架,iOS9之后官方提供了Contacts框架来进行用户通讯录相关操作。尽管如此,AddressBook框架依然是一个非...

珲少
40分钟前
1
0
两年摸爬滚打 Spring Boot,总结了这 16 条最佳实践

Spring Boot是最流行的用于开发微服务的Java框架。在本文中,我将与你分享自2016年以来我在专业开发中使用Spring Boot所采用的最佳实践。这些内容是基于我的个人经验和一些熟知的Spring Boot...

Java填坑之路
今天
3
0
《Spring5学习》04 - 面向切面编程

一、Spring面向切面编程的基本概念 面向切面编程(即AOP):把项目中需要再多处使用的功能比如日志、安全和事务等集中到一个类中处理,而不用在每个需要用到该功能的地方显式调用。 横切关注...

老韭菜
今天
2
0
day61-20180819-流利阅读笔记

跑道没了,它们还在跑:澳门赛狗业的遗孤 Daniel 2018-08-19 1.今日导读 相信你早就知道香港有个赛马会,可是你听说过香港的邻居澳门原本有个赛狗会吗?其实,对于澳门人来说,赛狗这项活动历...

aibinxiao
今天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部