menu
  • 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

前端框架Vue3

武飞扬头像
AdaTina
帮助1人

一、

1、vue介绍

vue是一款敏捷开发的前端框架。

2、vue基本使用 

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Title</title>
  6.  
    <script src="vue3.js"></script>
  7.  
    </head>
  8.  
    <body>
  9.  
    <div id="app">
  10.  
    <!--事件绑定-->
  11.  
    <!--<p @click="foo">消息：{{msg}}</p>-->
  12.  
    <p>消息：{{msg}}</p>
  13.  
    <p><span v-html="link"></span></p>
  14.  
    <p></p><input type="text" v-model="msg"></p>
  15.  
    <!--单向的不会随一个改变而改变
  16.  
    <a :href="https://blog.csdn.net/tainqiuer123/article/details/link2">{{data2}}</a><input v-bind:value="link2"><input :value="data2">-->
  17.  
    <a :href="link2">{{data2}}</a><input v-model="link2"><input v-model="data2">
  18.  
    </div>
  19.  
    <script>
  20.  
    var vm=Vue.createApp({
  21.  
    data(){
  22.  
    return {
  23.  
    msg:"this is yuan",
  24.  
    x:100,
  25.  
    link:"<a target='_blank' href='http://www.百度.com'>百度</a>",
  26.  
    link2:"http://www.百度.com",
  27.  
    data2:"百度",
  28.  
    }
  29.  
    },
  30.  
    /* methods:{
  31.  
    foo(){
  32.  
    console.log(this.msg);
  33.  
    this.msg="hello tian"
  34.  
    }
  35.  
    }*/
  36.  
    }).mount("#app");
  37.  
    </script>
  38.  
    </body>
  39.  
    </html>
学新通

3、class

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Title</title>
  6.  
    <script src="vue3.js"></script>
  7.  
    <style>
  8.  
    .c1{
  9.  
    color:red;
  10.  
    }
  11.  
    .c2{
  12.  
    background: lightpink;
  13.  
    }
  14.  
    </style>
  15.  
    </head>
  16.  
    <body>
  17.  
    <div id="vm1">
  18.  
    <!--单独用法
  19.  
    <p :class="{c1:true,c2:false}">this is a test</p>-->
  20.  
    <p :class="cssObj">this is a test</p>
  21.  
    </div>
  22.  
    <script>
  23.  
    var vm1=Vue.createApp({
  24.  
    data(){
  25.  
    return{
  26.  
    cssObj:{
  27.  
    c1:true,
  28.  
    c2:false
  29.  
    }
  30.  
    }
  31.  
     
  32.  
    }
  33.  
    }
  34.  
     
  35.  
    ).mount("#vm1")
  36.  
     
  37.  
    </script>
  38.  
    </body>
  39.  
    </html>
学新通

4 、v-if\v-for\computed属性

模版内的表达式是为了简单计算，假如多次利用计算就会使框架变得特别的沉重。用于响应式设计的复杂逻辑需要使用computed属性。

method的方法没有缓存，每次调用都会再重新执行一遍；computed属性方法有缓存，只有在data值更改的时候才会重新计算，否则返回缓存值，速度相对来说computed快一些。

  1.  
    <!DOCTYPE html>
  2.  
    <html lang="en">
  3.  
    <head>
  4.  
    <meta charset="UTF-8">
  5.  
    <title>Title</title>
  6.  
    <script src="vue3.js"></script>
  7.  
    </head>
  8.  
    <body>
  9.  
    <div id="vm">
  10.  
    <table>
  11.  
    <tr>
  12.  
    <th>序号</th>
  13.  
    <th>书名</th>
  14.  
    <th>价格</th>
  15.  
    </tr>
  16.  
    <!-- 以下功能借用了computed属性，推荐这样用-->
  17.  
    <tr v-for="(book,i) in foo" >
  18.  
    <td>{{i}}</td>
  19.  
    <td>{{book["name"]}}</td>
  20.  
    <td>{{book["price"]}}</td>
  21.  
    </tr>
  22.  
    <!-- 由于if优先级比for高，因此放在一个标签里会先执行if.以下虽然能够实现功能，但是由于新建了一些tr空标签因此不推荐使用。-->
  23.  
    <!-- <tr v-for="(book,i) in books" >
  24.  
    <template v-if="book.price>1000">
  25.  
    <td>{{i}}</td>
  26.  
    <td>{{book["name"]}}</td>
  27.  
    <td>{{book["price"]}}</td>
  28.  
    </template>
  29.  
     
  30.  
    </tr>-->
  31.  
    </table>
  32.  
    </div>
  33.  
    <script>
  34.  
    var vm1=Vue.createApp({
  35.  
    data(){
  36.  
    return{
  37.  
    books:[{name:"红楼梦",price:1000},{name:"三国演义",price:1900},{name:"西游记",price:899},{name:"水浒传",price:600}],
  38.  
    }
  39.  
    },
  40.  
    computed:{
  41.  
    foo(){
  42.  
    return this.books.filter(function(item){
  43.  
    if(item.price>1000){
  44.  
    return item;
  45.  
    }
  46.  
    })
  47.  
    }
  48.  
    }
  49.  
    }).mount("#vm")
  50.  
    </script>
  51.  
    </body>
  52.  
    </html>
