[TOC]

概念


在 Vue 中，有许多方法和 Angular 相似，这主要是因为 Angular 是 Vue 早期开发的灵感来源。然而，Augular 中存在许多问题，在 Vue 中已经得到解决。Vue基本都是指令(重点)和语法,用这些指令编写一些功能.

目的就是简化代码开发,都是分层的,类似后台的MVC思想.在企业里面用的比较多,比Angularjs用的多,为什么企业用的多,因为是渐进式框架.

渐进式框架
指的是你不同的项目假设项目做完了,你想扩展功能,直接用vue加上去就行了.不会影响原有的框架
比如:
如果别的项目,比如EasyUI项目,页面改版后期项目换Angularjs的话,你就得全都换框架(因为你angularjsJS的插件一加上,EasyUI插件就不能用了,受冲突)
而vue框架兼容别的框架,不影响别的框架,原有的框架正常用,不会受到影响

angularjs如果一升级,语法都会改变,老版本的部分语法在新版本上就不能使用,很让人头痛.不向下兼容,而vue框架是向下兼容的.

vue是MVVM模式(其实就是MVC模式)
本质就是MVC的改进版(主要目的就是分离视图和模型)
VueJs[笔记] - 图1
vue是双向数据绑定,既能取值还能赋值
view
其实就是一片html代码配合上json,在new 一个vue实例

（一）使用

（1）安装cnpm

随便打开一个cmd输入下面命令
npm install -g cnpm —registry=https://registry.npm.taobao.org

查看 cnpm是否安装成功:
cnpm -v

VueJs[笔记] - 图2
出现这个表示成功了.

2．搭建开发环境



1、必须要安装nodejs(注意,不要安装到C盘,不然可能会出现权限问题,建议安装到D盘)
安装完了cmd到 B:\nodejs (nodejs安装目录下)文件夹输入
node -v 查看
VueJs[笔记] - 图3

说明安装成功, 需要注意的是,低版本可能会有问题,建议vue下载10版本的.


2、搭建vue的开发环境 ，安装vue的脚手架工具 官方命令行工具
npm install —global vue-cli 或者是 cnpm install —global vue-cli （此命令只需要执行一次）

3、另一种创建项目的方式（推荐） *
目录结构相对于简单一些,不会给你一些提示 这么多东西,比如语法检查等等.
先cmd到你的vue的工作空间,输入如下命令
vue init webpack-simple vuedemo02
开始创建项目,创建完了,下面开始依次输入命令运行项目

cd vuedemo02

cnpm install / npm install (两个命令选一个运行)

npm run dev

看到下面的说明运行成功:

VueJs[笔记] - 图4

4、创建项目方式二(建议用上面的方法) 必须cd到对应的一个项目里面

vue init webpack vue-demo01

cd vue-demo01

cnpm install / npm install 如果创建项目的时候没有报错，这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install

npm run dev

重点是ESLint这里得选No.

VueJs[笔记] - 图5

3．webstorm启动vue项目

https://blog.csdn.net/qq_41489540/article/details/86764061

4．路径跳转

| <div id=”app”><a v-bind:href=”url”>访问指定站点2</a><br> <a :href=”url”>访问指定站点2</a><br></div> <script type=”text/javascript”> new Vue({
el: ‘#app’,
data: {
content: ‘NBA I Love This Game’,
url: ‘http://www.atguigu.com‘
},
methods: {
test () {
alert(‘好啊!!!’)
}
}
})
</script> | | —- |



扩展插件介绍



vue-cli: vue脚手架
vue-resource(axios): ajax请求
vue-router: 路由
vuex: 状态管理
vue-lazyload: 图片懒加载
vue-scroller: 页面滑动相关
mint-ui: 基于vue的组件库(移动端)
element-ui: 基于vue的组件库(PC端)

计算属性和监听机制

computed
调用时机是,初始化显示或者是相隔的data属性数据发生改变的时候,主要作用是,计算或者处理并返回当前属性的值.

包含多个方法的对象
get()方法是当需要读取当前属性值时候进行回调,根据相关的数据计算并返回当前属性的值.

set()当属性值发生改变(我在输入框输入这个数据.这个也算是属性值发生改变了)时回调,可以在这个方法更新相关的属性数据,set()函数的值是就是最新获取的数据



利用set/get方法来实现属性数据的计算读取, 同时监视属性数据的变化
如何给对象定义get/set属性
在创建对象时指定: get name () {return xxx} / set name (value) {}
对象创建之后指定: Object.defineProperty(obj, age, {get(){}, set(value){}})


watch

包含多个属性监视的对象
分为一般监视和深度监视
xxx: function(value){}
xxx : {
deep : true,
handler : fun(value)
}
另一种添加监视方式: vm.$watch(‘xxx’, function(value){})

