乐趣区

关于vue.js:vue全套教程实操

作者：

jiezi

在

 Vue (读音 /vjuː/，相似于 View) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为能够自底向上逐层利用。Vue 的外围库只关注视图层，不仅易于上手，还便于与第三方库或既有我的项目整合。另一方面，当与现代化的工具链以及各种反对类库联合应用时，Vue 也齐全可能为简单的单页利用提供驱动。

一、MVVM模式和第一个Vue程序
1.什么是 MVVM
该层向上与视图层进行双向数据绑定
向下与 Model 层通过接口申请进行数据交互
在这里插入图片形容
Vue的装置形式：
  1.1 应用CDN办法(初学者应用)
  也能够间接应用CDN的形式引入，代码如下：

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
1
  1.2Vue-cli脚手架
  利用Vue-cli 脚手架构建Vue我的项目，在前面第七点具体解说。(中大型项目中举荐应用)。

2.第一个Vue程序
 1、创立一个 HTML 文件

 2、引入 Vue.js

<script src=”https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js”></script>
1
残缺示例：

<!DOCTYPE html>
<html>
<head lang=”en”>

<meta charset="UTF-8">
<title>贝西说</title>
<!--1.引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

</head>
<body>
<!–view视图–>
<div id=”app”>

 <input type="text" v-model="message"/>
 {{message}}

</div>
<script>

 var vue=new Vue({
    el:"#app",
     /*model数据*/
     data:{
         message:"hello,vue"
     }
 });

</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
演示成果：（视图驱动数据，数据驱动视图）
在这里插入图片形容

二、根底语法
v-bind

v-bind就是用于绑定数据和元素属性的
残缺示例：

<body>

<div class="app">
    <a v-bind:href="url">点我</a>
</div>

<script>

 var app = new Vue({
     el:'.app',
     data:{
         url:"https://www.baidu.com",
     }
 });

</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
留神：
  v-bind前面是：属性名=，我的了解是示意绑定这个属性，绑定之后，对应的值要去vue的数据外面找。
  当咱们在控制台扭转url时，对应也会变动。
雷同的，咱们还能够绑定图片src属性、超链接的class

<body>

<div class="app">
    <a v-bind:href="url">点我</a>
    ![](imgsrc)
</div>

<script>

 var app = new Vue({
     el:'.app',
     data:{
         url:"https://www.baidu.com",
         imgsrc:"https://cn.vuejs.org/images/logo.png"
     }
 });

</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
留神：

<div class=”app”>

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

</div>
1
2
3
通常咱们能够将v-bind：简写成：

<div class=”app”>

    <a :href="url">点我</a>

</div>
1
2
3
v-if,v-else

v-if,v-else
残缺示例：

<body>

<div id="app">
    <div v-if="ok">YES</div>
    <div v-else>NO</div>
</div>
 <script>
     var app = new Vue({
         el:"#app",
         data:{
             ok:true,
         }
     });
 </script>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
v-if,v-else-if,v-else

<body>

<div id="app">
    <div v-if="role=='beixi'|| role=='admin'">您好，admin</div>
    <div v-else-if="role=='jzj'">贾志杰</div>
    <div v-else>您无权拜访！</div>
</div>
 <script>
     var app = new Vue({
         el:"#app",
         data:{
             role:"admin",
         }
     });
 </script>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
v-for

 1、v-for循环一般数组

<body>

<div id="app">
    <p v-for="(item,index) in list">{{item}}----索引:{{index}}</p>
</div>
 <script>
     var app = new Vue({
         el:"#app",
         data:{
            list:[1,2,3,4,5],
         }
     });
 </script>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
 2、v-for循环对象数组

<body>

<div id="app">
    <p v-for="(user,index) in list">{{user.id}}---{{user.name}}-----索引:{{index}}</p>
</div>
 <script>
     var app = new Vue({
         el:"#app",
         data:{
            list:[
                {id:1,name:'beixi'},
                {id:2,name:'jzj'},
                {id:3,name:'贾志杰'}
            ],
         }
     });
 </script>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 3、v-for循环对象

<body>

<div id="app">
    <p v-for="(val,key,index) in user">值：{{val}}---键：{{key}}-----索引:{{index}}</p>
</div>
 <script>
     var app = new Vue({
         el:"#app",
         data:{
            user:{
                name:"beixi",
                age:"18",
                sex:"男"
            }
         }
     });
 </script>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 4、v-for循环数字

<body>

