[学习笔记]简单的Vue教程

于 2020-05-26 00:26:23 发布
阅读量188 收藏
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/boerzj_01/article/details/106346013
版权

文章目录

Vue

引入Vue

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

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

第一个vue程序

<body>
<div id="app">
    {{ message }}
</div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app-2',
        data: {
            message: '页面加载于 ' + new Date().toLocaleString()
        }
    })
</script>

</body>

if语句

<body>

<div id="app">
    <h2 v-if="type==='A'">a</h2>
    <h2 v-else-if="type==='B'">b</h2>
    <h2 v-else>no</h2>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            type: 'A'
        }
    });
</script>
</body>

for语句

<body>

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            items: [
                {message: 'one'},
                {message: 'tow'},
                {message: 'three'}
            ]
        }

    });
</script>

</body>

事件

<body>

<div id="app">
    <button v-on:click="sayHi">clike me</button>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            messag: "hello"
        },
        methods: {
            sayHi: function(event){
                alert(this.messag);
            }
        }

    });
</script>

</body>

数据双向绑定

<body>

<div id="app">
    输入数据：<input type="text" v-model="message">{{message}}
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            message: "123"
        }

    });
</script>

</body>

利用v-model实现表单输入和应用状态之间的双向绑定。

v-model会忽略多有表单元素value、checked、selected特性的初始值并总将Vue实力的数据作为数据来源

在select中，如果v-model未匹配到任何值，则select会被渲染为为选中状态

Vue组件

<body>

<div id="app">
    <fisher v-for="item in items" v-bind:f="item"></fisher>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    // 定义一个Vue组件
    Vue.component("fisher",{
        props: ["f"],// 利用props传递v-bind绑定的参数
        template: '<li>{{f}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data: {
            items: ["hello", "vue", "i am fisher"]
        }
    });
</script>

</body>

利用Vue.component();定义组件

组件中不能直接获得Vue实例中的数据，需要通过v-bind绑定数据，然后通过props: []传递给组件。

Axios异步通信

cdn引入Axios

<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

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>

<div id="app" v-clock>
    <p>{{info.name}}</p>
    <a v-bind:href="info.url">百度</a>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",

        data(){
            return{
                //参数应与json的一致
                info: {
                    name: null,
                    url: null
                }
            }
        },

        mounted(){ //钩子函数 axios支持链式编程
            axios.get('data.json').then(response=>(this.info = response.data));
        }
    });
</script>

</body>
</html>

计算属性

计算出来的结果放在属性中，相当于缓存成静态属性，虚拟dom

将计算结果进行缓存，节约系统开销

<body>

<div id="app">
    <p>{{myTime()}}</p>
    <p>{{myTime_com}}</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        methods: { //方法
            myTime: function () {
                return Date.now();
            }
        },

        computed: { //计算属性 computed与methods的方法名不能重名，否则只会调用methods的方法
            myTime_com: function () {
                return Date.now();
            }
        }


    });
</script>

</body>

调用计算属性的方法时不需要加()，而methods需要

slot插槽

<body>

<div id="app">
    <todo>
        <todo_title slot="todo_title" :title="title"></todo_title>
        <todo_items slot="todo_items" v-for="item in items" :item="item"></todo_items>
    </todo>
</div>
    
    
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo_title"></slot>\
                        <ul>\
                            <slot name="todo_items"></slot>\
                        </ul>\
                   </div>'
    });

    Vue.component("todo_title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    Vue.component("todo_items", {
        props: ['item'],
        template: '<li>{{item}}</li>'
    });

    var vm = new Vue({
        el: "#app",
        data: {
            title: "标题",
            items: ['内容1', '内容2']
        }
    });
</script>

</body>

自定义事件内容分发

<body>

<div id="app">
    <todo>
        <todo_title slot="todo_title" :title="title"></todo_title>
        <todo_items slot="todo_items" v-for="(item,index) in items" :item="item" 
                    v-on:remove="removeItems(index)" :key="index"></todo_items>
    </todo>

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

    Vue.component("todo",{
        template: '<div>\
                        <slot name="todo_title"></slot>\
                        <ul>\
                            <slot name="todo_items"></slot>\
                        </ul>\
                   </div>'
    });

    Vue.component("todo_title",{
        props: ['title'],
        template: '<div>{{title}}</div>'
    });

    Vue.component("todo_items", {
        props: ['item'],
        template: '<li>{{item}}<button @click="remove">删除</button></li>',
        methods: {
            remove: function(index){
                this.$emit('remove',index);
            }
        }
    });

    var vm = new Vue({
        el: "#app",
        data: {
            title: "标题",
            items: ['内容1', '内容2']
        },

        methods: {
            removeItems: function(index){
                this.items.splice(index, 1);
            }
        }

    });
</script>

</body>

vue-cli

vue-cli是官方提供的脚手架，用于创建vue模板

npm是一个包管理工具