| <body> <!—

  1. 计算属性
    在computed属性对象中定义计算属性的方法
    在页面中使用{{方法名}}来显示计算的结果
  2. 监视属性:
    通过通过vm对象的$watch()或watch配置来监视指定的属性
    当属性变化时, 回调函数自动调用, 在函数内部进行计算

  3. 计算属性高级:
    通过getter/setter实现对属性数据的显示和监视
    计算属性存在缓存, 多次读取只执行一次getter计算
    —>
    <div id=”demo”> 姓: <input type=”text” placeholder=”First Name” v-model=”firstName”><br> 名: <input type=”text” placeholder=”Last Name” v-model=”lastName”><br>
    姓名1(单向): <input type=”text” placeholder=”Full Name1” v-model=”fullName1”><br> 姓名2(单向): <input type=”text” placeholder=”Full Name2” v-model=”fullName2”><br> 姓名3(双向): <input type=”text” placeholder=”Full Name3” v-model=”fullName3”><br>
    <p>{{fullName1}}</p> <p>{{fullName1}}</p> </div>
    <script type=”text/javascript” src=”../js/vue.js”></script> <script type=”text/javascript”> const vm = new Vue({

     **el**: **'#demo'**,<br />
 **data**: {<br />
     **firstName**: **'A'**,<br />
     **lastName**: **'B'**,<br />
     **fullName2**: **'A-B'<br />
 **},<br />



     // 计算属性配置: 值为对象<br />
 **computed**: {<br />



         fullName1() { // 属性的get()<br />
         **_console_**.log(**'fullName1()'**, **this**)<br />
         // 这个是单向绑定的<br />
         **return this**.**firstName **+ **'-' **+ **this**.**lastName<br />
     **},<br />



         **fullName3**: {<br />
         // 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值<br />
         get() {<br />
             **_console_**.log(**'fullName3 get()'**)<br />
             **return this**.**firstName **+ **'-' **+ **this**.**lastName<br />
         **},<br />
         // 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值<br />
         set(value) {// fullName3的最新value值  A-B23<br />
             **_console_**.log(**'fullName3 set()'**, value)<br />
             // 更新firstName和lastName<br />
             **const **names = value.split(**'-'**)<br />
             **this**.**firstName **= names[0]<br />
             **this**.**lastName **= names[1]<br />
         }<br />
     }<br />
 },<br />



     //监视语法 ,配置监视 ,  watch 也是单向的.<br />
 **watch**: {<br />
    // 配置监视firstName的值如果值发生变化这里就会出现反反应<br />
     firstName: **function **(value) { // 相当于属性的set<br />
         **_console_**.log(**'watch firstName'**, value)<br />
         // 更新fullName2<br />
         **this**.**fullName2 **= value + **'-' **+ **this**.**lastName<br />
     **}<br />
 }<br />

    })


    // 监视lastName
    vm.$watch(‘lastName’, function (value) {

     **_console_**.log(**'$watch lastName'**, value)<br />
 // 更新fullName2<br />
 **this**.**fullName2 **= **this**.**firstName **+ **'-' **+ value<br />

    })

    </script> </body> | | —- |





    路由

    （一）概念

（二）使用

1．vue路由配置

1.安装
npm install vue-router —save / cnpm install vue-router —save

2、引入并 Vue.use(VueRouter) (在main.js里面引入)

import VueRouter from ‘vue-router’
Vue.use(VueRouter)

3、配置路由

1、创建组件 引入组件
2、定义路由 （建议复制s）

const routes = [
{ path: ‘/foo’, component: Foo },
{ path: ‘/bar’, component: Bar },
{ path: ‘‘, redirect: ‘/home’ } /默认跳转路由*/
]

4、实例化VueRouter

const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})

5、挂载

new Vue({
el: ‘#app’,
router，
render: h => h(App)
})

6 、根组件的模板里面放上这句话


7、路由跳转
Go to Foo
Go to Bar

（三）钩子函数

1．全局钩子


主要包括beforeEach和aftrEach,

beforeEach函数有三个参数：

to:router即将进入的路由对象

from:当前导航即将离开的路由

next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。

afterEach函数不用传next()函数

这类钩子主要作用于全局,一般用来判断权限,以及以及页面丢失时候需要执行的操作,例如:

//使用钩子函数对路由进行权限跳转

VueJs[笔记] - 图6

2．单个路由里面的钩子


主要用于写某个指定路由跳转时需要执行的逻辑

{
path: ‘/dashboard’,
component: resolve => require([‘../components/page/Dashboard.vue’], resolve),
meta: { title: ‘系统首页’ },
beforeEnter: (to, from, next) => {

},
beforeLeave: (to, from, next) => {

}

},

3．组件路由


主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,这几个钩子都是写在组件里面也可以传三个参数(to,from,next),作用与前面类似.

beforeRouteEnter(to, from, next) {
next(vm => {
if (
vm.$route.meta.hasOwnProperty(‘auth_key’) &&
vm.$route.meta.auth_key != ‘’
) {
if (!vm.hasPermission(vm.$route.meta.auth_key)) {
vm.$router.replace(‘/admin/noPermission’)
}
}
})
},

（四）跳转本页面.

比如说执行修改操作,修改完了关闭模态框之后,需要刷新本页面显示最新的数据

res.$router.go(0); 是这个函数

method(index, row) {
var res = this;
var taskId = row.ID;
this.$axios({
url: “/api/askForLeave/ratify/“ + taskId,
method: “get”,
}).then(function (response) {
if (response.data.code == 200) {
alert(“批准成功”);
// 跳转到本页面
res.$router.go(0);
} }) },



（五）跳转到别的页面