<div id="app">
    <p v-for="count in 5">这是第{{count}}次循环</p>
</div>
 <script>
     var app = new Vue({
         el:"#app",
         data:{ }
     });
 </script>

</body>
1
2
3
4
5
6
7
8
9
10
11
三、Vue绑定事件
语法：

  v-on:事件名 = “办法名”
  简写： @事件名 = “办法名”
  事件名： click|keydown|keyup|mouseover|mouseout|自定义事件名

v-on事件监听，残缺示例：

<!DOCTYPE html>
<html xmlns:v-on=”http://www.w3.org/1999/xhtml”>
<head lang=”en”>

<meta charset="UTF-8">
<title>贝西说</title>
<!--1.引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

</head>
<body>

<div id="app">
   {{count}}
    <button v-on:click="count+=1">点我加1</button>
    <button v-on:click="sub">点我减1</button>
</div>
 <script>
     var app = new Vue({
         el:"#app",
         data:{count:1 },
         methods:{
             sub:function(){
                this.count-=1;
             }
         }
     });
 </script>

</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
留神：v-bind能够简写为 ： v-on: 能够简写@

四、Vue：表单双绑、组件
1.什么是双向数据绑定
  Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变动。这也算是 Vue.js 的精华之处了。

  值得注意的是，咱们所说的数据双向绑定，肯定是对于 UI 控件来说的，非 UI 控件不会波及到数据双向绑定。单向数据绑定是应用状态管理工具的前提。如果咱们应用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有抵触。

2.在表单中应用双向数据绑定
  你能够用 v-model 指令在表单 、 及 元素上创立双向数据绑定。它会依据控件类型主动选取正确的办法来更新元素。只管有些神奇，但 v-model 实质上不过是语法糖。它负责监听用户的输出事件以更新数据，并对一些极其场景进行一些非凡解决。

  留神：v-model 会疏忽所有表单元素的 value、checked、selected 个性的初始值而总是将 Vue 实例的数据作为数据起源。你应该通过 JavaScript 在组件的 data 选项中申明初始值!
示例1：

<body>

<div id="app">
    <input type="text"  v-model="message"/>{{message}}
</div>
 <script>
     var app = new Vue({
         el:"#app",
         data:{message:'' }
     });
 </script>

</body>
1
2
3
4
5
6
7
8
9
10
11
实现成果：
在这里插入图片形容
示例2：

<div id=”app”>

    <input type="radio" name="sex" value="男" v-model="gender"/>男
    <input type="radio" name="sex" value="女" v-model="gender"/>女
    <p>{{gender}}</p>
</div>
 <script>
     var app = new Vue({
         el:"#app",
         data:{gender:'' }
     });
 </script>

1
2
3
4
5
6
7
8
9
10
11
示例3：

<body>

<div id="app">
    <select v-model="selected">
        <option value="">--请抉择--</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="广州">广州</option>
    </select>
    <p>{{selected}}</p>
</div>
 <script>
     var app = new Vue({
         el:"#app",
         data:{selected:'' }
     });
 </script>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
3.什么是组件
  组件是可复用的 Vue 实例，说白了就是一组能够重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着殊途同归之妙。
  通常一个利用会以一棵嵌套的组件树的模式来组织：在这里插入图片形容
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又蕴含了其它的像导航链接、博文之类的组件。

4.简略定义一个组件
留神：在理论开发中，咱们并不会用以下形式开发组件，而是采纳 vue-cli 创立 .vue 模板文件的形式开发，以下办法只是为了让大家了解什么是组件。

<div id=”app”>

    <beixi></beixi>
</div>
 <script>
     //注册组件
     Vue.component("beixi",{
         template:'<li>hello</li>'
     });
     var app = new Vue({
         el:"#app",
     });
 </script>

1
2
3
4
5
6
7
8
9
10
11
12
阐明：

Vue.component()：注册组件
beixi：自定义组件的名字
template：组件的模板
5.应用 props 属性动静传递参数
<body>

<div id="app">
    <!--组件：应用props把值传递给组件-->
    <blog-post v-for="item in items" v-bind:value="item"></blog-post>
</div>
 <script>
     Vue.component("blog-post",{
         props:['value'],
         template:'<li>{{value}}</li>'
     });
     var app = new Vue({
         el:"#app",
         data:{
             items:['beixi','jzj','贾志杰']
         }
     });
 </script>

</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
阐明：

