开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue学习 -> 正文阅读

[JavaScript知识库]Vue学习

Vue学习01

MVVM

model view viewmodel

第一个VUE程序（声明式渲染-将数据绑定到DOM节点）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>

<div id="app">

    {{message}}

</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"hello,vue"
        }
    });
</script>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>

<div id="app">

    //title属性是把鼠标放上去会显示这个title
    <span v-bind:title="message">
        你好世界
    </span>

</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"hello,vue"
        }
    });
</script>


</body>
</html>

条件与循环（有条件的渲染）

for语句

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

<div id="app">

    <ol>
        <li v-for="item in array">
            {{item.text}}
        </li>
    </ol>

</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            array:[
                {text:"狂神说"},
                {text:"java"},
                {text:"yyds"}
            ]
        }
    });
</script>


</body>
</html>

if语句

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

<div id="app">

    <ol>
        <li v-if="message">
            你是对的
        </li>
        <li v-else>
            你是错的
        </li>
    </ol>

</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:true
        }
    });
</script>


</body>
</html>

绑定事件

v-on

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

<div id="app">


    <button v-on:click="func">
        点我
    </button>

</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"好疼"
        },
        methods:{
            func:function (event) {
                alert(this.message)
            }
        }
    });
</script>


</body>
</html>

双向绑定

前面是完成了vm到m的绑定，现在要完成m到vm的绑定
使用v-model

例子一

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

<div id="app">

    <!--将type的value值绑定到vm中的message-->
   请输入： <input type="text" v-model="message">
    {{message}}

</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"初始值"
        }
    });
</script>


</body>
</html>

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

<div id="app">

    选择题：
    <select name="" id="" v-model="value">
        <!-- 注意此处的写法，复选框的初始值为，请选择--- -->
        <option value="" disabled>请选择---</option>
        <option >A</option>
        <option >B</option>
        <option >C</option>
    </select>
    {{value}}
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            value:""
        }
    });
</script>


</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rb6FPXuv-1635250331319)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20211022204409357.png)]

组件

实现代码的重用

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

<div id="app">

    <xpc v-for="item in items" v-bind:name="item"></xpc>
</div>

<script>
    Vue.component("xpc",{
        props:["name"],
        template:'<h1>{{name}}</h1>'
    });
    var vm=new Vue({
        el:"#app",
        data:{
            items:["java","php","python"]
        }
    });
</script>

</body>
</html>

axios（对比ajax）实现异步通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../libs/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>

<div id="app">
    <div>{{info.name}}</div>
    <a v-bind:href="info.url">点我跳转</a>

</div>

<script>
    var vm=new Vue({
        el:"#app",
        data(){
            return{
                info:{
                    name:null,
                    url:null,
                    address:{
                        street:null,
                        city:null
                    }
                }
            }
        },
        mounted(){
            axios.get("../data.json").then(response=>(this.info=response.data))
        }
    });
</script>

</body>
</html>

计算属性

相当于一个缓存，对计算结果进行缓存
他是一个属性，不是一个方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>
</head>
<body>

<div id="app">

    <!--func1是调用方法，所以要加（）-->
    <p>func1:{{func1()}}</p>
    <!--func2算是属性所以不用加-->
    <p>func2:{{func2}}</p>

</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"hello,vue"
        },
        methods:{
            func1:function () {
                return Date.now()
            }
        },
        computed:{
            func2:function () {
                return Date.now()
            }
        }
    });
</script>


</body>
</html>

从图中可以看出func2函数是将时间缓存着的，只要computed里面不执行其他的语句，他就不会刷新缓存

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lxfWm0HL-1635250331326)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20211025110948484.png)]

插槽（slot）

v-on绑定事件可以简写成@
v-bind 给组件绑定参数可以简写成：

自定义事件内容分发

第一个vue-cli程序

安装npm淘宝镜像加速器

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue-cli

npm install -g @vue/cli
npm install -g @vue/cli --registry=https://registry.npm.taobao.org

创建项目

vue create my-project项目名称
//初始化并运行
cd my-project
npm run serve

如果要用webpack创建项目

//首先要安装这个
npm install -g @vue/cli-init
//创建项目
vue init webpack my-project2项目名称
//初始化并运行
cd my-project2
npm install
npm run dev

webpack的安装和使用

npm直接安装即可

npm install webpack -g
npm install webpack-cli -g
//检查版本
webpack -v
webpack-cli -v

使用webpack打包，最重要的是要配置这个js文件，注意文件名必须是webpack.config.js

module.exports = {
    entry: './modules/index.js', // 入口，表示，要使用 webpack 打包哪个文件
    output: { // 输出文件相关的配置
        filename: "./js/bundle.js" // 这是指定 输出的文件的名称
    },
    mode:"none"
}; // 添加 ；

写好配置文件后直接在terminal使用webpack打包即可

修改localhost端口号

直接在config目录下的index.js下面修改即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LL3WRWMI-1635250331329)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20211026141331202.png)]

vue-router

安装 注意：这个是每个项目都需要安装一次的，需要进项目安装

npm install vue-router --save-dev

在main.js加上router

import Vue from 'vue'
import App from './App'
//只需要配置router路径即可
import router from './router'

Vue.config.productionTip = false


new Vue({
  el: '#app',
  //这里也要加上router
  router,
  components: { App },
  template: '<App/>'
})

src目录下面新建router，然后编写index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
//使用路由
Vue.use(VueRouter)

import firstPage from '../components/First'
import contentPage from '../components/Content'
//配置导出路由
export default new VueRouter({
  routes:[
    {
       //页面路径
      path:'/first',
      name:'first',
      //相关组件
      component:firstPage,
    },
    {
      path:'/content',
      name:'content',
      component:contentPage,
    }
  ]
})

主页面编写 app.vue

<template>
  <div id="app">
    <h1>Vue-Router</h1>
    <router-link to="/first">首页</router-link>
    <router-link to="/content">内容页</router-link>
    <router-view></router-view>
  </div>
</template>

<script>


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

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

使用elementUi

安装相关插件

//安装elementUi
npm i element-ui -S
//安装sass加载器，用来加载css
cnpm install sass-loader node-sass --save-dev

在main.js引入如下

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

修改sass版本

1：先在pakage.json里面修改
2：终端先执行 npm install
3：再执行 cnpm install

消息转发和重定向

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-10-27 12:44:50 更:2021-10-27 12:46:42

360图书馆购物三丰科技阅读网日历万年历 2024年11日历

-2024/11/24 1:33:53-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码