• Vue(贰)

    目录

    7.Axios

    8.计算属性

    9.slot插槽

    10.自定义事件

    11.第一个vue-cli程序

    7.Axios

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

    1. {
    2.   "sites": [
    3.     { "name":"菜鸟教程" , "url":"www.runoob.com" },
    4.     { "name":"google" , "url":"www.google.com" },
    5.     { "name":"微博" , "url":"www.weibo.com" }
    6.   ]
    7. }

    使用axios进行获取:

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8.  
    9. <div id="vue">
    10. {{info.sites}}--{{info.sites[0]}}
    11.  
    12.     <li v-for="site in info.sites">
    13.         {{site}}
    14.     </li>
    15. </div>
    16.  
    17. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    18. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    19. <script>
    20.     var mv=new Vue({
    21.         el:"#vue",
    22.         data(){
    23.             return{
    24.                 info:{
    25.                     sites:[
    26.                         { name: null,  url: null},
    27.                         { name: null , url: null},
    28.                         { name: null,  url: null}
    29.                     ]
    30.                 }
    31.             }
    32.         },
    33.         //勾子函数 链式编程 ES6新特性
    34.         mounted(){
    35.             axios.get('../data.json').then(response=>(this.info=response.data));
    36.         }
    37.     })
    38. </script>
    39. </body>
    40. </html>

    8.计算属性

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

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8.  
    9. <div id="app">
    10. {{currentTime()}}
    11. </div>
    12.  
    13. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    14. <script>
    15.     var app = new Vue({
    16.         el:"#app",
    17.         methods:{
    18.             currentTime1:function (){
    19.                 return new Date().getTime();
    20.             }
    21.         },
    22.         computed:{
    23.             currentTime2:function (){
    24.                 return new Date().getTime();
    25.             }
    26.         }
    27.     });
    28. </script>
    29. </body>
    30. </html>

    9.slot插槽

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8.  
    9. <div id="app">
    10.  
    11.     <todo>
    12.         <todo-title slot="todo-title" :title="title"></todo-title>
    13.         <todo-items slot="todo-items" v-for="intm in todoItems" :item="intm"></todo-items>
    14.     </todo>
    15.  
    16. </div>
    17.  
    18. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    19. <script>
    20.     Vue.component("todo", {
    21.         template: "<div>\
    22.                         <slot name='todo-title'></slot>\
    23.                         <ul>\
    24.                             <slot name='todo-items'></slot>\
    25.                         </ul>\
    26.                     </div>"
    27.     })
    28.  
    29.     Vue.component("todo-title", {
    30.         props:["title"],
    31.         template: "<h1>{{title}}</h1>"
    32.     })
    33.  
    34.     Vue.component("todo-items", {
    35.         props:["item"],
    36.         template: "<li>{{item}}</li>"
    37.     })
    38.  
    39.     var app = new Vue({
    40.         el: "#app",
    41.         data:{
    42.             title:"小步列表",
    43.             todoItems:['小步说java','小步说前端','小步说Linux']
    44.         }
    45.     });
    46. </script>
    47. </body>
    48. </html>

    10.自定义事件

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6. </head>
    7. <body>
    8.  
    9. <div id="app">
    10.  
    11.     <todo>
    12.         <todo-title slot="todo-title" :title="title"></todo-title>
    13.         <todo-items slot="todo-items" v-for="(intm,index) in todoItems" :item="intm" :index="index" @remove="remove2(index)" :key="index"></todo-items>
    14.     </todo>
    15.  
    16. </div>
    17.  
    18. <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    19. <script>
    20.     Vue.component("todo", {
    21.         template: "<div>\
    22.                         <slot name='todo-title'></slot>\
    23.                         <ul>\
    24.                             <slot name='todo-items'></slot>\
    25.                         </ul>\
    26.                     </div>"
    27.     })
    28.  
    29.     Vue.component("todo-title", {
    30.         props:["title"],
    31.         template: "<h1>{{title}}</h1>"
    32.     })
    33.  
    34.     Vue.component("todo-items", {
    35.         props:["item",'index'],
    36.         template: "<li>{{item}} <button @click='remove(index)'>删除</button></li>",
    37.         methods:{
    38.             remove:function (index){
    39.                 this.$emit('remove',index);
    40.             }
    41.         }
    42.     })
    43.  
    44.     var vm2 = new Vue({
    45.         el: "#app",
    46.         data:{
    47.             title:"小步列表",
    48.             todoItems:['小步说java','小步说前端','小步说Linux']
    49.         },
    50.         methods:{
    51.             remove2:function (index){
    52.                 console.log("删除了"+this.todoItems[index])
    53.                 this.todoItems.splice(index,1);
    54.             }
    55.         }
    56.     });
    57. </script>
    58. </body>
    59. </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程序！

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

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

    ​

     效果:

    1. 安装打包工具:cnpm install webpack -g
    2.  
    3. 安装客户端:cnpm install webpack-cli -g
    4.  
    5. 安装axios: cnpm install axios

    配置:

             创建webpack.config.js配置文件

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

    创建webpack(文件夹)项目:

     webpack.config.js:

    1. module.exports={
    2.     //解析那个文件
    3.     entry:'./modules/main.js',
    4.     output:{
    5.         //输出到哪里
    6.         filename:"./js/bundle.js"
    7.     }
    8. };

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

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

     main.js(启动程序):

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

    使用命令进行打包:

    1. 一次打包:webpack
    2. 监听打包:webpack --watch

    安装Vuerouter 

    cnpm install vue-router --save-dev

    配置路由:

     

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

     

     index.js:

    1. import Vue from 'vue'
    2. //导入路由
    3. import Router from 'vue-router'
    4. //导入组件
    5. import main from './../components/Main'
    6. import content from './../components/Content'
    7.  
    8. //配置路由
    9. Vue.use(Router)
    10.  
    11. //配置路径
    12. export default new Router({
    13.   routes: [
    14.     {
    15.       path: '/main',
    16.       name: 'main',
    17.       component: main
    18.     },
    19.     {
    20.       path: '/content',
    21.       name: 'content',
    22.       component: content
    23.     }
    24.   ]
    25. })

    main.js 

    1. import Vue from 'vue'
    2. import App from './App'
    3. import router from './router' //导入路由，会自动扫描里面的路由配置!
    4.  
    5. Vue.config.productionTip = false
    6.  
    7.  
    8. new Vue({
    9.   el: '#app',
    10.   router, //进行路由配置!
    11.   components: { App },
    12.   template: '<App/>'
    13. })

    重新创建项目梳理:

    1. #1.创建工程指令全部选No:
    2. vue init webpack myvue
    3.  
    4. #2..进入创建工程目录:
    5. cd myvue
    6.  
    7. #3.安装路由:
    8. npm install vue-router --save-dev
    9.  
    10. #4.安装element：
    11. npm i element-ui -S
    12.  
    13. #5.安装SASS加载器: 
    14. cnpm install sass-loader node-sass --save-dev
    15.  
    16. #6.执行安装依赖环境
    17. npm install
    18.  
    19. #7.启动测试:
    20. npm run dev

  • 相关阅读:
    AVM 环视拼接方法介绍
    专访乐凯撒CTO黄道泳：看一盒披萨背后的技术之路
    YB2502单片集成带可设定输出电流开关型降压转换器
    Exception | ShardingSphere | ShardingSphere引发的IndexOutOfBoundsException
    转转前端周刊第八十一期
    windows 配置anaconda3环境变量教程
    【SpringMVC学习笔记】
    【图论】Floyd
    阿里云云原生一体化数仓 — 分析服务一体化新能力解读
    使用Go的encoding/asn1库处理复杂数据：技巧与最佳实践
  • 原文地址：https://blog.csdn.net/abc98526/article/details/124883135