v-for=“item in items”：遍历 Vue 实例中定义的名为 items 的数组，并创立等同数量的组件
v-bind:value=“item”：将遍历的 item 项绑定到组件中 props 定义的名为 value属性上；= 号右边的 value 为 props 定义的属性名，左边的为 item in items 中遍历的 item 项的值

五、Axios异步通信
1.什么是Axios
  Axios 是一个开源的能够用在浏览器端和 NodeJS 的异步通信框架，她的次要作用就是实现 AJAX 异步通信，其性能特点如下：

从浏览器中创立 XMLHttpRequests
从 node.js 创立 http 申请
反对 Promise API [JS中链式编程]
拦挡申请和响应
转换申请数据和响应数据
勾销申请
主动转换 JSON 数据
客户端反对进攻 XSRF（跨站申请伪造）
  GitHub：https://github.com/axios/axios

  中文文档：http://www.axios-js.com/

2.为什么要应用 Axios
  因为 Vue.js 是一个 视图层框架 并且作者（尤雨溪）严格准守 SoC （关注度拆散准则），所以 Vue.js 并不蕴含 AJAX 的通信性能，为了解决通信问题，作者独自开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本当前进行了对该插件的保护并举荐了 Axios 框架。少用jQuery，因为它操作Dom太频繁！

3.第一个 Axios 应用程序
  咱们开发的接口大部分都是采纳 JSON 格局，能够先在我的项目里模仿一段 JSON 数据，数据内容如下：创立一个名为 data.json 的文件并填入下面的内容，放在我的项目的根目录下

{
“name”: “贝西说”,
“url”: “https://blog.csdn.net/beixishuo”,
“page”: 1,
“isNonProfit”: true,
“address”: {

"street": "太谷",
"city": "山西晋中",
"country": "中国"

},
“links”: [

{
  "name": "bilibili",
  "url": "https://space.bilibili.com/474668932"
},
{
  "name": "贝西说",
  "url": "https://blog.csdn.net/beixishuo"
},
{
  "name": "百度",
  "url": "https://www.baidu.com/"
}

]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
残缺示例：

<!--引入 JS 文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<!--在线引入axios。在我的项目开发中会装置axios组件(npm install axios)-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>
<body>
<div id=”app”>

<div>{{info.name}}</div>
<div>{{info.address}}</div>
<a v-bind:href="info.url">贝西说</a>

</div>
<script>

var app=new Vue({
    el:"#app",
    //data: 属性
    data:function(){//须要解决(返回)后盾数据在页面上渲染时应用
        return{
            //申请的返回参数格局必须和json字符串一样
            info:{
                name:null,//相当于形参占位，理论参数data.json会赋予
                url:null,
                address:{
                    street:null,
                    city:null,
                    country:null
                }
            }
        }
    },
    mounted:function(){//mounted钩子函数，相当于java中main函数。能够调用methods中定义的函数
    // axios.get('data.json').then(resp=>(console.log(resp.data)));
        axios.get('data.json').then(resp=>(this.info=resp.data));
    }
})

</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
阐明:

在这里应用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
应用 axios 框架的 get 办法申请 AJAX 并主动将数据封装进了 Vue 实例的数据对象中
咱们在data中的数据结构必须要和Ajax响应回来的数据格式匹配！
4.axios API
能够通过将相干配置传递给 axios 来进行申请。

axios(config)

// 发送一个 POST 申请
axios({

method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}

});
1
2
3
4
5
6
7
8
9
axios(url[, config])

// 发送一个 GET 申请 (GET申请是默认申请模式)

axios('/user/12345');

1
2
申请办法别名
为了不便起见，曾经为所有反对的申请办法提供了别名。

axios.request（config）

axios.get（url [，config]）

axios.delete（url [，config]）

axios.head（url [，config]）

axios.post（url [，data [，config]]）

axios.put（url [，data [，config]]）

axios.patch（url [，data [，config]]）

留神

当应用别名办法时，不须要在config中指定url，method和data属性。

5.Vue的生命周期
在这里插入图片形容

六、计算属性
1.什么是计算属性
  当一些数据须要依据其它数据变动时,须要进行解决能力去展现,尽管vue提供了绑定数据表达式绑定的形式,然而设计它的初衷只是用于简略运算的。在模板中放入太多的逻辑会让模板过重且难以保护,对于一些比较复杂和非凡的计算有可能就顾此失彼了,而且计算的属性写在模板里也不利于我的项目保护

computed次要的作用:

  拆散逻辑(模板和数据拆散)
  缓存值
  双向绑定(getter,setter)
