Vue快速入门

最新推荐文章于 2024-09-23 22:03:38 发布
最新推荐文章于 2024-09-23 22:03:38 发布
阅读量8.5k 收藏 26
点赞数 5
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43742217/article/details/121170091
版权
本文详细介绍了Vue.js的基础知识，包括如何创建第一个Vue程序、Vue的基本语法（如if判断、for循环、事件和双向绑定）、Vue组件的使用、Axios异步通信、计算属性、插槽和自定义事件等内容。此外，还提到了Vue项目的创建流程，并简要提及了Vue实战项目的部分开发步骤。
摘要由CSDN通过智能技术生成

文章目录

一、Vue快速入门

1、第一个Vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
    {{message}}
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //MODEL:数据
        data:{
            message:"hello,vue!"
        }
    });
</script>
</body>
</html>

2、Vue基本语法

2.1、if判断

div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>NO</h1>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //MODEL:数据
        data:{
            ok: true,
            type: a
        }
    });
</script>

<h1 v-if="ok">Yes</h1>
<h1 v-else>NO</h1>
<h1 v-else-if ="type='a'">a</h1>```

2.2、for循环

<div id="app">
    <li v-for="item in items">
        {{item.message}}
    </li>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //MODEL:数据
        data:{
            items:[
                {message: '狂神说Java'},
                {message: '狂神前端'}
            ]
        }
    });
</script>

<li v-for="item in items">
{{item.message}}
</li>

2.3、事件

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
    <button v-on:click="vm.sayHi()">anniu</button>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        //MODEL:数据
        data:{
            message: "java"
        },
        methods:{ //方法必须定义在Vue的Methon对象中,v-on:事件
            sayHi: function (){
                alert(this.message)
            }
        }
    });
</script>
</body>
</html>

2.4、事件双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层-->
<div id="app">
   输入文本： <input type="text" v-model="message">{{message}}
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        }
    });
</script>
</body>
</html>

绑定单选框

<!--view层-->
<div id="app">
    <input type="radio" name="sex" value="男" v-model="message">男
    <input type="radio" name="sex" value="女" v-model="message">女
    <p>选中了谁：{{message}}</p>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        }
    });
</script>

绑定下拉框

<!--view层-->
<div id="app">
    <select v-model="message">
        <option value="" disabled>---请选择---</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>value:{{message}}</span>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:""
        }
    });
</script>

3、Vue组件

<!--view层-->
<div id="app">
    <geng v-for="item in items" v-bind:bang="item"></geng>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    Vue.component("geng",{
        props:['bang'],
        template:'<li>{{bang}}</li>'
    });
    var vm = new Vue({
        el:"#app",
        data:{
            items: ["java","linux"]
        }

    });
</script>

4、Axios异步通信

<!--v-clock：解决闪烁问题-->
    <style>
        [v-clock]{
            display: none;
        }
    </style>
</head>
<body>
<!--view层-->
<div id="app" v-clock>
    <div>{{info.name}}</div>
    <a v-bind:href="info.url">点我</a>
    <div>{{info.page}}</div>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data(){
            return{
                //请求的返回参数格式必须合适，必须和json字符串一样
                info:{
                    name:null,
                    url:null,
                    page:null
                }
            }
        },
        mounted(){ //钩子函数 链式编程
            axios.get('../data.json').then(response=>(this.info = response.data));
        }
    });
</script>

5、计算属性

<div id="app">
    <p>{{currentTime1()}}</p>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data: {
            message:"hello"
        },
        methods: {
            currentTime1: function (){
                return Date.now(); //返回一个时间戳
            }
        },
        computes:{       //计算属性 : methods,computed方法名不能重名，重名之后，只会调用methods的方法
            currentTime2:function (){
                return Date.now();
            }
        }
    });
</script>

computed是一个属性，调用时用vm.currentTime2

而methods是方法，调用时用currentTime（）

计算属性可以想象成缓存

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

6、插槽slot

<!--view层-->
<div id="app">
    <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoitems" v-bind:item="item"></todo-items>
    </todo>
</div>
<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //定义slot插槽
    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>'
    });
    var vm = new Vue({
        el:"#app",
        data:{
            title:"秦老师列表",
            todoitems:['狂神说java','狂神说前端','狂神说Linux']
        }
    });
</script>

7、自定义事件内容分发

<!--第一步：导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //定义slot插槽
    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','index'],
        template: '<li>{{index}}---{{item}}<button @click="remove">删除</button></li>',
        methods:{
            remove: function (index){
                this.$emit('remove',index)
            }
        }
    });
    var vm = new Vue({
        el:"#app",
        data:{
            title:"秦老师列表",
            todoitems:['狂神说java','狂神说前端','狂神说Linux']
        },
        methods: {
            removeItem:function (index){
                console.log("删除了"+this.todoitems[index]);
                this.todoitems.splice(index,1);    //一次删除一个元素

            }
        }
    });
</script>

8、创建vue项目

1、创建初始化项目 vue init webpack hello-vue

2、进入工程目录 cd hello-vue

3、 安装vue-router npm install vue-router --save-dev

4、安装element -ui npm i element -ui -S

5、安装依赖 npm install

6、安装 SASS 加速器 cnpm install sass-loader node-sass --save-dev

7、启动测试 npm run dev

二、Vue实战

1、项目创建

1、新建一个存放项目的文件夹

2、打开dom窗口，进入存放项目的文件夹

3、执行命令：vue create yeb(项目名称) -------版本问题，在vue3版本以下会不兼容，需安装3版本以上

4、选择router和一个默认选项

5、启动项目 cd yeb -------npm run serve

6、使用Webstorm打开创建好的项目

2、项目开发

1、安装 ----饿了么-ui

执行命令：npm i element-ui -S

2、在main.js中配置element-ui

import ElementUI from ‘element-ui’;

import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);

未完结

桃味果仁
关注
专栏目录
VUE快速入门
qq_48556559的博客
07-25 472
vue快速入门随手笔记
Vue快速入门指南
TinaCSDN的博客
11-20 642
0.学习目标 会创建Vue实例，知道Vue的常见属性 会使用Vue的生命周期的钩子函数 会使用vue常见指令 会使用vue计算属性和watch监控 会编写Vue组件 掌握组件间通信 了解vue-router使用 1.前言 前几天我们已经对后端的技术栈有了初步的了解、并且已经搭建了整个后端微服务的平台。接下来要做的事情就是功能开发了。但是没有前端页面，我们肯定无从下手，因此今天我们就要来了解一下前端的一些技术，完成前端页面搭建。 先聊一下前端开发模式的发展。 静态页面 最初的网页以HTML为主，是纯静
Vue从入门到精通：全方位掌握Vue.js开发技能
最新发布
邓邓子的博客
09-23 2434
Vue.js（通常简称为 Vue）是一套构建用户界面的渐进式JavaScript框架。与其他重量级框架不同，Vue 采用了自底向上增量开发的设计。Vue 的核心库只关注视图层，非常容易学习，并且可以轻松与其他库或已有项目集成。Vue 允许开发者自定义指令，这些指令可以在模板中以v-自定义指令名的形式使用。el.focus();});在上面的例子中，我们创建了一个名为 focus 的自定义指令，当绑定的元素被插入到 DOM 中时，该指令会自动聚焦到该元素。
大牛教你Vue 快速入门实现？新手小白速度来收藏!!!干货满满！
VUE2020的博客
08-29 689
VUE 简介 什么是VUE? VUE是一个基于MVVM设计模式的渐进式（融合）的纯前端JS框架，基于此框架我们可以让客户端的操作更简单。 如何理解框架？ 什么场景使用VUE？ 绝大多数以数据操作（增删改查）为主的PC端或移动端项目都可用vue开发比如: 美团，饿了么，淘宝，知乎，大众点评，微博… VUE 快速入门 官方js文件下载 cn.vuejs.org 业务及代码实现 构建HTML页面，呈现如下效果，并在图中点击加，减按钮时实现中间数字的变化（要求基于vue技术进行实现）。 第一步：定义HTML页面并引
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
热门推荐
CYK_byte的博客
10-16 2万+
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
Vue快速入门使用示例附录
03-10
"Vue快速入门使用示例附录"这个压缩包可能是为了帮助初学者快速理解并掌握Vue的基础操作和常见应用场景。让我们通过以下几个关键知识点来深入探讨Vue.js。 1. **安装Vue**: Vue可以通过CDN链接直接在HTML中引入，也...
vue快速入门
BeiLingI的博客
09-25 402
vue快速入门 一、第一个vue小程序 var app = new Vue({ el:"#app", data:{ message: "hello!", people: { name: "ch", age: 14 }, arr:["都江堰校区","雅安校区","成都校区"] } }) 事件渲染的基本格式 二、vue指令 v-text 设置标签文本值 <div v-text="message"></div> message中的内容会将标签中的
Vue新手入门指南（易懂）
liuzhaoh的博客
03-01 1万+
Vue.js学习心得 前言 对于一名初入编程的新手来说，JavaScript的语法偏向复杂，选择Vue库可以说是一个较为不错的体验。在很多方面，Vue简化了JavaScrip语法，并且实现数据与视图的双向绑定，达到响应式页面的目的。 1. Vue实例和模板语法 <body> <div id="app"> <p>{{message}}</p> </div> <script> new Vue({ el:'#app'
vue生命周期转
浅夏博客
10-20 336
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
Vue入门
m493096871的博客
07-02 424
npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm install --global vue-cli vue init webpack my-project cd my-project cnpm install npm run dev data 中return 的都是用到的定义的数...
vue快速入门教程
07-16
助你vue快速入门~~学完了感觉还不错____________________________________特此分享
快速入门Vue
KEN DO EVERTHING
03-14 1246
刚进公司做的第一个项目,刚好前端人手不足,需要我们后端同时兼顾前后端的工作,采用的iview UI框架,基于vue.js。 先给大家科普一下: 前端JS框架和前端UI框架的区别 前端JS框架:基于js进行一定封装与一些独立设计的框架 比如:jQuery,Vue,React,angular等等 前端UI框架:基于某种js框架进行设计的UI组件库,就是一些写好的UI组件,拿来就能用,不需要自己写css...
vue-快速入门
qq_62892403的博客
07-24 1315
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，可以高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。[10]Vue是一个独立的社区驱动的项目，它是由尤雨溪在2014年作为其个人项目创建， [4]是一个成熟的、经历了无数实战考验的框架，它是目前生产环境中使用最广泛的JavaScript框架之一，可以轻松处理大多数web。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值