Vue(贰)

最新推荐文章于 2024-10-10 10:46:31 发布

123小步

最新推荐文章于 2024-10-10 10:46:31 发布

阅读量336

点赞数 1

分类专栏： Vue 文章标签：前端

本文链接：https://blog.csdn.net/abc98526/article/details/124883135

版权

Vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

7.Axios

axios用来进行异步通信传输数据如json数据:

{
  "sites": [
    { "name":"菜鸟教程" , "url":"www.runoob.com" },
    { "name":"google" , "url":"www.google.com" },
    { "name":"微博" , "url":"www.weibo.com" }
  ]
}

使用axios进行获取:

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

<div id="vue">
{{info.sites}}--{{info.sites[0]}}

    <li v-for="site in info.sites">
        {{site}}
    </li>
</div>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var mv=new Vue({
        el:"#vue",
        data(){
            return{
                info:{
                    sites:[
                        { name: null,  url: null},
                        { name: null , url: null},
                        { name: null,  url: null}
                    ]
                }
            }
        },
        //勾子函数 链式编程 ES6新特性
        mounted(){
            axios.get('../data.json').then(response=>(this.info=response.data));
        }
    })
</script>
</body>
</html>

8.计算属性

属性使用computed表示,在里面可以定义方法与methods一致,如果两个属性中的方法重名,会优先调用methods中的方法,methods时属性！并且会计算缓存到内存中,如果调用过,会之间返回内存中的值不会在进行计算！只有computed(计算属性)中方法中的值或者变量更改才会重新调用！如:

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

<div id="app">
{{currentTime()}}
</div>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        methods:{
            currentTime1:function (){
                return new Date().getTime();
            }
        },
        computed:{
            currentTime2:function (){
                return new Date().getTime();
            }
        }
    });
</script>
</body>
</html>

9.slot插槽

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

<div id="app">

    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="intm in todoItems" :item="intm"></todo-items>
    </todo>

</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-items'></slot>\
                        </ul>\
                    </div>"
    })

    Vue.component("todo-title", {
        props:["title"],
        template: "<h1>{{title}}</h1>"
    })

    Vue.component("todo-items", {
        props:["item"],
        template: "<li>{{item}}</li>"
    })

    var app = new Vue({
        el: "#app",
        data:{
            title:"小步列表",
            todoItems:['小步说java','小步说前端','小步说Linux']
        }
    });
</script>
</body>
</html>

10.自定义事件

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

<div id="app">

    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(intm,index) in todoItems" :item="intm" :index="index" @remove="remove2(index)" :key="index"></todo-items>
    </todo>

</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-items'></slot>\
                        </ul>\
                    </div>"
    })

    Vue.component("todo-title", {
        props:["title"],
        template: "<h1>{{title}}</h1>"
    })

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

    var vm2 = new Vue({
        el: "#app",
        data:{
            title:"小步列表",
            todoItems:['小步说java','小步说前端','小步说Linux']
        },
        methods:{
            remove2:function (index){
                console.log("删除了"+this.todoItems[index])
                this.todoItems.splice(index,1);
            }
        }
    });
</script>
</body>
</html>

11.第一个vue-cli程序

下载Node.js：节点.js (nodejs.org)

使用命令行进行按照加速器:npm install -g cnpm --registry=https://registry.npmmirror.com

安装好了加速器后可以使用cnpm带起npm,表示使用淘宝的下载,会快一些！

打开取消隐藏文件进入:C:\Users\Administrator\AppData\Roaming\npm配置环境变量

使用命令行安装vul cli:

cnpm install -g @vue/cli

或者:

cnpm install vue-cli -g

安装完成后可以使用vue list 命令来查看可以基于哪些模板来创建vue程序！

进入一个需要创建项目的文件夹执行指令:vue init webpack myvue
后在进入创建的项目执行安装依赖环境:npm install
启动当前项目：npm run dev

就可以启动一个项目了，如:

效果:

安装打包工具:cnpm install webpack -g

安装客户端:cnpm install webpack-cli -g

安装axios: cnpm install axios

配置:

创建webpack.config.js配置文件

entry：入口文件，指定webpack用那个文件夹作为项目入口
output：输出，指定webpack把处理完的文件放到指定路径
module：模块，用于处理各种类型的文件
plugins：插件，如：热更新，代码重用等
resolve：设置路径指向
watch：监听，用于设置文件改动后之间打包

创建webpack(文件夹)项目:

webpack.config.js:

module.exports={
    //解析那个文件
    entry:'./modules/main.js',
    output:{
        //输出到哪里
        filename:"./js/bundle.js"
    }
};

hello.js(相当于一个类):

//暴露一个方法
exports.sayHi=function (){
    document.write("<h1>小步写ES6</h1>>")
}

main.js(启动程序):

var hello=require("./hello");
hello.sayHi()

使用命令进行打包:

一次打包:webpack
监听打包:webpack --watch

安装Vuerouter

cnpm install vue-router --save-dev

配置路由:

这里的路由就是指:url的请求！

index.js:

import Vue from 'vue'
//导入路由
import Router from 'vue-router'
//导入组件
import main from './../components/Main'
import content from './../components/Content'

//配置路由
Vue.use(Router)

//配置路径
export default new Router({
  routes: [
    {
      path: '/main',
      name: 'main',
      component: main
    },
    {
      path: '/content',
      name: 'content',
      component: content
    }
  ]
})

main.js

import Vue from 'vue'
import App from './App'
import router from './router' //导入路由，会自动扫描里面的路由配置!

Vue.config.productionTip = false


new Vue({
  el: '#app',
  router, //进行路由配置!
  components: { App },
  template: '<App/>'
})

重新创建项目梳理:

#1.创建工程指令全部选No:
vue init webpack myvue

#2..进入创建工程目录:
cd myvue

#3.安装路由:
npm install vue-router --save-dev

#4.安装element：
npm i element-ui -S

#5.安装SASS加载器: 
cnpm install sass-loader node-sass --save-dev

#6.执行安装依赖环境
npm install

#7.启动测试:
npm run dev