| getData() {
var res = this;
this.$axios({
url: “/api/waterMaintainpayrule/findAll”,
method: “get”,
data: {},
})
.then(function (response) {
// 省略….
})
.catch(function (error) {

if (error.response.data.status === 500) {
alert(error.response.data.message);
res.$router.push(‘/Login’); //页面跳转,
}
});
}, | | —- |



（六）在js里面使用router


https://www.yuque.com/docs/share/6584ce11-52f6-4968-9f75-b09334c82c82?#



组件

概念
组件是提高代码复用性的,让代码可复用.
VueJs[笔记] - 图7
比如项目很多地方公用这个输入框等等,如果没有组件你就需要每个都复制粘贴一下,如果有了就可以复用了.
使用
<template>

<div id=”app”>

<**v-home**></**v-home**>


<**hr**>

<**br**>

<**v-news**></**v-news**>

</div>
</template>

<script>

/*

1、引入组件
2、挂载组件
3、在模板中使用
*/
//引入组件

import Home from ‘./components/Home.vue’;

import News from ‘./components/News.vue’;

export default {

data() {

  **return **{<br />

    **msg**: **'你好vue'<br />**<br />      }

},<br />    //注册主键(v-home是用这个组件的名字)

**components**: {   /*前面的组件名称不能和html标签一样*/

  **'v-home'**: Home,

  **'v-news'**: News

}<br />  }<br /></**script**>

<style lang=”scss”>

</style>



v-for循环遍历

（1）循环数组

<script>
window.onload=function(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{

                **arr**:[**'apple'**,**'banana'**,**'orange'**,**'pear'**],

                **json**:{**a**:**'apple'**,**b**:**'banana'**,**c**:**'orange'**}

            }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <**ul**><br />            <**li v-for="value in arr"**> <!--循环遍历, arr就是data里面定义的数组-->

            {{value}}

        </**li**><br />        </**ul**><br />    </**div**><br /></**body**><br />![](https://cdn.nlark.com/yuque/0/2020/jpeg/350923/1592468109215-a94e6ece-2a6e-4eaa-b0f1-d8321dbdfc87.jpeg#height=120&width=117)<br />v-for也支持索引{{$index}}<br />   <**li v-for="value in arr"**><br />           {{value}}   {{$index}}

   </**li**><br />输出结果:<br />索引是从0开始计算的.<br />![](https://cdn.nlark.com/yuque/0/2020/jpeg/350923/1592468109378-f8d6c13c-67e0-4800-9985-ff992fc2d2b4.jpeg#height=90&width=99)

（2）循环json


<script>
window.onload=function(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{

                **arr**:[**'apple'**,**'banana'**,**'orange'**,**'pear'**],

                **json**:{**a**:**'apple'**,**b**:**'banana'**,**c**:**'orange'**}  /*json*/

            }

        });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**>

<!-- 循环json， 固定的写法<br />     {{$index}}   循环json的索引<br />     {{$key}}  循环json的key