简略了解为：把计算的后果当作属性返回去

2.残缺示例

<!--引入 JS 文件-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

</head>
<body>
<div id=”app”>

<input type="text"  v-model="num1"/><input type="text" v-model="num2"/>
<p>求和后果{{result}}</p>

</div>
<script>

var app=new Vue({
    el:"#app",
    data:{num1:1,num2:2},
    computed:{//计算属性
       result:function(){
           return parseInt(this.num1)+parseInt(this.num2);
       }
    }
})

</script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
3、methods办法与computed计算属性区别
两者的执行后果是完全相同的
计算属性是基于他们的依赖进行缓存的，只有在相干依赖产生扭转时，他们才会从新求值，也就是说，只有他的依赖没有发生变化，那么每次拜访的时候计算属性都会立刻返回之前的计算结果，不再执行函数
每次触发从新渲染时，调用办法将总会再次执行函数
七、前端工程化 vue-cli
 Vue脚手架指的是vue-cli，它是一个专门为单页面利用疾速搭建繁冗的脚手架，它能够轻松的创立新的应用程序而且可用于主动生成vue和webpack的我的项目模板。
 利用vue-cli脚手架来构建Vue我的项目须要先装置Node.js和NPM环境。
1.Node.js的装置
Node.js的装置比较简单，大家须要在node.js官网(https://nodejs.org/en/downloa…，windows的举荐下载Windows Installer (.msi)。同时，大家会失去一个附送的NPM工具。

装置Node.js，双击下载好的node文件，如图所示。
在这里插入图片形容
装置过程比较简单，始终“下一步”即可。
环境变量配置：装置实现后须要设置环境变量：即Path中增加装置目录(例如：D:javanodejs)，如图所示。
在这里插入图片形容
点击开始=》运行=》输出”cmd” => 输出node -v如图所示，验证装置是否胜利。
在这里插入图片形容
2.npm装置
因为node.js曾经集成了npm，所以之前npm也一并装置好了。所以在cmd终端输出npm -v 来测试是否装置胜利。命令如图 所示，呈现版本提醒示意装置胜利。
在这里插入图片形容
3根本应用
在这里插入图片形容
步骤如下：
①　搭建第一个残缺的Vue-cli 脚手架构建的我的项目。
在这里插入图片形容
②　装置实现，输出Vue -V，如果呈现相应的版本号，则阐明装置胜利。如图7-6所示。
在这里插入图片形容
③　咱们能够应用vue-cli来疾速生成一个基于webpack模板构建的我的项目，如图所示，我的项目名为vue-project。
在这里插入图片形容
④　配置实现后，能够看到目录下多出了一个我的项目文件夹，外面就是 vue-cli 创立的一个基于 webpack 的 vue.js 我的项目。
而后进入我的项目目录（如：cd vue-project），应用 npm install装置依赖，如图所示。
在这里插入图片形容
依赖装置实现后，咱们来看一下我的项目的目录构造，如下所示：
.
|– build // 我的项目构建(webpack)相干代码
| |– build.js // 生产环境构建代码
| |– check-version.js // 查看node、npm等版本
| |– dev-client.js // 热重载相干
| |– dev-server.js // 构建本地服务器
| |– utils.js // 构建工具相干
| |– webpack.base.conf.js // webpack根底配置
| |– webpack.dev.conf.js // webpack开发环境配置
| |– webpack.prod.conf.js // webpack生产环境配置
|– config // 我的项目开发环境配置
| |– dev.env.js // 开发环境变量
| |– index.js // 我的项目一些配置变量
| |– prod.env.js // 生产环境变量
| |– test.env.js // 测试环境变量
|– node_modules //所须要依赖资源
|– src // 源码目录
| |– assets //寄存资产文件
| |– components // vue公共组件
| |– router //寄存路由js文件，用于页面的跳转
| |– App.vue // 页面入口文件
| |– main.js // 程序入口文件，加载各种公共组件
|– static // 动态文件，比方一些图片，json数据等
| |– data // 群聊剖析失去的数据用于数据可视化
|– .babelrc // ES6语法编译配置
|– .editorconfig // 定义代码格局
|– .gitignore // git上传须要疏忽的文件格式
|– README.md // 我的项目阐明
|– favicon.ico
|– index.html // 入口页面
|– package.json // 我的项目根本信息
.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
对于开发者更多操作的是src目录：

|– src // 源码目录
| |– assets //寄存资产文件
| |– components // vue公共组件
| |– router //寄存路由js文件，用于页面的跳转
| |– App.vue // 页面入口文件
| |– main.js
1
2
3
4
5
6
④　输出npm run dev命令来启动我的项目，如图所示。
在这里插入图片形容

运行胜利后在浏览器输出：http://localhost:8080，拜访我的项目后果如图所示。
在这里插入图片形容 Vue (读音 /vjuː/，相似于 View) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为能够自底向上逐层利用。Vue 的外围库只关注视图层，不仅易于上手，还便于与第三方库或既有我的项目整合。另一方面，当与现代化的工具链以及各种反对类库联合应用时，Vue 也齐全可能为简单的单页利用提供驱动。

一、MVVM模式和第一个Vue程序

1.什么是 MVVM

  • 该层向上与视图层进行双向数据绑定
  • 向下与 Model 层通过接口申请进行数据交互

    Vue的装置形式：

  1.1 应用CDN办法(初学者应用)
  也能够间接应用CDN的形式引入，代码如下：

`<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>` 

*   1

  1.2Vue-cli脚手架
  利用Vue-cli 脚手架构建Vue我的项目，在前面第七点具体解说。(中大型项目中举荐应用)。

2.第一个Vue程序

 1、创立一个 HTML 文件

 2、引入 Vue.js

`<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>` 

*   1

残缺示例：

`<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>贝西说</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<!--view视图-->
 <div id="app">
     <input type="text" v-model="message"/>
     {{message}}
 </div>
 <script>
     var vue=new Vue({
        el:"#app",
         /*model数据*/
         data:{
             message:"hello,vue"
         }
     });
 </script>
</body>
</html>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17
*   18
*   19
*   20
*   21
*   22
*   23
*   24
*   25

演示成果：（视图驱动数据，数据驱动视图）

二、根底语法

v-bind

v-bind就是用于绑定数据和元素属性的
残缺示例：

`<body>
    <div class="app">
        <a v-bind:href="url">点我</a>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
         }
     });
 </script>
