Vue

最新推荐文章于 2022-05-16 22:45:10 发布

Mls_Lucky

最新推荐文章于 2022-05-16 22:45:10 发布

阅读量182

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_45632660/article/details/107941975

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Vue

UI框架

Ant-Design: 阿里巴巴出品,基于React的UI框架
ElementUI、iview、ice: 饿了么出品,基于Vue的UI框架
Bootstrap: Twitter 推出的一个用于前端开发的开源工具包
AmazeUI: 又叫"妹子 UI"，一款HTML5跨屏前端框架

第一个Vue程序

创建用HTML文件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

导入Vue CDN

开发版：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产版：<script src="https://cdn.jsdelivr.net/npm/vue"></script>

编写程序HelloWorld

# el 元素绑定 选择器
# data 数据
# {{message}} 通过属性名拿到属性值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{message}}</p>
  </div>
  <script>
    const vm =  new Vue({
      el: '#app',
      data: {
        message: 'HelloWorld'
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

Vue基本语法

v-bind

# v-bind 相当于{{}}
# v-bind 缩写 :
# v-bind 可以读取js里面的数据
# 如果不加v-bind那么title里面的message只是一个普通的字符串,加上了v-bind就是相当于{{message}}通过对应的属性名读取属性值.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p :title="message">哈哈</p>
  </div>
  <script>
    const vm =  new Vue({
      el: '#app',
      data: {
        message: 'HelloWorld'
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

if elseif else

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p v-if="age>20">A</p>
    <p v-else-if="age<=20 && age>0">B</p>
   <p v-else>C</p>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        age: 20,
      }
    })
  </script>
</body>
</html>

for

# item 数组用[] 对象{}
# in 遍历
# items 遍历完的数组
# items.name 获取具体属性的内容
# index 下标
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(items,index) in item">{{index}}----{{items.name}}----{{items.age}}	</li>
    </ul>
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        item: [
          {'name':'张三','age': 20},
          {'name':'李四','age': 25},
          {'name':'王五','age': 22}
        ]
      }
    })
  </script>
</body>
</html>

在这里插入图片描述

v-on

# v-on 绑定事件 缩写@
# methods 里面定义的都是方法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
   <button type="button" @click="fun1">点击</button>
  </div>
  <script>
    const vm =new Vue({
      el: '#app',
      data: {
       
      },
      methods: {
        //第一种写法
        fun1(){
          alert("你好")
        }
        //第二种写法
        fun1: function(){
          alert("你好")
   	   }  
      }
    })
  </script>
</body>
</html>

Vue双向绑定

# v-model 双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
   <input type="text" v-model="message"></input><br/>
   {{message}}
  </div>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
       message: 'HelloWorld'
      },
    })
  </script>
</body>
</html>

在这里插入图片描述

Vue组件

# component 组件
# template 模板
# yuxiang标签 代替模板里面的标签
# props 接收属性参数
# v-bind 动态的向props传递参数
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <yuxiang v-for="item in items" v-bind:yu="item"></yuxiang>
  </div>
  <script>
    // 定义一个组件
    Vue.component('yuxiang', {
    props: ['yu']  ,
    template: '<li>{{yu}}</li>'
  })
    const vm =  new Vue({
      el: '#app',
      data: {
        items: ['Java','前端','后端']
      },
    })
  </script>
</body>
</html>

在这里插入图片描述

Axios异步通信

axios官方文档:http://www.axios-js.com/zh-cn/docs/

导入axios CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

手动创建一个json文件

{
    "sucess": true,
    "code": 2000,
    "message": "成功",
    "data": {
        "items": [
            {"name":"张三"},
            {"name":"李四"},
            {"name":"王五"}
        ]
    }
}

编写程序

# created(){} 页面渲染之前执行
# axios.get("请求接口路径").then(response 箭头函数).catch(response 箭头函数)
# //response就是接收data.json里面的参数,名字随便定义
# then() 请求成功执行
# catch() 请求失败执行
# this 匿名Vue对象
# 增加的知识 mounted 钩子函数,页面直接运行axios,不用调用方法执行.


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <li v-for="user in userList">{{user.name}}</li>
  </div>
  <script>
    const vm =  new Vue({
      el: '#app',
      data: {
        userList:[] //定义变量，值空数组
      },
      created () { //页面渲染之前执行
        //调用定义的方法
        this.getUserList();
      },
      methods: { //编写具体的方法
        //创建方法 查询所有的用户数据
        getUserList(){
          //使用axios发送ajax请求
          //axios.get("请求接口路径").then(箭头函数).catch(箭头函数)
          axios.get("data.json")
            .then(response => { //response就是接收data.json里面的参数,名字随便定义
               console.log(response);
               this.userList= response.data.data.items;
            })//请求成功执行
            .catch(error =>{    
              alert("请求失败")
            })//请求失败执行
        }
      }
    
    })
  </script>
