初识Vue.js

2019独角兽企业重金招聘Python工程师标准>>>

什么是vue.js

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

安装vue.js

• 在 Vue.js 的官网上直接下载 vue.min.js，并用 <script> 引用；

• 使用 CDN ：

  • BootCDN（国内） : https://cdn.bootcss.com/vue/2.2.2/vue.min.js ；
  • unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
  • cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js；

  注： 国外的版本比较稳定，国内还没发现哪一家比较好，目前还是建议下载到本地；

• 使用NPM： npm install Vue

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 会自动侦测并添加相应的前缀

转载于:https://my.oschina.net/u/1778998/blog/1525055