安装nodejs和npm

  • sudo pacman -S nodejs npm`安装这两个工具

  • 安装Node.js淘宝加速器npm install cnpm -g， -g全局下载

  • 下载慢使用npm install -g cnpm --registry=https://registry.npm.taobao.org

  • 安装vue-clicnpm install vue-cli -g

创建vue项目

vue init webpack myvue

cnpm install

webpack

webpack是一个打包工具，可以将ES6规范的项目将为ES5规范

安装webpack和webpack-cli

npm install -g webpack

安装完webpack后，启用它会提示安装webpack-cli

npm install -g webpack-cli

演示利用webpack打包的应用

./modules/hello.js中

//暴露一个方法
exports.sayHi = function () {
    document.write("<h1>hello</h1>");
}

./modules/main.js中

var hello = require("./hello");//引入hello.js
hello.sayHi();

./webpack.config.js中

//webpack配置文件
module.exports = {
    entry: './modules/main.js',//入口
    output: {
        filename: "./js/bundle.js"//输出
    }
};

命令行webpack进行打包

这时在指定的输出目录下会出现打包后的js文件

在./index.html中引用打包后的文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="./dist/js/bundle.js"></script>

</body>
</html>

vue-router

安装vue-router

在项目文件夹下cnpm install vue-router --save-dev

使用vue-router

导包import VueRouter from 'vue-router'

显示声明Vue.use(VueRouter);

演示vue-router的使用

创建./router/index.js文件，里面存放路由信息

import Vue from 'vue'
import VueRouter from 'vue-router'

import Hello from'../components/Hello'
import Word from '../components/world'

//安装路由
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  routes: [
    {
      //路径
      path: '/hello',
      //跳转的组件
      component: Hello
    },

    {
      path: '/word',
      component: Word
    }
  ]
});

路由的组件需要import导入

在./App.vue中使用路由

<template>
  <div id="app">
    <h1>Vue</h1>
    <router-link to="/hello">你好</router-link>
    <router-link to="/word">世界</router-link>
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'App'
}
</script>

<router-link to="/xxx">负责跳转

<router-view>负责显示内容

Vue与ElementUI结合

下面是创建整个工程项目的步骤

整个项目需要vue-router、element-ui、sass-loader和、node-sass

创建vue工程

vue init webpack hello-vue

进入目录

安装vue-router

npm install vue-router --save-dev

安装element-ui

npm i element-ui -S

安装依赖

npm install

安装SASS加载器（后期ElementUI会用到）

cnpm install sass-loader node-sass --save-dev

启动

npm run dev

在官网有介绍引入Element的方法

在main.js写入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

在运行项目时有可能出现错误，可能的原因是sass-loader版本过高

在package.json中修改版本7.3.1

然后运行npm install重新安装包

复制的组件需要在放在<template></template>中

嵌套路由

在一个路由中嵌套多个路由，在该页面下就可以显示其他页面

./router/index.js

export default new Router({
  routes: [
    {
      path: '/login',
      component: Login
    },
    {
      path: '/login_2',
      component: Login_2
    },
    {
      path: '/main',
      component: Main,

      children: [
        {path: '/user/profile', component: Profile},
        {path: '/user/list', component: List}
      ]
    }
  ]
})

配置完路由表就可以在该父路由页面使用该子路由

参数传递

参数传递：

./views/Main.vue中传递参数

<el-menu-item index="1-1">
	<router-link :to="{name:'Profile', params:{id:1}}">个人信息</router-link>
</el-menu-item>

在js中可以通过跳转页面的时候传递参数

this.$router.push("/main"+ this.form.username); //this.form.username就是参数

./router/index.js中配置路由

{
      path: '/main',
      component: Main,

      children: [
        {
          path: '/user/profile:id',//在这里添加参数
          name:'Profile',//这里指定一个名字，在<router-link>中用到
          component: Profile
        },
        {
          path: '/user/list',
          component: List
        }
      ]
    }

./views/uer/Profile.vue中使用参数

<template>
  <div>
    {{$route.params.id}}
    <h1>个人信息</h1>
  </div>
</template>

在传递参数时to要进行v-blink绑定，并且路由名不能是路径，必须是定义的路由名

还可以利用props进行参数传递

在index.js中添加props: true

children: [
        {
          path: '/user/profile:id',
          name:'Profile',
          props: true,//这里打开props
          component: Profile
        }
      ]

在Profile.vue中引用时加入

<script>
    export default {
        props: ['id'],//加入这个
        name: "Profile"
    }
</script>

这样在调用参数时就可以直接使用{{参数名}}

<template>
  <div>
    {{id}}<!--像这样-->
    <h1>个人信息</h1>
  </div>
</template>

url重定向

在index中配置

{
      path: '/home',
      redirect: '/main' //重定向
}

这样/home就会被重定向为/main

去掉url中的’#‘

route的模式有两种hash和history

hash带’#‘

history不带

只需要把route的mode改为hisrory就可以了

修改index.js

export default new Router({
  mode: 'history',//改变模式

  routes: [
    {
      path: '/login',
      component: Login
    }
  ]
}

404

只需要创建一个404页面，配置路由时配置余下所有url都路由到404页面即可

index.js

import NotFound from "../views/NotFound";

export default new Router({
  mode: 'history',

  routes: [
      {
          path: '*',
          component: NotFound
      }
  ]
});

路由钩子

钩子函数配合axios进行加载数据

Profile.vue

<template>
  <div>
    {{id}}
    <h1>个人信息</h1>
  </div>
</template>

<script>
    export default {
      props: ['id'],
      name: "Profile",
      beforeRouteEnter: (to, from, next)=>{//进入路由前执行
        console.log("进路由之前");
        next(vm => {
          vm.getData();//调用自身的方法
        });
      },

      beforeRouteLeave: (to,from, next)=>{//路由后执行
        console.log("路由之后");
        next();
      },

      methods: {
        getData: function(){
          //根据官网下载和安装axios
          //axios请求数据
          this.axios.get('http://localhost:8080/static/mock/data.json').then((response) => 			{
            console.log(response.data)
          })
        }
      }
    }
</script>

<style scoped>

</style>

to: 路由将要跳转的路径信息

from: 路径跳转前的路径信息

next: 路由控制参数

  • next()跳到下一个页面
  • next(’/path’)改变路由的跳转方向，使其跳到另一个路由
  • next(flase)返回原来的页面
  • next((vm=>{}))仅在beforeRouteEnter中可用，vm是组件实例
孛尔只斤
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值