</body>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13

留神：
  v-bind前面是：属性名=，我的了解是示意绑定这个属性，绑定之后，对应的值要去vue的数据外面找。
  当咱们在控制台扭转url时，对应也会变动。
雷同的，咱们还能够绑定图片src属性、超链接的class

`<body>
    <div class="app">
        <a v-bind:href="url">点我</a>
        <img v-bind:src="imgsrc" width="200px"/>
    </div>
 <script>
     var app = new Vue({
         el:'.app',
         data:{
             url:"https://www.baidu.com",
             imgsrc:"https://cn.vuejs.org/images/logo.png"
         }
     });
 </script>
</body>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15

留神：

`<div class="app">
      <a v-bind:href="url">点我</a>
</div>` 

*   1
*   2
*   3

通常咱们能够将v-bind：简写成：

`<div class="app">
        <a :href="url">点我</a>
</div>` 

*   1
*   2
*   3

v-if,v-else

v-if,v-else
残缺示例：

`<body>
    <div id="app">
        <div v-if="ok">YES</div>
        <div v-else>NO</div>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 ok:true,
             }
         });
     </script>
</body>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14

v-if,v-else-if,v-else

`<body>
    <div id="app">
        <div v-if="role=='beixi'|| role=='admin'">您好，admin</div>
        <div v-else-if="role=='jzj'">贾志杰</div>
        <div v-else>您无权拜访！</div>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                 role:"admin",
             }
         });
     </script>
</body>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15

v-for

 1、v-for循环一般数组

`<body>
    <div id="app">
        <p v-for="(item,index) in list">{{item}}----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[1,2,3,4,5],
             }
         });
     </script>
</body>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13

 2、v-for循环对象数组

`<body>
    <div id="app">
        <p v-for="(user,index) in list">{{user.id}}---{{user.name}}-----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                list:[
                    {id:1,name:'beixi'},
                    {id:2,name:'jzj'},
                    {id:3,name:'贾志杰'}
                ],
             }
         });
     </script>
</body>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17

 3、v-for循环对象

`<body>
    <div id="app">
        <p v-for="(val,key,index) in user">值：{{val}}---键：{{key}}-----索引:{{index}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{
                user:{
                    name:"beixi",
                    age:"18",
                    sex:"男"
                }
             }
         });
     </script>
</body>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17

 4、v-for循环数字