</body>
</html>

在这里插入图片描述

Computed计算属性

# computed 调用里面的方法不需要加括号 因为里面是属性
# 当里面数据刷新就会从新计算
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
   <p>{{createTime}}</p>
  </div>
  <script>
    const vm =  new Vue({
      el: '#app',
      data: { 
  
      },
     computed: {
       createTime: function(){
         return  Date.now();
       }
     }
    })
  </script>
</body>
</html>

结论：

调用方法时，每次都需要进行计算,既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢? 此时就可以考虑将这个结果缓存起来,采用计算属性可以很方便的做到这一点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。

插槽slot

缩写：#
预期：可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。
参数：插槽名 (可选，默认值是 default)
限用于
- <template>
- 组件 (对于一个单独的带 prop 的默认插槽)
用法：
提供具名插槽或需要接收 prop 的插槽。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <todo>
      <todo-title slot="todo-title" :title="title"></todo-title>
      <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
    </todo>
  </div>
  <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>'
    });
    const vm =  new Vue({
      el: '#app',
      data: { 
        title: "秦老师系列课程",
        todoItems: ['狂神说Java','狂神说前端','狂神说Linux']
      },
     
    })
  </script>
</body>
</html>

在这里插入图片描述

Webpack

什么是Webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。
在这里插入图片描述

Webpack安装

1.全局安装

npm install -g webpack webpack-cli

2.安装后查看版本号

webpack -v

配置

创建 webpack.config.js 配置文件

entry: 入口文件,指定WebPack7用哪个文件作为项目的入口
output: 输出,指定WebPack把处理完成文件放置到指定路径
module: 模块,用于处理各种类型的文件
plugins: 插件，如: 热更新、代码重用等
resolve: 设置路径指向
watch: 监听,用于设置文件改动后直接打包

使用webpack

webpcak打包js

创建项目
在这里插入图片描述

创建一个名为modules的目录，用于放置JS 模块等资源文件
在这里插入图片描述

在modules下创建模块文件,如hello.js,用于编写JS模块相关代码

//暴露一个方法
exports.sayhi = function () {
    document.write("你好");//浏览器打开
}

在modules下创建一个名为main.js的入口文件用于打包时设置entry属性

//引入方法
var hello = require("./hello.js");
hello.sayhi()

在项目目录下创建webpack.config.js配置文件使用webpack命令打包

const path = require("path"); //Node.js内置模块
module.exports = {
    entry: './modules/main.js', //配置入口文件
    output: {
        path: path.resolve(__dirname, './dist'), //输出路径，__dirname：当前文件所在路径
        filename: './js/bundle.js' //输出文件
    }
}

在这里插入图片描述

使用打包好的bundle.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="./dist/js/bundle.js"></script>
</body>
</html>

在这里插入图片描述

webpack打包CSS

1、安装style-loader和 css-loader

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器。

首先我们需要安装相关Loader插件，css-loader 是将 css 装载到 javascript；style-loader 是让 javascript 认识css

npm install --save-dev style-loader css-loader

2、修改webpack.config.js

const path = require("path"); //Node.js内置模块
module.exports = {
    //...,
    output:{},
    module: {
        rules: [  
            {  
                test: /\.css$/,    //打包规则应用到以css结尾的文件上
                use: ['style-loader', 'css-loader']
            }  
        ]  
    }
}

3、在src文件夹创建style.css

body{
    background:pink;
}

4、修改main.js

在第一行引入style.css

require('./style.css');

5、浏览器中查看index.html

BootCND：https://www.bootcdn.cn/

Mls_Lucky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue

VueUI框架Ant-Design: 阿里巴巴出品,基于React的UI框架ElementUI、iview、ice: 饿了么出品,基于Vue的UI框架Bootstrap: Twitter 推出的一个用于前端开发的开源工具包AmazeUI: 又叫"妹子 UI"，一款HTML5跨屏前端框架第一个Vue程序创建用HTML文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
复制链接

扫一扫

专栏目录