学新通

5、watch侦听

监听数值变化，传参会自动传两个值，分别是变化前和变化后的参数，num是属性的值

  1.  
    <p>{{num}}</p>
  2.  
     
  3.  
    watch: {
  4.  
    num: function (newval, oldval) {
  5.  
    //num发生变化的时候，要执行的代码
  6.  
    console.log(`num已经从${oldval}变成${newval}`);
  7.  
    }
  8.  
    }
  1.  
    <input type="password" :class="tips" v-model="password">
  2.  
    watch: {
  3.  
    password() {
  4.  
    if (this.password.length > 6 && this.password.length < 16) {
  5.  
    this.tips = "is_pass"
  6.  
    } else {
  7.  
    this.tips = "is_fail";
  8.  
    }
  9.  
    }
  10.  
    }

6、生命周期

beforeCreate created beforeMount mounted beforeUpdate updated

二、ajax请求

异步操作，页面只是局部更新，并不重新加载。

  1.  
    <button @click="get_weather">获取天气</button>
  2.  
    methods: {
  3.  
    get_weather() {
  4.  
    // 发送http请求获取天气
  5.  
    axios.get("http://wthrcdn.etouch.cn/weather_mini", {
  6.  
    params: {
  7.  
    city: this.city,
  8.  
    }
  9.  
    }).then(response => {
  10.  
    console.log(response.data.data.forecast);
  11.  
    this.weather_list = response.data.data.forecast;
  12.  
    }).catch(error => {
  13.  
    console.log(error);
  14.  
    })
  15.  
    },
  16.  
    showFengLi(content) {
  17.  
    return content.replaceAll("<![CDATA[", "").replaceAll("]]>", "");
  18.  
    },
  19.  
    },
  20.  
    created(){
  21.  
    this.get_weather()
  22.  
    }
学新通

三、VUE脚手架

vue/cli一个后端的程序，安装前先安装node.js否则无法安装成功。node.js建议安装10以上版本，否则可能会无法安装vue/cli4以上版本，目前使用vue3.以下是安装vue/cli最新版本的方式

npm install -g @vue/cli

安装完检测方式

vue --version

如果想要升级全局vue/cli包

npm update -g @vue/cli

2、创建项目

vue create 项目名称

3、导入组件ajax axios

在工程下的terminal执行如下命令

npm install  axios --save-dev

4、子组件传递数据给父组件

自定义事件是父组件事件

$emit(自定义事件，参数1，参数2)  

  1.  
    watch: {
  2.  
    city() {
  3.  
    alert(this.city)
  4.  
    this.$emit("getCity", this.city);
  5.  
    }
  6.  
    },

 父类：

  1.  
    <Nav @getCity="getCity"></Nav>
  2.  
    methods: {
  3.  
    getCity: function (city) {
  4.  
    console.log(city)
  5.  
    this.city = city;
  6.  
    },
  7.  
    }

5、父组件数据传递给子组件

父组件：

<Forecast :choose_city="city"></Forecast>

子组件： 

  1.  
    props: { // 接收来自父组件的数据
  2.  
    choose_city: {
  3.  
    default:"北京",
  4.  
    type: String,
  5.  
    }
  6.  
    },

6、项目打包

npm run build

在打包之后项目中出现 dist 目录，dist 目录就是 Vue脚手架项目的生产目录（直接部署目录）。