`<body>
    <div id="app">
        <p v-for="count in 5">这是第{{count}}次循环</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{ }
         });
     </script>
</body>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11

三、Vue绑定事件

语法：

  v-on:事件名 = “办法名”
  简写： @事件名 = “办法名”
  事件名： click|keydown|keyup|mouseover|mouseout|自定义事件名

v-on事件监听，残缺示例：

`<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8">
    <title>贝西说</title>
    <!--1.引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
    <div id="app">
       {{count}}
        <button v-on:click="count+=1">点我加1</button>
        <button v-on:click="sub">点我减1</button>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{count:1 },
             methods:{
                 sub:function(){
                    this.count-=1;
                 }
             }
         });
     </script>
</body>
</html>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17
*   18
*   19
*   20
*   21
*   22
*   23
*   24
*   25
*   26
*   27

留神：v-bind能够简写为 ： v-on: 能够简写@

四、Vue：表单双绑、组件

1.什么是双向数据绑定

  Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变动。这也算是 Vue.js 的精华之处了。

  值得注意的是，咱们所说的数据双向绑定，肯定是对于 UI 控件来说的，非 UI 控件不会波及到数据双向绑定。单向数据绑定是应用状态管理工具的前提。如果咱们应用 vuex，那么数据流也是单项的，这时就会和双向数据绑定有抵触。

2.在表单中应用双向数据绑定

  你能够用 v-model 指令在表单 、 及 元素上创立双向数据绑定。它会依据控件类型主动选取正确的办法来更新元素。只管有些神奇，但 v-model 实质上不过是语法糖。它负责监听用户的输出事件以更新数据，并对一些极其场景进行一些非凡解决。

  留神：v-model 会疏忽所有表单元素的 value、checked、selected 个性的初始值而总是将 Vue 实例的数据作为数据起源。你应该通过 JavaScript 在组件的 data 选项中申明初始值!
示例1：

`<body>
    <div id="app">
        <input type="text"  v-model="message"/>{{message}}
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{message:'' }
         });
     </script>
</body>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11

实现成果：

示例2：

 `<div id="app">
        <input type="radio" name="sex" value="男" v-model="gender"/>男
        <input type="radio" name="sex" value="女" v-model="gender"/>女
        <p>{{gender}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{gender:'' }
         });
     </script>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11

示例3：

`<body>
    <div id="app">
        <select v-model="selected">
            <option value="">--请抉择--</option>
            <option value="北京">北京</option>
            <option value="上海">上海</option>
            <option value="广州">广州</option>
        </select>
        <p>{{selected}}</p>
    </div>
     <script>
         var app = new Vue({
             el:"#app",
             data:{selected:'' }
         });
     </script>
</body>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17

3.什么是组件

  组件是可复用的 Vue 实例，说白了就是一组能够重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着殊途同归之妙。
  通常一个利用会以一棵嵌套的组件树的模式来组织：
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又蕴含了其它的像导航链接、博文之类的组件。

4.简略定义一个组件

留神：在理论开发中，咱们并不会用以下形式开发组件，而是采纳 vue-cli 创立 .vue 模板文件的形式开发，以下办法只是为了让大家了解什么是组件。

 `<div id="app">
        <beixi></beixi>
    </div>
     <script>
         //注册组件
         Vue.component("beixi",{
             template:'<li>hello</li>'
         });
         var app = new Vue({
             el:"#app",
         });
     </script>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12

阐明：

  • Vue.component()：注册组件
  • beixi：自定义组件的名字
  • template：组件的模板

5.应用 props 属性动静传递参数

