Vue

MVVM模式

 

一、第一个Vue程序

1.IDEA安装Vue.js

2. 创建html文件,并导入Vue.js的CDN

以下推荐国外比较稳定的两个 CDN,国内还没发现哪一家比较好,目前还是建议下载到本地。

 

3. 运行

二、基本语法

1.if、for

三、绑定事件

绑定事件查询:https://www.jquery123.com/category/events/

四、 组件

五、Axios异步通信

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>[v-clock]{display:none;}</style><!--解决闪烁问题-->
</head>
<body>
<!--View层-->
<div id="app" v-clock><!--v-clock 解决闪烁问题-->
    <!--可以使用data.json里的所有数据-->
    <h1>{{info.name}}</h1>
    <h1>{{info.links}}</h1>
    <!--绑定url-->
    <a v-bind:href="info.url">超链接</a>
</div>
<!--1.导入Vue.js , Axios.js-->
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
       el:"#app",
        /*Model层*/
        data: {
            //info接收数据
            info:{}
        },
        mounted(){
                     //获取json文件               返回         将返回值赋给info
            axios.get('../demo/data.json').then(response=>(this.info=response.data));
        },
    });
</script>
</body>
</html>

六、计算属性

可以提高效率,类似缓存

七、插槽(slot)

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <title-li>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <!--v-bind: 可以简写为 :-->
        <todo-li slot="todo-li" v-for="item in items" :li="item"></todo-li>
    </title-li>
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    //插槽
    Vue.component("todo",{
        template:   '<div>' +
                    '<slot name="todo-title"></slot>' +
                    '<ul>' +
                    '<slot name="todo-li"></slot>' +
                    '</ul><' +
                    '/div>'
    });
    Vue.component("todo-title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });
    Vue.component("todo-li",{
        props: ['li'],
        template: '<li>{{li}}</li>'
    });
    new Vue({
        el: "#app",
        data: {
          title: "Vue",
            items: ['123','456','789']
        },

    });
</script>
</body>
</html>

八、第一个vue-cli程序

1.环境准备

##1. 1 node.js下载

node.js官网:https://nodejs.org/en/

1.2 node.js安装

安装过程一路next,在选择存储路径时,尽量选取本地保存环境的路径。

1.3 验证安装

用管理员身份打开cmd,命令行输入

node -v
npm -v    

当显示版本号时证明安装成功

1.4 安装淘宝镜像

npm在国内的速度有时很慢,安装淘宝的镜像可以很大提升下载速度,但是尽量少使用cnpm下载,打包时有可能出现错误

npm install cnpm -g  //-g的意思是全局安装,
npm install -g cnpm --registry=https://registry.npm.taobao.or

下载镜像时首先要保证自我网络的通畅

2.安装Vue-Cli脚手架

2.1 安装Vue-Cli

cnpm install vue-cli -g
 //查看创建Vue程序可使用的模板
 vue list

2.2 创建Vue-Cli程序

命令行cmd,切换到存放代码的目录,如:d:\workspace

vue init webpack myvue-01
//webpack是模板 vuefirst是项目名称

全部选择no即可

2.3 项目运行

cd myvue-01
npm install
npm run dev

 

浏览器访问: http://localhost:8080/

2.4 使用IDE打开创建的项目

九、webpack

发展

 安装webpack

配置

使用webpack

6.IDEA的左下角的Terminal输入打包命令 webpack

打包完就是一个压缩后的js文件了

这是一个类似热部署的命令

7.创建一个html文件 用script标签引入刚才写好的js文件

 

8.运行

十、vue-router

 1. 导入上边的插件并创建一个router的包,并建一个index.js(主配置)文件

2.编写一个组件rose.vue

3.编写index.js

3.在main.js进行路由配置

4.在App.vue中使用路由

5.运行 npm run dev

十一、vue+elementUI

1.创建vue项目

方式一:关于Vue ui的可视化界面进行Vue项目的创建

方拾二:

 

我用vue-ui可视化界面安装完之后运行出现了

查询之后,是因为新版本运行命令变成了  npm run serve,运行成功

2.安装element依赖

npm i element-ui -S

然后就可以使用element的组件了

十一、 路由嵌套、路由模式、404、路由钩子

在路由里写个 chrildren 来嵌套路由

路由模式

404 

 

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值