7、ant-design前端框架实现案例

  1.  
    <template>
  2.  
    <a-layout style="min-height: 100vh">
  3.  
    <a-layout-sider v-model:collapsed="collapsed" collapsible>
  4.  
    <div class="logo" />
  5.  
    <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline" v-for="menu in menu_list">
  6.  
    <a-menu-item v-if="menu.children.length===0" v-model:key="menu.id">
  7.  
    <router-link :to="menu.menu_url">
  8.  
    <pie-chart-outlined />
  9.  
    <span>{{menu.title}}</span>
  10.  
    </router-link>
  11.  
    </a-menu-item>
  12.  
    <a-sub-menu key="menu.id" v-else>
  13.  
    <template #title v-if="menu.icon=='user-outlined'">
  14.  
    <span>
  15.  
    <user-outlined />
  16.  
    <span>{{ menu.title }}</span>
  17.  
    </span>
  18.  
    </template>
  19.  
    <template #title v-else-if="menu.icon=='team-outlined'">
  20.  
    <span>
  21.  
    <team-outlined />
  22.  
    <span>{{ menu.title }}</span>
  23.  
    </span>
  24.  
    </template>
  25.  
    <template #title v-else>
  26.  
    <span>
  27.  
    <file-outlined />
  28.  
    <span>{{ menu.title }}</span>
  29.  
    </span>
  30.  
    </template>
  31.  
    <a-menu-item v-for="echild in menu.children" :key="echild.id">
  32.  
    <router-link :to="echild.menu_url">{{echild.title}}</router-link>
  33.  
    </a-menu-item>
  34.  
    </a-sub-menu>
  35.  
    </a-menu>
  36.  
    </a-layout-sider>
  37.  
    <a-layout>
  38.  
    <a-layout-header style="background: #fff; padding: 0" />
  39.  
    <a-layout-content style="margin: 0 16px">
  40.  
    <router-view/>
  41.  
    </a-layout-content>
  42.  
    <a-layout-footer style="text-align: center">
  43.  
    Ant Design ©2018 Created by Ant UED
  44.  
    </a-layout-footer>
  45.  
    </a-layout>
  46.  
    </a-layout>
  47.  
    </template>
  48.  
    <script>
  49.  
    import 'ant-design-vue/dist/antd.css';
  50.  
    import { PieChartOutlined, DesktopOutlined, UserOutlined, TeamOutlined, FileOutlined } from '@ant-design/icons-vue';
  51.  
    import { defineComponent, ref } from 'vue';
  52.  
    export default defineComponent({
  53.  
    components: {
  54.  
    PieChartOutlined,
  55.  
    DesktopOutlined,
  56.  
    UserOutlined,
  57.  
    TeamOutlined,
  58.  
    FileOutlined,
  59.  
    },
  60.  
     
  61.  
    data() {
  62.  
    return {
  63.  
    collapsed: ref(false),
  64.  
    selectedKeys: ref(['1']),
  65.  
    menu_list: [
  66.  
    {
  67.  
    id: 1, icon: 'mail', title: '展示中心', tube: '', 'menu_url': '/show', children: []
  68.  
    },
  69.  
    {
  70.  
    id: 2, icon: 'mail', title: '资产管理', 'menu_url': '/home', children: []
  71.  
    },
  72.  
    {
  73.  
    "id": 'sub1', icon: 'user-outlined', title: '入库管理', tube: '', children: [
  74.  
    {id: 4, icon: 'mail', title: '执行任务', 'menu_url': '/show'},
  75.  
    {id: 5, icon: 'mail', title: '命令管理', 'menu_url': '/home'},
  76.  
    ]
  77.  
    },
  78.  
    {
  79.  
    id: 'sub2', icon: 'team-outlined', title: '出库管理', tube: '', children: [
  80.  
    {id: 6, title: '出库主页', menu_url: '/home'},
  81.  
    {id: 7, title: '发布申请', menu_url: '/show'}
  82.  
    ]
  83.  
    },
  84.  
    {
  85.  
    id: 'sub3', icon: 'file-outlined', title: '代码发布', tube: '', children: [
  86.  
    {id: 8, title: '应用管理', menu_url: '/home'},
  87.  
    {id: 9, title: '发布申请', menu_url: '/show'}
  88.  
    ]
  89.  
    }
  90.  
    ]
  91.  
    }
  92.  
    },
  93.  
     
  94.  
    });
  95.  
    </script>
  96.  
    <style>
  97.  
    #components-layout-demo-side .logo {
  98.  
    height: 32px;
  99.  
    margin: 16px;
  100.  
    background: rgba(255, 255, 255, 0.3);
  101.  
    }
  102.  
     
  103.  
    .site-layout .site-layout-background {
  104.  
    background: #fff;
  105.  
    }
  106.  
    [data-theme='dark'] .site-layout .site-layout-background {
  107.  
    background: #141414;
  108.  
    }
  109.  
    </style>
学新通

作为联系参考，也可作为实现指南

这篇好文章是转载于：学新通技术网

  • 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
  • 本站站名： 学新通技术网
  • 本文地址： /boutique/detail/tanhggeihg
系列文章
更多 icon
同类精品
更多 icon
继续加载
友情链接: 申请要求：权重≥3，IP≥1000，内容属同类网站; 申请邮件： luke.wu●vfv.cc 友情链接交换群： 友情链接交换群
外链价格: 【首页 30/月 - 300/年】【内页 50/月 - 500/年】【全站 70/月 - 700/年】 购买外链请加QQ群： 站长交流群