`<body>
    <div id="app">
        <!--组件：应用props把值传递给组件-->
        <blog-post v-for="item in items" v-bind:value="item"></blog-post>
    </div>
     <script>
         Vue.component("blog-post",{
             props:['value'],
             template:'<li>{{value}}</li>'
         });
         var app = new Vue({
             el:"#app",
             data:{
                 items:['beixi','jzj','贾志杰']
             }
         });
     </script>
</body>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17
*   18

阐明：

v-for=“item in items”：遍历 Vue 实例中定义的名为 items 的数组，并创立等同数量的组件
v-bind:value=“item”：将遍历的 item 项绑定到组件中 props 定义的名为 value属性上；= 号右边的 value 为 props 定义的属性名，左边的为 item in items 中遍历的 item 项的值

五、Axios异步通信

1.什么是Axios

  Axios 是一个开源的能够用在浏览器端和 NodeJS 的异步通信框架，她的次要作用就是实现 AJAX 异步通信，其性能特点如下：

  • 从浏览器中创立 XMLHttpRequests
  • 从 node.js 创立 http 申请
  • 反对 Promise API [JS中链式编程]
  • 拦挡申请和响应
  • 转换申请数据和响应数据
  • 勾销申请
  • 主动转换 JSON 数据
  • 客户端反对进攻 XSRF（跨站申请伪造）

  GitHub：https://github.com/axios/axios

  中文文档：http://www.axios-js.com/

2.为什么要应用 Axios

  因为 Vue.js 是一个 视图层框架 并且作者（尤雨溪）严格准守 SoC （关注度拆散准则），所以 Vue.js 并不蕴含 AJAX 的通信性能，为了解决通信问题，作者独自开发了一个名为 vue-resource 的插件，不过在进入 2.0 版本当前进行了对该插件的保护并举荐了 Axios 框架。少用jQuery，因为它操作Dom太频繁！

3.第一个 Axios 应用程序

  咱们开发的接口大部分都是采纳 JSON 格局，能够先在我的项目里模仿一段 JSON 数据，数据内容如下：创立一个名为 data.json 的文件并填入下面的内容，放在我的项目的根目录下

`{
  "name": "贝西说",
  "url": "https://blog.csdn.net/beixishuo",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "太谷",
    "city": "山西晋中",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://space.bilibili.com/474668932"
    },
    {
      "name": "贝西说",
      "url": "https://blog.csdn.net/beixishuo"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17
*   18
*   19
*   20
*   21
*   22
*   23
*   24
*   25

残缺示例：

 `<!--引入 JS 文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <!--在线引入axios。在我的项目开发中会装置axios组件(npm install axios)-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <div>{{info.name}}</div>
    <div>{{info.address}}</div>
    <a v-bind:href="info.url">贝西说</a>
</div>
<script>
    var app=new Vue({
        el:"#app",
        //data: 属性
        data:function(){//须要解决(返回)后盾数据在页面上渲染时应用
            return{
                //申请的返回参数格局必须和json字符串一样
                info:{
                    name:null,//相当于形参占位，理论参数data.json会赋予
                    url:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    }
                }
            }
        },
        mounted:function(){//mounted钩子函数，相当于java中main函数。能够调用methods中定义的函数
        // axios.get('data.json').then(resp=>(console.log(resp.data)));
            axios.get('data.json').then(resp=>(this.info=resp.data));
        }
    })
</script>
</body>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17
*   18
*   19
*   20
*   21
*   22
*   23
*   24
*   25
*   26
*   27
*   28
*   29
*   30
*   31
*   32
*   33
*   34
*   35
*   36

阐明:

  1. 在这里应用了 v-bind 将 a:href 的属性值与 Vue 实例中的数据进行绑定
  2. 应用 axios 框架的 get 办法申请 AJAX 并主动将数据封装进了 Vue 实例的数据对象中
  3. 咱们在data中的数据结构必须要和Ajax响应回来的数据格式匹配！

4.axios API

能够通过将相干配置传递给 axios 来进行申请。

axios(config)

`// 发送一个 POST 申请
axios({
    method: 'post',
    url: '/user/12345',
    data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
    }
});` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9

axios(url[, config])

`// 发送一个 GET 申请 (GET申请是默认申请模式)
    axios('/user/12345');` 

*   1
*   2

申请办法别名
为了不便起见，曾经为所有反对的申请办法提供了别名。

  • axios.request（config）
  • axios.get（url [，config]）
  • axios.delete（url [，config]）
  • axios.head（url [，config]）
  • axios.post（url [，data [，config]]）
  • axios.put（url [，data [，config]]）
  • axios.patch（url [，data [，config]]）

留神

当应用别名办法时，不须要在config中指定url，method和data属性。

5.Vue的生命周期

六、计算属性

1.什么是计算属性

  当一些数据须要依据其它数据变动时,须要进行解决能力去展现,尽管vue提供了绑定数据表达式绑定的形式,然而设计它的初衷只是用于简略运算的。在模板中放入太多的逻辑会让模板过重且难以保护,对于一些比较复杂和非凡的计算有可能就顾此失彼了,而且计算的属性写在模板里也不利于我的项目保护

computed次要的作用:

  •   拆散逻辑(模板和数据拆散)
  •   缓存值
  •   双向绑定(getter,setter)

简略了解为：把计算的后果当作属性返回去

2.残缺示例

 `<!--引入 JS 文件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text"  v-model="num1"/><input type="text" v-model="num2"/>
    <p>求和后果{{result}}</p>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{num1:1,num2:2},
        computed:{//计算属性
           result:function(){
               return parseInt(this.num1)+parseInt(this.num2);
           }
        }
    })
