Vue.js 快速上手

么是Vue.js

　　Vue.js是一个构建数据驱动的web界面的库。技术上，它重点集中在MVVM模式的ViewModel层，因此它非常容易学习，非常容易与其它库或已有项目整合。

　　Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

　　Vue.js 的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。在使用jQuery手工操作DOM时，我们的代码常常是命令式的、重复的与易错的。Vue.js拥抱数据驱动的视图概念。通俗地讲，它意味着我们在普通HTML模板中使用特殊的语法将DOM “绑定”到底层数据。

安装

独立版本

　　直接下载并用 < script > 标签引入，Vue会被注册为一个全局变量。如下代码，这样就可以在脚本中使用Vue.js了。

<script src="lib/vue.js"></script>

CDN

　　也可以在 jsdelivr或 cdnjs获取 (版本更新可能会略滞后)。

NPM

　　在用 Vue.js 构建大型应用时推荐使用 NPM 安装，NPM 能很好地和诸如 Webpack 或 Browserify 的 CommonJS 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。

$ npm install vue
`# 获取CSP兼容版本：
`$ npm install vue@csp
`# 获取最新开发版本(来自于GitHub):
$ npm install yyx990803/vue#dev

Hello World

　　现在就让我们来写第一个vue.js的实例。如下代码：

html代码：

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

JavaScript代码:

new Vue({
  el: '#demo',
  data: {
    message: 'Hello World!'
  }
})

　　上面代码中div中的部分 {{ message }}为数据绑定，我们将会在后面的学习中讲到。而vue.js代码是实例化一个Vue对象。在使用vue之前必须要实例化。

构造器

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

var vm=new Vue({
  // 选项
})

　　一个Vue实例其实正是一个MVVM模式中所描述的 ViewModel - 因此在文档中经常会使用vm这个变量名。

属性与方法

　　每个Vue实例都会代理其data对象里所有的属性，如下代码：

var data={ a: 1 }
var vm=new Vue({
  data: data
})
//vm.a===data.a  -> true
// 设置属性也会影响到原始数据
vm.a=2
// data.a  -> 2
// ... 反之亦然
data.a=3
//vm.a -> 3

　　注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

　　除了前面这些数据属性，Vue 实例还有一些有用的实例属性与方法。这些属性与方法都有前缀 $，以便与代理的数据属性区分。例如：

var data={ a: 1 }
var vm=new Vue({
  el: '#example',
  data: data
})

vm.$data===data // -> true
vm.$el===document.getElementById('example') // -> true

// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 `vm.a`  改变后调用
})

插值

　数据绑定最基础的形式是文本插值，使用 {{}} 语法（双大括号）：

<span>Message: {{ msg }}</span>

　　{{ msg }} 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。

　　也可以只处理单次插值，今后的数据变化就不会再引起插值更新了：

<span>This will never change: {{* msg }}</span>

如下JavaScript代码:

var data={msg:'Hello Vue.js!'};
new Vue({
  el: '#demo',
  data: data
 })
data.msg="Hello World!";

原始的HTML

　　双大括号标签将数据解析为纯文本而不是HTML。为了输出真的HTML字符串，需要用三大括号标签：

<div>{{{ msg }}}</div>

　　如下javascript代码：


var data={msg:'<p>Hello Vue.js!</p>'};
new Vue({
    el: '#demo',
    data: data
   })

HTML特性

　　双大括号标签也可以用在 HTML 特性 (Attributes) 内：

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

javascript代码如下：

var data={id:'demo'};
new Vue({
  el: 'div',
  data: data
 })

我们去查看HTML源码，是不是id已经变成我们设置的id了。

JavaScript表达式

　　Vue.js 在数据绑定内支持全功能的JavaScript表达式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

过滤器

　　Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”，以“管道符(|)”指示。过滤器本质上是一个函数，这个函数会接收一个值，将其处理并返回。

{{ message | uppercase }}

　　这里我们将表达式 message 的值“管输（pipe）”到内置的 uppercase 过滤器，这个过滤器其实只是一个 JavaScript 函数，返回大写化的值。Vue.js 提供数个内置过滤器，在后面我们会谈到如何开发自己的过滤器。

　　可以串联多个过滤器：

{{ message | filterA | filterB }}

html代码：　　


<div id='demo'>
<span>{{msg | lowercase | capitalize}}</span>
</div>

javaScript代码：


 var data={msg:'heLLO!'};
 new Vue({
  el: '#demo',
  data: data
 })

运行结果为：Hello

指令

　　Vue.js指令 (Directives) 是特殊的带有前缀 v- 的特性。本质是模板中出现的特殊标记，让处理模板的库知道需要对这里的DOM元素进行一些对应的处理。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。

<p v-if="msg">Hello!</p>

　　这里 v-if 指令将根据表达式 msg 值的真假删除/插入 < p > 元素。

　　在Vue.js中为我们提供了一些指令：v-text，v-html，v-model，v-on，v-else等等，同学们可以去查看Vue.js的指令api(cn.vuejs.org/api/#指令)。

javascript代码：

 var data={msg:0};
 new Vue({
  el: '#demo',
  data: data
 })

计算属性

　　在模板中表达式非常便利，但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。

　　在 Vue.js 中，你可以通过 computed 选项定义计算属性：

<div id="example">
  a={{ a }}, b={{ b }}
</div>
var vm=new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // 一个计算属性的 getter
    b: function () {
      // `this` 指向 vm 实例
      return this.a + 1
    }
  }
})

运行结果为：a=1,b=2。

更多内容如 Class 与 Style 绑定、渲染指令、表单控件绑定、自定义指令和过滤器、方法与事件处理器、组件等请参考： http://www.hubwiz.com/course/566e67417e7d40946afc5ddc/

板语法

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。

文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache”语法 (即双大括号)：

<span>Message: {{ msg }}</span>

原始 HTML

双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：

<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

这里我们遇到了一个新的概念。这里看到的 v-html attribute 被称为一个指令。

安全警告

在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容。

属性绑定

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。

简写(实际开发常见)

因为 v-bind 非常常用，我们提供了特定的简写语法：

<div :id="dynamicId"></div>

布尔属性

<button :disabled="isButtonDisabled">Button</button>

当 isButtonDisabled 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。

动态绑定多个值

通过不带参数的 v-bind，你可以将它们绑定到单个元素上：

const objectOfAttrs={
  id: 'container',
  class: 'wrapper'
}

<div v-bind="objectOfAttrs"></div>

使用 JavaScript 表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

在 Vue 模板内，JavaScript 表达式可以被使用在如下场景上：

在文本插值中 (双大括号)
在任何 Vue 指令 (以 v- 开头的特殊 attribute) attribute 的值中

仅支持表达式

每个绑定仅支持单一表达式，也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。

无效示例：

<!-- 这是一个语句，而非表达式 -->
{{ var a=1 }}

<!-- 条件控制也不支持，请使用三元表达式 -->
{{ if (ok) { return message } }}

调用函数

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

绑定在表达式中的方法在组件每次更新时都会被重新调用，因此不应该产生任何副作用，比如改变数据或触发异步操作。

受限的全局访问

模板中的表达式将被沙盒化，仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象，比如 Math 和 Date。
没有显式包含在列表中的全局对象将不能在模板内表达式中访问，例如用户附加在 window 上的属性。然而，你也可以自行在 app.config.globalProperties 上显式地添加它们，供所有的 Vue 表达式使用。

指令 Directives

指令是带有 v- 前缀的特殊 attribute。Vue 提供了许多内置指令，包括上面我们所介绍的 v-bind 和 v-html。

指令 attribute 的期望值为一个 JavaScript 表达式 (除了少数几个例外，即之后要讨论到的 v-for、v-on 和 v-slot)。

一个指令的任务是在其表达式的值变化时响应式地更新 DOM

<p v-if="seen">Now you see me</p>

<a v-bind:href="url"> ... </a>

<!-- 简写 -->
<a :href="url"> ... </a>

<a v-on:click="doSomething"> ... </a>

<!-- 简写 -->
<a @click="doSomething"> ... </a>

指令简写 v-bind ： v-on @

动态参数

同样在指令参数上也可以使用一个 JavaScript 表达式，需要包含在一对方括号内：

动态属性 v-bind:href 或者动态事件 v-on:focus

<!--
注意，参数表达式有一些约束，
参见下面“动态参数值的限制”与“动态参数语法的限制”章节的解释
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- 简写 -->
<a :[attributeName]="url"> ... </a>


<a v-on:[eventName]="doSomething"> ... </a>

<!-- 简写 -->
<a @[eventName]="doSomething">

动态参数值的限制

动态参数中表达式的值应当是一个字符串，或者是 null。特殊值 null 意为显式移除该绑定。其他非字符串的值会触发警告。

动态参数语法的限制

动态参数表达式因为某些字符的缘故有一些语法限制，比如空格和引号，在 HTML attribute 名称中都是不合法的。例如下面的示例：

<!-- 这会触发一个编译器警告 -->
<a :['foo' + bar]="value"> ... </a>

如果你需要传入一个复杂的动态参数，我们推荐使用计算属性替换复杂的表达式

当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时，我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写：

<a :[someAttr]="value"> ... </a>

修饰符 Modifiers

修饰符是以点开头的特殊后缀，表明指令需要以一些特殊的方式被绑定。例如 .prevent 修饰符会告知 v-on 指令对触发的事件调用 event.preventDefault()：

ue是什么？

Vue (读音 /vju?/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
创作者：尤雨溪
作用：动态构建用户界面。

VUE.JS的优点

1.编码简洁，体积小运行效率高，适合移动/PC端开发：压缩后33k
2.更高的运行效率：基于虚拟dom，一种可以预先通过javaScript进行各种计算，把最终dom操作计算出来并优化的技术，由于这个Dom操作预处理操作，并没有真实的操作DOM，所以叫做虚拟DOM。
3.双向数据绑定：让开发者不用再去操作dom对象，把更多的精力投入到业务逻辑上。
4.生态丰富、学习成本低
5.遵循MVVM模式
6.它本身只关注UI，可以轻松引入vue插件或其他第三方库开发项目

搭建Vue环境

安装Vue可以使用<script>标签引用，也可以使用CDN方法，感兴趣的童鞋可以去查阅。这里着重整理npm的安装方法，因为npm能很好地和Webpack等模块配合使用，在用Vue.js构建大型应用时推荐使用npm安装方法。

Vue运行环境的搭建需要具备的东西：

node.js环境：npm包管理器
cnpm：npm的淘宝镜像
vue-cli：脚手架构建工具

node.js 我们可以在官网下载，然后一路next安装就ok了，必要的话更改安装路径。安装完成后，可以在电脑上打开命令行工具（win+R），输入node -v命令，查看node的版本，如果出现相应的版本号，则说明安装成功了。

note：npm包管理器是集成在node中的，安装了node也就有了npm，输入npm -v命令，会显示npm的版本信息。

cnpm的安装
在命令行中输入npm install -g cnpm --registry=http://registry.npm.taobao.org ,等待其安装完毕。没有报错则表明安装成功。

vue-cli的安装
在命令行输入npm install -g vue-cli，等待安装完成。

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

1.普通页面，引入vue.js: <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>即可实现vue

MVVM
M: data，数据模型，数据对象 model
V: view视图展示，模板页面
VM: viewmode 视图模型（Vue的实例）（页面监听，数据绑定）

VUE扩展插件

1.vue-cli:vue 脚手架
2.vue-resource(axios):ajax请求
3.vue-roter:路由
4.vuex:状态管理
5.vue-lazyload:图片懒加载
6.vue-scroller:页面滑动相关
7.mint-ui:基于vue的UI组件库(移动端)
8.element-ui:基于vue的UI组件库(PC端)

目录解析

目录/文件	说明
build	项目构建(webpack)相关代码
config	配置目录，包括端口号等。我们初学可以使用默认的
node_modules	npm 加载的项目依赖模块
src	这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： - assets:放置一些图片，如logo等 - components:目录里面放了一个组件文件，可以不同 - App.vue:项目入口文件，我们也可以直接将组件写这里，而不使用components目录 - main.js:项目的核心文件
static	静态资源目录，如图片、文字等
test	初始测试目录，可删除
.xxxx文件	这些是一些配置文件，包括语法配置，git配置等
index.html	首页入口文件，你可以添加一些meta信息或统计代码啥的
package.json	项目配置文件
Readme.md	项目的说明文档，markdown格式

VUE内嵌指令

v-model: 数据绑定
data: 返回对象用 return
v-for: 循环格式 v-for=”字段名 in(of) 数组json”
v-show: 显示隐藏传递的值为布尔值 true false 默认为false
v-if: 显示与隐藏和v-show对比的区别就是是否删除dom节点默认值为false
v-else-if: 必须和v-if连用
v-else: 必须和v-if连用不能单独使用否则报错模板编译错误
v-bind: 动态绑定作用：及时对页面的数据进行更改
v-on: 绑定事件函数必须写在methods里面
@click: 快捷方法
v-text: 解析文本
v-html: 解析html标签
v-bind:class: 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三目型 ‘isred?”red”:”blue”‘ 3、数组型 ‘[{red:”isred”},{blue:”isblue”}]’
v-once: 进入页面时只渲染一次不再进行渲染
v-cloak: 防止闪烁
v-pre: 把标签内部的元素原位输出

用法

v-text

v-text主要用来更新textContent，等同于JS的text属性。
<span v-text="msg"></span>

这两者等价：
<span>{{msg}}</span>

v-html

双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令。它等同于JS的innerHtml属性。
<div v-html="Hello Baby！"></div>
这个div的内容将会替换成属性值Hello Baby！，直接作为HTML进行渲染。

v-pre

v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。
<div id="app">
    <span v-pre>{{msg}}</span>  //这条语句不进行编译
    <span>{{msg}}</span>
</div>
最终仅显示第二个span的内容

v-cloak

这个指令是防止闪现
<div id="app" v-cloak>
    <div>
        {{message}}
    </div>
</div>
<script type="text/javascript">
    new Vue({
      el:'#app',
      data:{
        message:'hello world'
      }
    })
</script>
在页面加载时会闪烁，先显示:
<div>
    {{message}}
</div>

然后才会编译为：
<div>
    hello world!
</div>

v-once

v-once关联的实例，只会渲染一次。之后的重新渲染，实例及其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能。
<span v-once>This will never change:{{msg}}</span>  //单个元素
<div v-once>//有子元素
    <h1>comment</h1>
    <p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component>  //组件
<ul>
    <li v-for="i in list">{{i}}</li>
</ul>
上面的例子中，msg,list即使产生改变，也不会重新渲染。

v-if

v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。
<a v-if="ok">yes</a>
如果属性值ok为true，则显示。否则，不会渲染这个元素。

v-else

v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。
<a v-if="ok">yes</a>
<a v-else>No</a>

v-else-if

v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。
<div v-if="type==='A'">
    A
</div>
<div v-if="type==='B'">
    B
</div>
<div v-if="type==='C'">
    C
</div>
<div v-else>
    Not A,B,C
</div>

v-show

<h1 v-show="ok">hello world</h1>

也是用于根据条件展示元素。和v-if不同的是，如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。

注意：v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好

v-for

用v-for指令根据遍历数组来进行渲染
有下面两种遍历形式
<div v-for="(item,index) in items"></div>   //使用in，index是一个可选参数，表示当前项的索引
<div v-for="item of items"></div>   //使用of

下面是一个例子，并且在v-for中，拥有对父作用域属性的完全访问权限。
<ul id="app">
    <li v-for="item in items">
        {{parent}}-{{item.text}}
    </li>
</ul>
<script type="text/javascript">
    var example=new Vue({
      el:'#app',
      data:{
        parent:'父作用域'
        items:[
          {text:'文本1'},
          {text:'文本2'}
        ]
      }
    })
</script>

会被渲染为：
<ul id="app">
    <li>父作用域-文本1</li>
    <li>父作用域-文本2</li>
</ul>
注意：当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中

v-bind

v-bind用来动态的绑定一个或者多个特性。没有参数时，可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。
简写为一个冒号【  ：】
<1>对象语法：
//进行类切换的例子
<div id="app">
    <!--当data里面定义的isActive等于true时，is-active这个类才会被添加起作用-->
    <!--当data里面定义的hasError等于true时，text-danger这个类才会被添加起作用-->
    <div :class="{'is-active':isActive, 'text-danger':hasError}"></div>
</div>
<script>
    var app=new Vue({
        el: '#app',
        data: {
            isActive: true,  
            hasError: false
        }
    })
</script>

渲染结果：
<!--因为hasError: false，所以text-danger不被渲染-->
<div class="is-active"></div>

<2>数组语法
<div id="app">
    <!--数组语法：errorClass在data对应的类一定会添加-->
    <!--is-active是对象语法，根据activeClass对应的取值决定是否添加-->
    <p :class="[{'is-active':activeClass},errorClass]">12345</p>
</div>
<script>
    var app=new Vue({
        el: '#app',
        data: {
            activeClass: false,
            errorClass: 'text-danger'
        }
    })
</script>

渲染结果：
<!--因为activeClass: false，所以is-active不被渲染-->
<p class="text-danger"></p>

<3>直接绑定数据对象
<div id="app">
    <!--在vue实例的data中定义了classObject对象，这个对象里面是所有类名及其真值-->
    <!--当里面的类的值是true时会被渲染-->
    <div :class="classObject">12345</div>
</div>
<script>
    var app=new Vue({
        el: '#app',
        data: {
            classObject:{
                'is-active': false,
                'text-danger':true
            }           
        }
    })
</script>

渲染结果：
<!--因为'is-active': false，所以is-active不被渲染-->
<div class="text-danger"></div>

v-model

这个指令用于在表单上创建双向数据绑定。
v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它选择Vue实例数据做为具体的值。
<div id="app">
    <input v-model="somebody">
    <p>hello {{somebody}}</p>
</div>
<script>
    var app=new Vue({
        el: '#app',
        data: {
            somebody:'小明'
        }
    })
</script>

这个例子中直接在浏览器input中输入别的名字，下面的p的内容会直接跟着变。这就是双向数据绑定。
v-model修饰符
<1>  .lazy
默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。
<input v-model.lazy="msg">

<2>  .number
自动将用户的输入值转化为数值类型
<input v-model.number="msg">

<3>  .trim
自动过滤用户输入的首尾空格
<input v-model.trim="msg">

v-on

v-on主要用来监听dom事件，以便执行一些代码块。表达式可以是一个方法名。
简写为：【  @  】
<div id="app">
    <button @click="consoleLog"></button>
</div>
<script>
    var app=new Vue({
        el: '#app',
        methods:{
            consoleLog:function (event) {
                console.log(1)
            }
        }
    })
</script>

事件修饰符


.stop  阻止事件继续传播

.prevent 事件不再重载页面

.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理

.self 只当在 event.target 是当前元素自身时触发处理函数

.once 事件将只会触发一次

.passive 告诉浏览器你不想阻止事件的默认行为

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

熟悉Vue模板

<template>//***************************************************************************html代码start
<div class="wrapper">
          此处编写你的页面元素
</div>
</template>//**************************************************************************html代码end
 
<script>//********************************************************************************js代码start
 
 
export default {
data(){
return {//存放当前组件变量的值
 
 
}
},
computed:{//计算属性：监控数据使用有变动，一旦有变动则自动触发
},
methods:{//存放页面操作方法
},
created(){//请求接口数据
}
}
</script>//*********************************************************************************js代码end
 
 
<style lang="scss" scoped>//*******************************************************css样式代码start
.wrapper{}
//编写样式
</style>//*********************************************************************************css样式代码end

npm run dev 打包运行
npm run build 打包
npm install -g server 使用静态服务器工具包
serve dist http://localhost:5000

发布使用动态的web服务器
修改配置webpack.prod.conf.js

output:{
    publicPath:'/xxx/'  //打包文件的名称
}

重新打包
npm run build
修改dist文件夹为项目名称:xxx
将xxx拷贝到运行的tomcat的webapps目录下
访问:http://localhost:8080/xxx

config 文件中
port :设置端口号
autoOpenBrower: false\true 是否自动打开浏览器

组件间通信 SLOT

此方式用于组件向子组件传递”标签数据”

使用localStorage存储数据的工具模块
函数
对象
需要向外面暴露七个功能还是多个功能

Vue项目中常用的2个ajax库
vue-resource:vue插件，非官方库，vue1.x使用广泛
npm install vue-resource --save
axios:通用的ajax请求库，官方推荐，vue2.x使用广泛
npm install axios --save

欢迎大家提议、分享、交流、共同学习进步

在线咨询

上一篇：「IT技术」网站变成灰色，是如何进行实现的
下一篇：Jmeter 接口请求中替换参数中的换行符

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商