--><br />        <**ul**><br />            <**li v-for="value in json"**><br />                {{value}}   {{$index}}  {{$key}}<br />            </**li**><br />        </**ul**>

    <**hr**>         <!-- 水平线 -->

    <!-- 循环json的另外一种写<br />         {{k}} 就是key

     {{v}} 就是value

    法-->

    <**ul**><br />            <**li v-for="(k,v) in json"**><br />                {{k}}   {{v}}   {{$index}}  {{$key}}<br />            </**li**><br />        </**ul**><br />    </**div**><br /></**body**><br />输出结果<br />![](https://cdn.nlark.com/yuque/0/2020/jpeg/350923/1592468109553-60500139-8d29-46db-93ee-905eb5e40da9.jpeg#height=178&width=176)<br /> <br />

（3）未归类的循环






  • {{v}}




  • {{v+” “+i}}




  • {{p}}




  • {{i+” “+p}}















编号 姓名 年龄
{{p.id}} {{p.name}} {{p.age}}






# 属性 ### 1．属性入门以及加图片 绑定属性都用 v-bind

v-bind:src=”” width/height/title…. 简写: <img :src=”url” alt=””> 把 v-bind胜率了 :src=”” 推荐 VueJs[笔记] - 图8 效果能出来，但是会报一个404错误 VueJs[笔记] - 图9 效果可以出来，不会发404请求

<script>
window.onload=function(){ new Vue({ el:‘#box’, data:{ url:‘https://www.baidu.com/img/bd_logo1.png‘

}, methods:{ }
});
};
</script>
</head>
<body>
<div id=”box”> 
    <!--V-bind 绑定属性的,注意不需要加{{}} -->

    <**img v-bind:src="url" alt=""**><br />    </**div**><br /></**body**><br /> <br /> <**script**><br />        **window**.onload=**function**(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{

                **url**:**'https://www.baidu.com/img/bd_logo1.png'**,

                **w**:**'200px'**,

                **t**:**'这是一张美丽的图片'<br />**<br />                },

            **methods**:{

            }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />         <!--也可以写高度和宽度, w  和 t 是从data获取的数据-->

    <**img :src="url" alt="" :width="w" :title="t"**><br />    </**div**>

2．class样式

:class=”” v-bind:class=””

:style=”” v-bind:style=””

:class=”[red]” red是数据(在data里面的数据)

:class=”[red,b,c,d]”

:class=”{red:a, blue:false}”

:class=”json”

data:{
json:{red:a, blue:false}
}

单个数据
<style>
.red{

        **color**: **red**;

    }<br />        .**blue**{

        **background**: **blue**;

    }<br />    </**style**><br />    <**script src="vue.js"**></**script**><br />    <**script**><br />        **window**.onload=**function**(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{

                **red**:**'red'<br />**<br />                },

            **methods**:{

            }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <!--给文字加样式 红色样式-->

    <**strong :class="[red]"**>文字...</**strong**><br />    </**div**><br /></**body**><br /> <br />效果, 文字变成红色的了.<br />多个数据<br /> <**style**><br />        .**red**{

        **color**: **red**;

    }<br />        .**blue**{

        **background**: **blue**;

    }<br />    </**style**><br />    <**script src="vue.js"**></**script**><br />    <**script**><br />        **window**.onload=**function**(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{

                **red**:**'red'**,

                **b**:**'blue'<br />**<br />                },

            **methods**:{

            }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <**strong :class="[red,b]"**>文字...</**strong**><br />    </**div**><br /></**body**><br />或者接收json格式的<br /> <**style**><br />        .**red**{

        **color**: **red**;

    }<br />        .**blue**{

        **background**: **blue**;

    }<br />    </**style**><br />    <**script src="vue.js"**></**script**><br />    <**script**><br />        **window**.onload=**function**(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{

                **a**:**true**,

                **b**:**false<br />**<br />                },

            **methods**:{

            }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <!--给后面变为true就管用,如果false就不生效-->

    <**strong :class="{red:a,blue:b}"**>文字...</**strong**><br />    </**div**><br /></**body**><br /> <br />或者json放data里面<br />就是把json放在了data里面了<br />  <**style**><br />        .**red**{

        **color**: **red**;

    }<br />        .**blue**{

        **background**: **blue**;

    }<br />    </**style**><br />    <**script src="vue.js"**></**script**><br />    <**script**><br />        **window**.onload=**function**(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{

                **json**:{

                    **red**:**true**,

                    **blue**:**true<br />**<br />                    }

            },<br />                **methods**:{

            }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <**strong :class="json"**>文字...</**strong**><br />    </**div**><br /></**body**>

3．Style

放的json格式的
<style>
.red{

        **color**: **red**;

    }<br />        .**blue**{

        **background**: **blue**;

    }<br />    </**style**><br />    <**script src="vue.js"**></**script**><br />    <**script**><br />        **window**.onload=**function**(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{<br />

            },<br />                **methods**:{

            }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <**strong :style="{color:'red'}"**>文字...</**strong**><br />    </**div**><br /></**body**><br />效果:<br />![](https://cdn.nlark.com/yuque/0/2020/jpeg/350923/1592468109786-7d4c018d-c2fc-4039-af8e-1ffb7b1fdc47.jpeg#height=136&width=218)<br />写法2<br />注意data必须是json的<br />  <**style**><br />        .**red**{

        **color**: **red**;

    }<br />        .**blue**{

        **background**: **blue**;

    }<br />    </**style**><br />    <**script src="vue.js"**></**script**><br />    <**script**><br />        **window**.onload=**function**(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{

                **c**:{**color**:**'red'**}

            },<br />                **methods**:{

            }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <**strong :style="[c]"**>文字...</**strong**><br />    </**div**><br /></**body**><br />多参数<br />   <**style**><br />        .**red**{

        **color**: **red**;

    }<br />        .**blue**{

        **background**: **blue**;

    }<br />    </**style**><br />    <**script src="vue.js"**></**script**><br />    <**script**><br />        **window**.onload=**function**(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{

                **c**:{**color**:**'red'**},

                **b**:{**backgroundColor**:**'blue'**} /*注意复合样式一定要是驼峰命名*/

            },<br />                **methods**:{

            }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <**strong :style="[c,b]"**>文字...</**strong**><br />    </**div**><br /></**body**><br /> <br />![](https://cdn.nlark.com/yuque/0/2020/jpeg/350923/1592468109980-8ef3dd2d-95cc-44ed-9e91-cb1a59187cd5.jpeg#height=100&width=82)<br /> <br />方式三纯json<br /> <**style**><br />        .**red**{

        **color**: **red**;

    }<br />        .**blue**{

        **background**: **blue**;

    }<br />    </**style**><br />    <**script src="vue.js"**></**script**><br />    <**script**><br />        **window**.onload=**function**(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{

                **a**:{

                    **color**:**'red'**,

                    **backgroundColor**:**'gray'<br />**<br />                    }

            },<br />                **methods**:{

            }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <**strong :style="a"**>文字...</**strong**><br />    </**div**><br /></**body**><br /> <br />![](https://cdn.nlark.com/yuque/0/2020/jpeg/350923/1592468110088-6d79dc6c-4bdf-4fad-a1ad-f5c4f6931126.jpeg#height=86&width=139)<br /> <br />

4．class和style绑定

| <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8”> <title>04_class与style绑定</title> <style> .classA {
color: red;
}

.classB {
background: blue;
}

.classC {
font-size: 20px;
}
</style> </head> <body>
<!—

  1. 理解
    在应用界面中, 某个(些)元素的样式是变化的 class/style绑定就是专门用来实现动态样式效果的技术
  2. class绑定: :class=’xxx’
    xxx是字符串 xxx是对象 xxx是数组

  3. style绑定 :style=”{ color: activeColor, fontSize: fontSize + ‘px’ }”
    其中activeColor/fontSize是data属性
    —>

    <div id=”demo”> <h2>1. class绑定: :class=’xxx’</h2> <p :class=”myClass”>xxx是字符串</p> <p :class=”{classA: hasClassA, classB: hasClassB}”>xxx是对象</p> <p :class=”[‘classA’, ‘classB’]”>xxx是数组</p>
    <h2>2. style绑定</h2> <p :style=”{color:activeColor, fontSize}”>:style=”{ color: activeColor, fontSize: fontSize + ‘px’ }”</p>
    <button @click=”update”>更新</button>
    </div>
    <script type=”text/javascript” src=”../js/vue.js”></script> <script type=”text/javascript”> new Vue({

     **el**: **'#demo'**,<br />
 **data**: {<br />
     **myClass**: **'classA'**,<br />
     **hasClassA**: **true**,<br />
     **hasClassB**: **false**,<br />
     **activeColor**: **'red'**,<br />
     **fontSize**: **'20px'<br />
 **},<br />



     **methods**: {<br />
     update() {<br />
         **this**.**myClass **= **'classB'<br />
         this**.**hasClassA **= !**this**.**hasClassA<br />
         this**.**hasClassB **= !**this**.**hasClassB<br />
         this**.**activeColor **= **'yellow'<br />
         this**.**fontSize **= **'30px'<br />
     **}<br />
 }<br />

    })
    </script> </body> </html> | | —- |



    事件

    （一）基本事件

    1．页面加载事件

    created()相当于页面加载事件
    在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

    // 相当于页面加载事件

created() {

this.fetchData()

},
methods: {

fetchData() {

**this**.**listLoading **= **true<br />**<br />    getList(**this**.listQuery).then(response => {

  **this**.**list **= response.**data**.**items<br />**<br />      **this**.**listLoading **= **false<br />**<br />    })

}
}

2．点击事件

<div id=”app”>
<button v-on:click=”run1()“>执行方法的第一种写法</button>
<button @click=”run2()“>执行方法的第二种写法</button>
</div>

（1）基础入门

<script>
export default { 

  data () { 

    **return **{

      **msg**: **'你好vue'**,

      **list**:[]      

    }<br />      },<br />      **methods**:{<br />

    run1:**function**(){

      _alert_(**'这是一个方法'**);

    },<br />        run2(){

      _alert_(**'这是另一个方法'**);

    } <br />      }<br />    }<br /></**script**>

3．键盘按下事件v-on:keydown










4．鼠标移入事件v-on:mouseover












5．键盘类的事件

（1）按下键盘触发事件


常用键:

回车

  a). @keyup.13

  b). @keyup.enter<br />   上、下、左、右:

  @keyup/keydown.left   <br />      @keyup/keydown.right<br />      @keyup/keydown.up<br />      @keyup/keydown.down<br />   .....还有很多比如delete什么的,<br /> <br /> <br /> <br />效果是随便按下键盘就触发 show函数 alert 1<br />   <**script**><br />        **window**.onload=**function**(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{<br />

            },<br />                **methods**:{

                show:**function**(){

                    alert(1);

                }<br />                }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <!--键盘事件-->

    <**input type="text" @keydown="show"**><br />    </**div**><br /></**body**><br />键盘抬起事件@keyup<br />也可以做点小的业务逻辑判断,比如当用户按下回车的时候,就进行alert弹出提示,也可以做其它的提示,<br /><**script**><br />        **window**.onload=**function**(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{<br />

            },<br />                **methods**:{

                show:**function**(ev){

                    **if**(ev.**keyCode**==13){ /*回车的键盘码是13*/

                        alert(**'您按回车了'**);

                    }<br />                    }<br />                }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <**input type="text" @keyup="show($event)"**><br />    </**div**><br /></**body**><br />或者这样玩<br />  <**script**><br />        **window**.onload=**function**(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{<br />

            },<br />                **methods**:{

                show:**function**(){

                    alert(**'您按回车了'**);

                }<br />                }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <!--也可以这么玩.   13是回车的键盘码,当用户按得回车就进行alert弹出输出-->

    <**input type="text" @keyup.13="show()"**><br />    </**div**><br /></**body**><br />或者下面方式也是按下回车就会触发事件<br /><**input type="text" @keyup.enter="show()"**><br /> <br /><!--或者这个是按下left左边  也可以.后面跟down 跟up都行 就是方向键,-->

<input type=”text” @keyup.left=”show()”>


（2）获取按下的键位的键盘码值

得到的是数字对象

<script>
window.onload=function(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{<br />

            },<br />                **methods**:{

                show:**function**(ev){

                    alert(ev.**keyCode**);

                }<br />                }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <**input type="text" @keydown="show($event)"**><br />    </**div**><br /></**body**><br />

（二）事件深入

1．事件简写

v-on:click 等于 @click

2．事件冒泡

什么是事件冒泡
VueJs[笔记] - 图10
说白了就是点击触发最里面的函数,只是触发一个函数,却连带触发包裹它的别的标签的事件
阻止冒泡办法1(推荐,办法2比这个复杂)
XXX事件.stop 比如 @click.stop
<script>
window.onload=function(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{<br />

            },<br />                **methods**:{

                show:**function**(){

                    alert(1);

                },<br />                    show2:**function**(){

                    alert(2);

                }<br />                }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <**div @click="show2()"**><br />            <**input type="button" value="按钮" @click.stop="show()"**><br />        </**div**><br />    </**div**><br /></**body**><br /> <br /> <br /> <br />阻止冒泡办法2<br />需要事件对象<br />  <**script**><br />        **window**.onload=**function**(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{

            },<br />                **methods**:{

                show:**function**(ev){

                    alert(1);

                    ev.**cancelBubble**=**true**; /*阻止事件冒泡*/

                },

                show2:**function**(){

                    alert(2);

                }<br />                }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <**div @click="show2()"**><br />            <!--阻止冒泡,需要事件对象-->

        <**input type="button" value="按钮" @click="show($event)"**><br />        </**div**><br />    </**div**><br /></**body**>

3．阻止系统的默认行为

简化方式(建议)
xxx事件.prevent

<script>
window.onload=function(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{<br />

            },<br />                **methods**:{

                show:**function**(){

                    alert(1);

                }<br />                }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <**input type="button" value="按钮" @contextmenu.prevent="show()"**><br />    </**div**><br /></**body**><br /> <br /> <br />原生方式<br /> <**script**><br />        **window**.onload=**function**(){

        **new Vue**({

            **el**:**'#box'**,

            **data**:{<br />

            },<br />                **methods**:{

                show:**function**(ev){

                    alert(1);

                    ev.preventDefault();  /*阻止系统自带的右键浏览器出现菜单*/

                }

            }<br />            });<br />        };<br />    </**script**><br /></**head**><br /><**body**><br />    <**div id="box"**><br />        <!--contextmenu 触发右键菜单

     -->

    <**input type="button" value="按钮" @contextmenu="show($event)"**><br />    </**div**><br /></**body**><br /> <br /> <br />

拦截器

（一）在请求之前添加内容


参考:
https://www.cnblogs.com/zhoubingyan/p/8623509.html

1. 安装axios
2. 在vue项目的根目录下config目录下新建文件axios.js,如果没有config目录就新建个axios

| import _axios _from ‘axios’

// 配置默认的host,假如你的API host是：http://api.htmlx.club
//axios.defaults.baseURL = ‘http://api.htmlx.club‘
//建议直接写/ ,不然会找不到路径的
axios.defaults.baseURL = ‘/‘
// 添加请求拦截器
axios.interceptors.request.use(function (config) {

//全局拦截器
alert(localStorage.getItem(“token”));

axios.defaults.headers.common[‘token’] = localStorage.getItem(“token”);
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
}); | | —- |


3. 在main.js中进行引入,并配置别名来进行调用

| import _axios _from ‘axios’;
import ‘../config/axios’
Vue.prototype.$axios = axios; | | —- |



然后别的项目正常使用axios就可以了,然后你就会发现每访问接口之前都会执行一些业务逻辑




条件渲染指令v-if,v-else,v-show

v-if v-else 和 v-show隐藏的方式不一样,v-if v-else 组合的时候隐藏是把标签给移除的,v-show是通过样式来进行隐藏的,内存中的对象是还存在的. 两者区别意义:
1.假如说有个按钮可能反复点击,那么用v-show比较好,因为v-show只是不显示内容,但是对象在内存中还是存在的.而v-if是先移除对象然后再创建对象的,这样比较消耗时间的.
但是其实这两种差别是没那么大的.除非说是特别大的标签显示隐藏的话,那么就用v-show更好

| <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8”> <title>08_条件渲染</title> </head> <body> <!—

  1. 条件渲染指令 v-if
    v-else
    v-show

  2. 比较v-if与v-show
    如果需要频繁切换 v-show 较好
    —>

    <div id=”demo”> <p v-if=”ok”>表白成功</p> <p v-else>表白失败</p>
    <hr> <p v-show=”ok”>求婚成功</p> <p v-show=”!ok”>求婚失败</p>

    <button @click=”ok=!ok”>切换</button> </div>
    <script type=”text/javascript” src=”../js/vue.js”></script> <script type=”text/javascript”> new Vue({
    el: ‘#demo’,
    data: {
    ok: true,
    }
    })
    </script> </body> </html> | | —- |










    axios

    1．使用axios

    1.安装: 控制台输入命令
    cnpm install axios —save
    2. 哪个页面引用就哪个页面引入
    在script标签里面引入

    import axios from ‘axios’

    2．发送get请求


    methods: {

    getData() {

    var api = ‘http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1‘;

    Axios.get(api).then((response) => {

    this.list = response.data.result;

    }).catch((error) => {

    console.log(error);

    })
    }
    },

    3．指定baseurl

    在main.js配置文件里面插入:

    import axios from ‘axios’

    axios.defaults.baseURL = “http://localhost:8080/“;

Vue.prototype.$http = axios


4．取值

VueJs[笔记] - 图11









（二）模态框

1．饿了么dialog

如果没有安装需要
npm i element-ui -S
安装饿了么库
http://element-cn.eleme.io/#/zh-CN/component/dialog

Cookie、LocalStorage 与 SessionStorage

Cookie

Cookie 是小甜饼的意思。顾名思义，cookie 确实非常小，它的大小限制为4KB左右。它的主要用途有保存登录信息，比如你登录某个网站市场可以看到“记住密码”，这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。

localStorage

localStorage 是 HTML5 标准中新加入的技术，它并不是什么划时代的新东西。早在 IE 6 时代，就有一个叫 userData 的东西用于本地存储，而当时考虑到浏览器兼容性，更通用的方案是使用 Flash。而如今，localStorage 被大多数浏览器所支持，如果你的网站需要支持 IE6+，那以 userData 作为你的 polyfill 的方案是种不错的选择。

sessionStorage

sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。做过后端开发的同学应该知道 Session 这个词的意思，直译过来是“会话”。而 sessionStorage 是一个前端的概念，它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

特性 Cookie localStorage sessionStorage
数据的生命期 一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效 除非被清除，否则永久保存 仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小 4K左右 一般为5MB
与服务器端通信 每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题 仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性 需要程序员自己封装，源生的Cookie接口不友好 源生接口可以接受，亦可再次封装来对Object和Array有更好的支持


应用场景

因为考虑到每个 HTTP 请求都会带着 Cookie 的信息，所以 Cookie很精简，比较常用的一个应用场景就是判断用户是否登录。针对登录过的用户，服务器端会在他登录时往 Cookie 中插入一段加密过的唯一辨识单一用户的辨识码，下次只要读取这个值就可以判断当前用户是否登录啦。

曾经还使用 Cookie 来保存用户在电商网站的购物车信息，如今有了 localStorage，cookie也不怎么用了

而另一方面 localStorage 接替了 Cookie 管理购物车的工作，同时也能胜任其他一些工作。比如HTML5游戏通常会产生一些本地数据，localStorage 也是非常适用的。如果遇到一些内容特别多的表单，为了优化用户体验，我们可能要把表单页面拆分成多个子页面，然后按步骤引导用户填写。这时候 sessionStorage 的作用就发挥出来了。


localStorage和sessionStorage操作localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等
localStorage和sessionStorage的方法setItem存储value
用途：将value存储到key字段

sessionStorage.setItem(“key”, “value”); localStorage.setItem(“site”, “js8.in”);getItem获取value

用途：获取指定key本地存储的值
var value = sessionStorage.getItem(“key”); var site = localStorage.getItem(“site”);removeItem删除key

用途：删除指定key本地存储的值
sessionStorage.removeItem(“key”); localStorage.removeItem(“site”);clear清除所有的key/value

用途：清除所有的key/value
sessionStorage.clear(); localStorage.clear();其他操作方法：点操作和[ ]

web Storage不但可以用自身的setItem,getItem等方便存取，也可以像普通对象一样用点(.)操作符，及[]的方式进行数据存储，像如下的代码：

var storage = window.localStorage; storage.key1 = “hello”; storage[“key2”] = “world”; console.log(storage.key1); console.log(storage[“key2”]);localStorage和sessionStorage的key和length属性实现遍历
sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历，例如下面的代码：


var storage = window.localStorage;for(var i=0, len=storage.length; i var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + “=” + value); }

解析JWT


1.在项目路径下cmd安装:

npm install jwt-decode —save
2. 在需要使用的页面上引入

import jwtDecode from ‘jwt-decode’

| //token是后端传过来的jwt的值
var token = localStorage.getItem(“jwtToken”);
const decode = jwtDecode(token);
alert(decode.sub)//这个是获取jwt里面的sub值
//这个是转成json格式的字符串
var data = JSON.stringify(decode);
// alert(data)//这个就能看到jwt里面后端封装的信息了 | | —- |




参考:
https://blog.csdn.net/weixin_42398560/article/details/88794882





配置

（一）修改端口

找到项目 config文件夹下的index.js文件
VueJs[笔记] - 图12
如果不是这个,还有另外一种方式:
在 vue.config.js 文件添加

module.exports = { devServer: { port: 8888, // 端口 }, lintOnSave: false // 取消 eslint 验证};


然后重启项目就行了

const,var,let

1.const定义的变量不可以修改，而且必须初始化。

const b = 2;//正确// const b;//错误，必须初始化
console.log(‘函数外const定义b：’ + b);//有输出值// b = 5;
// console.log(‘函数外修改const定义b：’ + b);//无法输出

2.var定义的变量可以修改，如果不初始化会输出undefined，不会报错。

var a = 1;
// var a;//不会报错
console.log(‘函数外var定义a：’ + a);//可以输出a=1
function change(){
a = 4;
console.log(‘函数内var定义a：’ + a);//可以输出a=4
}
change();
console.log(‘函数调用后var定义a为函数内部修改值：’ + a);//可以输出a=4

3. let是块级作用域，函数内部使用let定义后，对函数外部无影响。

let c = 3;
console.log(‘函数外let定义c：’ + c);//输出c=3
function change(){
let c = 6;
console.log(‘函数内let定义c：’ + c);//输出c=6
}
change();
console.log(‘函数调用后let定义c不受函数内部定义影响：’ + c);//输出c=3


ElementUI

（一）validator表单校验(ElementUI)


使用方式参考:
https://segmentfault.com/a/1190000019523696

required为是否必填，message为失去焦点后的提示内容，trigger为触发验证的事件类型，validator为验证表单的方法

（二）:formatter处理取出的数据

作用：对从数据库中取出的数据进行处理后展示

参考:https://www.cnblogs.com/mobaiyu/p/11489934.html


对 0 1 code值进行转换


<el-table-column prop=”userIsdel” label=”是否删除” :formatter=”stateFormat“ class-name=”table”></el-table-column>

userIsdel 是后端传过来的字段,0代表没有被删除 , 1 代表已经被删除了.stateFormat 是一个函数,需要在methods代码块儿里面定义

下面代码块儿需要在methods里面去定义.

| stateFormat(row, column) {
console.log(column); //column获取的是你使用stateFormat 函数的那行的属性 // console.log(row); // row 可以取出当前行的所有值 // console.log(row.userId) //获取出来当前行的用户id
// console.log(column.property); //userIsdel
if (row.userIsdel === 0) {
return ‘未删除’
} else {
return ‘已删除’
}
} | | —- |



对日期格式进行转换
<el-table-column prop=”updateTime” label=”修改时间” :formatter=”dateFormatter“ class-name=”table”></el-table-column>

:formatter=”dateFormatter“ 里面的dateFormatter 是一个函数

下面是一个函数,需要写在methods代码块儿里面

| dateFormatter(row, column) {
//updateTime 是你后端返回给前端的字段,
//row代表每一行 let datetime = row.updateTime;
if (datetime) {
datetime = new Date(datetime);
let y = datetime.getFullYear() + “年”;
let mon = datetime.getMonth() + 1 + “月”;
let d = datetime.getDate() + “日”;
return y + mon + d;
}
} | | —- |




（三）:rules表单校验



对手机号必填进行校验

form表单

|
<el-form ref=”formPoint” :model=”formPoint” label-width=”100px” :rules=”FormRules”> <el-form-item label=”姓名” prop=”traceContent”> <el-input v-model=”formPoint.userName”></el-input> </el-form-item> <el-form-item label=”用户手机号” prop=”userPhone”> <el-input v-model=”formPoint.userPhone”></el-input> </el-form-item> </el-form-item> </el-form> | | —- |


data绑定值,key要和 :rules 的值对应上,里面的userPhone 要和el-form-item 的prop值对应上才行

| export default {
name: “vueManage”,
data() {
return {
//对编辑模态框进行校验 FormRules: {
userPhone: [{message: “用户手机号不能为空”, required: true, trigger: “blur”}],
}, | | —- |



然后就是methods

| // 保存编辑 saveEdit() {
var res = this;
//获取表单的数据 var setData = this.formPoint;
//先获取校结果,
this.$refs.formPoint.validate(valid => {
// 如果校验失败就走这里 if (!valid) {
res.$message.success(“格式不正确”);
} else {
//如果校验通过就走这里,也就是可以访问axios
this.$axios({
url: “/api/waterUser”,
method: “put”,
data: setData,
headers: {
contentType: “application/json; charset=utf-8”
}
})
.then(function (response) {

if (response.status == 200) {
res.editVisible = false;
res.$message.success(“修改成功”);

res.selectByPage();

if (res.tableData[res.idx].id === res.id) {
res.$set(res.tableData, res.idx, res.formPoint);
} else {
for (let i = 0; i < res.tableData.length; i++) {
if (res.tableData[i].id === res.id) {
res.$set(res.tableData, i, res.formPoint);
return;
}
}
}
}


})
.catch(function (error) {
// res.$message.success(“修改失败！”);
console.log(error);
});
}
})
} | | —- |


（四）select和option

| <el-form-item label=”水类型” prop=”servicesWtid”>

<el-select v-model=”addForm.servicesWtid” placeholder=”水类型”>.

<el-option
v-for=”item _in wt”
:key=”_item.servicesWtid”
:label=”item.value”
:value=”item.servicesWtid”></el-option> </el-select>
</el-form-item> | | —- |


data代码块儿里面需要预先声明 wt

| export default {
name: “vueManage”,
data() {
return {
wt: [], | | —- |


页面初始化函数需要写这个方法

| created() {
this.getwt()
}, | | —- |


methods代码块儿

| //获取水类型 getwt() {
var res = this;
this.$axios({
url: “/api/waterWaterType/findAll”,
method: “get”,
data: {pageNum: res.page, pageSize: res.pagesize}
})
.then(function (response) {
if (response.status <= 200) {//这个是循环遍历自己取出来的list的集合,后台直接返回的就是list集合,没有套自定义返回值实体类,data就是一个list集合,所以直接data.length就是获取这个集合的最大长度了. for (var i = 0; i < response.data.length; i++) {
//wt是自己预先在data里面定义的 //wtName是水类型名字(显示在页面上的内容) //wtId 是对应的这个水类型的主键名字(你选择这个提交到后台的id就是这个) res.wt.push({
value: response.data[i].wtName,
servicesWtid: response.data[i].wtId
})
}
}
})
.catch(function (error) {
res.$message.error(“查询失败: “ + error);
});
}, | | —- |


（五）单选框

| <el-form ref=”designateDialogForm” :model=”designateDialogForm” label-width=”100px”>
<el-form-item label=”指派审批人” prop=”traceResult”>
<el-radio v-model=”designateDialogForm.designatePersonid” label=”46”>李四审批</el-radio> <el-radio v-model=”designateDialogForm.designatePersonid” label=”47”>王五审批</el-radio> </el-form-item> </el-form> | | —- |