VueJS入门---简述

【此部分可单做了解】

一、安装

1、独立版本：可以简单的在页面中引入 Vue.js 作为独立版本，Vue即被注册为全局变量，可以在页面中使用了。

2、CDN方法：

以下推荐国外比较稳定的两个 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

3、NPM方法：如果是搭建大型应用，可以使用官方推荐的项目模板来创建，即命令行工具 vue-cli【后面会有详细讲解，此处不再赘述】

二、概述

Vue的目标是实现响应的数据绑定和组合的视图组件，所以其核心只有两块：

• 数据绑定系统

• 组件系统

数据通过在HTML模板中的指令和“Mustache”语法，绑定到对应的HTML元素上，其底层是JavaScript对象的存取器属性和原生javascript事件。

组件系统则通过扩展的Vue实例，来渲染位于HTML中的类似于自定义元素的Vue组件，从而实现独立可复用的组件。

三、Vue实例

 

每个Vue应用的起步都是从一个Vue的根实例开始：

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的

既然是构造函数就有属于他的方法和属性

var vm = new Vue({

    //选项，包含数据、模板、挂载元素等

})

 

而每个组件，也是一个扩展的vue实例：

var myCompnent = Vue.extend({

    //选项，包含组件的数据、模板、挂载元素等

})

 

Vue实例会代理设置在data选项中的数据，所有data选项中的数据都可以通过vm本身进行访问：

var vm = new Vue({

    data: {

        name: 'chen'

    }

})

data.name  // -> chen

vm.name = 'wei'

data.name // -> wei

 

除了数据属性，Vue实例还暴露了一些有用的实例属性与方法，这些属性与方法都有前缀$，区别于数据属性（参考API文档）：

vm.$watch

vm.$data

vm.$el

 

在一个Vue实例的生命周期的不同时间，可以调用相应的回调函数：

不要在实例属性或者回调函数中（如vm.$watch('a', newVal => this.myMethod())）使用箭头函数。因为箭头函数绑定父上下文，所以 this 不会像预想的一样是 Vue 实例，而是 this.myMethod 未被定义。

实例生命周期：

四、数据绑定

有两种方式可以进行数据绑定：插值和指令。

1、插值：使用双大括号语法来绑定数据到HTML中。插值也可以用在HTML属性中。

2、指令：使用指令 (Directives，是特殊的带有前缀v-的特性）来将数据绑定到HTML，通常用于应用特殊行为到DOM上

　　<p v-if="greeting">Hello!</p>   <!--当greeting为真时p存在-->

指令有三个需要记住的特征：

• 参数：v-on:click="doSomething" ，这里click是v-on指令的参数

• 修饰符：v-on:click.stop="doSomething"，这里.stop是修饰符，表示阻止冒泡

• 缩写：v-bind指令可缩写为简单的:号，v-on指令可以缩写为@号
• <a :href="url"></a>         <a @click="doSomething"></a>

插值的内容和指令的值，都被限定为只能使用绑定表达式，它由一个JavaScript表达式和可选的一个或多个过滤器构成。需要注意JavaScript表达式和语句的区别，而过滤器则是一个JavaScript函数，Vue提供了很多内置的过滤器，也可以自己编写自定义过滤器：

{{ message | filterA | filterB }}

{{ message | filterA 'arg1' arg2 }} // 过滤器也可以接受参数

 

转载于:https://www.cnblogs.com/codeingzhou/p/8446632.html