</script>
</body>` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17
*   18
*   19
*   20

3、methods办法与computed计算属性区别

  1. 两者的执行后果是完全相同的
  2. 计算属性是基于他们的依赖进行缓存的，只有在相干依赖产生扭转时，他们才会从新求值，也就是说，只有他的依赖没有发生变化，那么每次拜访的时候计算属性都会立刻返回之前的计算结果，不再执行函数
  3. 每次触发从新渲染时，调用办法将总会再次执行函数

七、前端工程化 vue-cli

 Vue脚手架指的是vue-cli，它是一个专门为单页面利用疾速搭建繁冗的脚手架，它能够轻松的创立新的应用程序而且可用于主动生成vue和webpack的我的项目模板。
 利用vue-cli脚手架来构建Vue我的项目须要先装置Node.js和NPM环境。
1.Node.js的装置
Node.js的装置比较简单，大家须要在node.js官网(https://nodejs.org/en/downloa…，windows的举荐下载Windows Installer (.msi)。同时，大家会失去一个附送的NPM工具。

  • 装置Node.js，双击下载好的node文件，如图所示。

    装置过程比较简单，始终“下一步”即可。
  • 环境变量配置：装置实现后须要设置环境变量：即Path中增加装置目录(例如：D:javanodejs)，如图所示。
  • 点击开始=》运行=》输出”cmd” => 输出node -v如图所示，验证装置是否胜利。

    2.npm装置
    因为node.js曾经集成了npm，所以之前npm也一并装置好了。所以在cmd终端输出npm -v 来测试是否装置胜利。命令如图 所示，呈现版本提醒示意装置胜利。

    3根本应用

    步骤如下：
    ①　搭建第一个残缺的Vue-cli 脚手架构建的我的项目。

    ②　装置实现，输出Vue -V，如果呈现相应的版本号，则阐明装置胜利。如图7-6所示。

    ③　咱们能够应用vue-cli来疾速生成一个基于webpack模板构建的我的项目，如图所示，我的项目名为vue-project。

    ④　配置实现后，能够看到目录下多出了一个我的项目文件夹，外面就是 vue-cli 创立的一个基于 webpack 的 vue.js 我的项目。
    而后进入我的项目目录（如：cd vue-project），应用 npm install装置依赖，如图所示。

    依赖装置实现后，咱们来看一下我的项目的目录构造，如下所示：
`.
|-- build                            // 我的项目构建(webpack)相干代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 查看node、npm等版本
|   |-- dev-client.js                // 热重载相干
|   |-- dev-server.js                // 构建本地服务器
|   |-- utils.js                     // 构建工具相干
|   |-- webpack.base.conf.js         // webpack根底配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 我的项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 我的项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|   |-- test.env.js                  // 测试环境变量
|-- node_modules           //所须要依赖资源
|-- src                              // 源码目录
|   |--  assets                          //寄存资产文件
|   |-- components                   // vue公共组件
|   |-- router                       //寄存路由js文件，用于页面的跳转
|   |-- App.vue                        // 页面入口文件
|   |-- main.js                        // 程序入口文件，加载各种公共组件
|-- static                           // 动态文件，比方一些图片，json数据等
|   |-- data                           // 群聊剖析失去的数据用于数据可视化
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格局
|-- .gitignore                       // git上传须要疏忽的文件格式
|-- README.md                        // 我的项目阐明
|-- favicon.ico 
|-- index.html                       // 入口页面
|-- package.json                     // 我的项目根本信息
.` 

*   1
*   2
*   3
*   4
*   5
*   6
*   7
*   8
*   9
*   10
*   11
*   12
*   13
*   14
*   15
*   16
*   17
*   18
*   19
*   20
*   21
*   22
*   23
*   24
*   25
*   26
*   27
*   28
*   29
*   30
*   31
*   32

对于开发者更多操作的是src目录：

`|-- src                              // 源码目录
|   |--  assets                          //寄存资产文件
|   |-- components                   // vue公共组件
|   |-- router                       //寄存路由js文件，用于页面的跳转
|   |-- App.vue                        // 页面入口文件
|   |-- main.js` 

*   1
*   2
*   3
*   4
*   5
*   6

④　输出npm run dev命令来启动我的项目，如图所示。

运行胜利后在浏览器输出：http://localhost:8080，拜访我的项目后果如图所示。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章