Vue2.5入门教程

于 2021-08-14 16:01:11 发布
阅读量388 收藏
点赞数
分类专栏： 前端 文章标签： vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42148729/article/details/119702171
版权

文章目录

1、课程介绍

基础知识 > 案例实践 > TodoList > Vue-cli > TodoList

2、Vue基础语法

2-1、创建第一个Vue实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id='root'>{{msg}}</div>

    <script>
        new Vue({
            el:'#root',
            data:{
                msg:'Hi'
            }
        }) 
    </script>
</body>
</html>

2-2、挂载点，模板与实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>
<body>
    <!-- 挂载点，模板，实例之间的关系 -->
    <div id='root'></div>

    <script>
        new Vue({
            el:'#root',
            template:' <h1>Hello {{msg}}</h1>',
            data:{
                msg:'Hi'
            }
        }) 
    </script>
</body>
</html>

2-3、Vue实例中的数据，事件和方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id='root'>
        <h1>{{number}}</h1>
        <h1 v-text='msg'></h1>
        <div v-html='temp' ></div>
        <h1 v-on:click="handleClick">
            {{msg}}
        </h1>
        <h1 @click="handleClick">
            {{msg}}
        </h1>
        
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
                msg:'Hi',
                number:123,
                temp:'<h1>123</h1>'
            },
            methods: {
                handleClick(e){
                    this.msg='Vue'; 
                    console.log('handleClick',e);
                }
            },
        }) 
    </script>
</body>
</html>

2-4、Vue中属性绑定和双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id='root'>
        <h1 v-bind:title="msg">Hi</h1>
        <h1 :title="msg">Hi</h1>

        <input v-model="content" />
        <h1>{{content}}</h1>
    </div>

    <script>
        new Vue({
            el:'#root',
            data:{
                msg:'Hi',
                content:'this Vue'
            }
        }) 
    </script>
</body>
</html>

2-5、Vue中的计算属性和侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id='root'>
        姓：<input v-model='firstName' type="text" name="" id=""><br />
        名：<input v-model='lastName' type="text" name="" id="">
        <div>{{fullName}}</div>
        <h1>{{count}}</h1>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                firstName: '',
                lastName: '',
                count: 0
            },
            computed: { // 一个属性由其他属性计算而来（计算属性）
                fullName: function () {
                    return this.firstName + '' + this.lastName
                }
            },
            watch: { // 监测（计算）属性变化（侦听器）
                firstName: function () {
                    this.count++
                },
                lastName: function () {
                    this.count++
                }
            }
        })
    </script>
</body>

</html>

2-6、v-if，v-show与v-for指令

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id='root'>
        <!-- v-if 是移除DOM -->
        <div v-if="show">Hello</div>
        <!-- v-show 是display:none 频繁下 -->
        <div v-show="show">Hello</div>
        <button @click="handleClick">toogle</button>

        <ul>
            <li v-for='(item,index) of list' :key='index'>
                {{index}}--{{item}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: '#root',
            data: {
                show: true,
                list: [1, 1, 3]
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            },
        })
    </script>
</body>

</html>

3、Vue中的组件

3-1、todolist功能开发

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id='root'>
        <div>
            <input v-model="inputValue" />
            <button @click="handleSubmit">提交</button>
        </div> 
        <ul>
            <li v-for="(item,index) of list" :key="index">
                {{item}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el:'#root',
            data:{
                inputValue:'',
                list:[1,2,3]
            },
            methods: {
                handleSubmit:function(){
                    this.list.push(this.inputValue)
                    this.inputValue=''
                }
            },
        }) 
    </script>
</body>
</html>

3-2、todolist组件拆分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id='root'>
        <div>
            <input v-model="inputValue" />
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item v-for="(item,index) of list" :key="index" :content="item">
            </todo-item>
        </ul>
    </div>
    <script>

        Vue.component('todo-item', {
            props: ['content'], // 接受从外部传入的参数
            template: '<li>{{content}}</li>'
        })

        new Vue({
            el: '#root',
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                handleSubmit: function () {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            },
        })
    </script>
</body>

</html>

3-3、组件与实例的关系

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id='root'>
        <div>
            <input v-model="inputValue" />
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item v-for="(item,index) of list" :key="index" :content="item">
            </todo-item>
        </ul>
    </div>
    <script>

        Vue.component('todo-item', {
            props: ['content'], // 接受从外部传入的参数
            template: '<li @click="handleClick">{{content}}</li>',
            methods:{
                handleClick:function(){
                    console.log('handleClick',1);
                }
            }
        })

        new Vue({
            el: '#root',
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                handleSubmit: function () {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            },
        })
    </script>
</body>

</html>

3-4、实现todolist的删除功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id='root'>
        <div>
            <input v-model="inputValue" />
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <!-- :content="item" 父组件传递给子组件 -->
            <!-- @delete='handleDelete' 监听子组件的变化 -->
            <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete='handleDelete'>
            </todo-item>
        </ul>
    </div>
    <script>
     
        // 子组件 :content就是绑定了content属性
        // 父组件给子组件传递content参数，通过属性传递，通过props接收
        Vue.component('todo-item', {
            props: ['content', 'index'], // 接受从外部传入的参数
            template: '<li @click="handleClick">{{content}}</li>',
            methods: {
                handleClick: function () {
                    // console.log('handleClick',1);
                    // 子组件数据要删除，必须在父组件里面对应渲染子组件那条数据删除
                    // 子组件和父组件通信，发布订阅模式

                    // 这是子组件向外部（发布一个事件）父组件传递数据
                    this.$emit('delete', this.index)

                }
            }
        })
        // 父组件
        new Vue({
            el: '#root',
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                handleSubmit: function () {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                },
                // @delete='handleDelete' 监听子组件的变化
                handleDelete: function (e) {
                    console.log('handleDelete', e);
                    this.list.splice(e, 1);
                }
            },
        })
    </script>
</body>

</html>

4、Vue-cli的使用

4-1、vue-cli的简介与使用

脚手架

npm run serve

App.vue
<template>
    <div id="app">
        <!-- 父组件向子组件传递 -->
        <HelloWorld msg="Welcome to Your Vue.js App" />
        <div>
            <el-button>el-button</el-button>
        </div>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'

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

<style>
  
</style>

HelloWorld.vue
<template>
  <div>
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  // props: ['msg'],  // 这个是可行的
  props: { // 接收父组件传递数据参数
    msg: String  
  }
  // 跟上一节的形式不一样
	// props: ['content', 'index'], 接受从外部传入的参数
}
</script>

<style scoped>

</style>

4-2、使用vue-cli开发TodoList

App.vue
<template>
    <div id="app">
        <div>
            <el-button>el-button</el-button>
        </div>
        <!-- 父组件向子组件传递 -->
        <TodoList msg="Welcome to Your Vue.js App" />

    </div>
</template>

<script>
    // 注册组件
    import TodoList from './components/TodoList.vue'

    export default {
        name: 'app',
        components: {
            TodoList
        }
    }
</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>

TodoList.vue
<template>
    <div>
        <h1>{{ msg }}</h1>
        <div>
            <input v-model='inputValue' type="text" name="" id="">
            <button @click='handleSubmit'>提交</button>
        </div>
        <div>
            <ul>
                <TodoItem v-for='(item,index) of list' :key='index' :content='item' :index='index'
                    @delete='handleDelete'>
                </TodoItem>
            </ul>
        </div>
    </div>
</template>

<script>
    // 注册组件
    import TodoItem from './TodoItem.vue'

    export default {
        name: 'TodoList',
        components: {
            TodoItem
        },
        data() {
            return {
                inputValue: '',
                list: []
            }
        },
        methods: {
            handleSubmit() {
                this.list.push(this.inputValue);
                this.inputValue = ''
            },
            handleDelete(index) {
                this.list.splice(index, 1)
            }
        },
        // props: ['msg'],  // 这个是可行的
        props: { // 接收父组件传递数据参数
            msg: String
        }
        // 跟上一节的形式不一样
        // props: ['content', 'index'], 接受从外部传入的参数
    }
</script>

<style scoped>
    ul {
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>

TodoItem.vue
<template>
    <div>
        <span @click='handleDelete'>{{content}}</span>
    </div>
</template>

<script>
    export default {
        name: 'TodoItem',
        props: ['content', 'index'],
        methods: {
            handleDelete() {
                this.$emit('delete', this.index)
            }
        },
    }
</script>

<style scoped>
    span{
        background-color: #ff4f00;
    }
</style>

4-3、全局样式与局部样式

scoped

互联网小队
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
2019全新vue2.5核心技术全方位讲解+项目实战精讲教程
01-07
<p><img src="https://img-bss.csdnimg.cn/202102040954138683.png" alt="" /></p> <p><img src="https://img-bss.csdnimg.cn/202102040954209349.png" alt="" /></p> <p><img src="https://img-bss.csdnimg.cn/202102040954278586.png" alt="" /></p> <p><img src="https://img-bss.csdnimg.cn/202102040955285915.png" alt="" /></p> <p><img src="https://img-bss.csdnimg.cn/202102040955358827.png" alt="" /></p>
基于Vue框架开发的页面加载二维地图以及交互
weixin_44090040的博客
03-17 2501
一、在Vue项目中引入二维地图 1.切换到公司的仓库下载地图插件 npm config set registry http://nexus.toops.club/repository/npm-zui/ npm i tongmap-gl 2.在页面上加载二维地图 <template> <div style="width: 100%; height: 100%"> <!-- 加载二维地图 --> <tong-gl-map :optio
vue2.5入门 - 基础语法
zjsfdx的博客
04-22 549
1.vue基本介绍 三大主流前端框架：Angular、React、Vue 2.基础知识->案例实战->TodoList->Vue-cli->TodoList 3.创建第一个Vue实例 html lang="en"> head> meta charset="utf-8"> title>Vue入门title> script src="https://cdn.bootcss.com
Vue 不睡觉教程2 - 洋气的文件结构
weixin_33692284的博客
06-03 665
目标 书接上回，上回那个例子实在太土了。实际开发中我们不可能把整个网站的js和html全写到一个页面上。所以我们这节课的目标在于改造这个例子的文件结构，让它不那么土 Let's do it 环境参数 vue版本：2.5.16 开始改造 我们要开始改造上一节那个极土的例子，让它看起来洋气一点。很多教程上来把webpack跟vue绑在一起教，让很多原本不懂...
Vue2.5:Vue2.5入门
05-15
Vue2.5 Vue2.5入门
vue2.5快速入门源代码
09-07
对应blog源代码 vue2.5快速入门（一）：https://blog.csdn.net/zengraoli/article/details/108454543 vue2.5快速入门（二）：https://blog.csdn.net/zengraoli/article/details/108454656
2018Vue2.5最好的入门视频教程
09-10
2018年Vue Vuex MintUi ElementUi入门实战视频教程 2018年Vue2.x 5小时入门视频教程-包括Vuex、MintUi、ElementUi基础教程
Vue2.5开发去哪儿网App 从零基础入门到实战项目
04-06
Vue2.5开发去哪儿网App 从零基础入门到实战项目
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
11-29
2017年底了，总结了这一年多来的前端之路，Vue从入门到放弃，再二进宫，从 Vue1.0 持续跟踪到 Vue2.5。结合公司的一些实际项目，也封装了一些比较实用的组件。 由于现在公司管理平台主要运用Element UI，索性就结合...
vue2.5入门——3.vue-cli的使用
chinalihua的博客
05-07 1459
一、vue-cli的简介 与使用1、安装vue-clinpm install –global vue-cli vue init webpack todolist cd todolist npm run dev2、项目文件目录\index.html整个项目的html文件。<!DOCTYPE html> <html> <head> <meta charset="utf-8">
平面图转换为2.5D（三）
fmechina的博客
06-24 5465
原文发布时间：2010-06-27作者：毛毛虫这篇文章就是关于如何把这种类似3D的建筑物图层在Google Maps或Bing Maps的平台上显示。  下图显示了建筑物图层在Bing Maps中显示的情况。（图片已丢失）Google Maps对于一些城市，有它自己的类似的建筑物图层。步骤如下：首先按平面图转换为2.5D（一）中提到的方法将2D图层转换为能以3D效果显示，方法如下：    下面的方...
平面图转换为2.5D（一）
fmechina的博客
06-24 7837
原文发布时间：2010-06-26如何把平面图形转换为2.5D，也就是想展示下如何把一个2D的几何中2D的环境中显示为3D的效果。我想显示为如下效果的pdf文件（2D）：这里可以使用两种方法实现。一种方法是把平面图挤压为三维图，进行3D仿射变换，然后使用2DForcer转换器转换为2D图形就可以达到要求的效果。操作过程如下：在源数据后面添加转换器Extruder指定一定高度，如下图所示：这样就可以...
[vue]基于vue的单页面应用游戏——桌游:《乌托邦引擎》
热门推荐
身披白袍的博客
08-17 1万+
乌托邦引擎是由Nick Hayes设计的一款单人桌面游戏，玩家扮演一个科学家，探索丛林、深渊，收集材料来打造乌托邦引擎，避免星球毁灭的发生。
平面图转换为2.5D（二）
fmechina的博客
06-24 2747
原文发布时间：2010-06-26作者：毛毛虫在平面图转换为2.5D（一）中我们说了下如何在2Dpdf中显示3D效果，现在举个例子：有下面几个图层，我们想使用这几个图层生成一个地图，如下，原图层为：原图共包括四个图层，分别是道路streets（红色）、公园parks（绿色）、水体waterbodies（蓝色）和建筑物buildings（灰色）。想要达到的效果如下： （图片已丢失）对比上下两幅图，分...
[vue]基于vue的单页面应用游戏——桌游:《星期五》
身披白袍的博客
08-01 1万+
跟几个朋友摸鱼的时候弄出来的，规则按照游玩习惯做了点修改。
Vue.js 2.5新特性介绍
xiangzhihong8的专栏
10-17 1748
TypeScriptTypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。2012年十月份，微软发布了首个公开版本的TypeScript，在2013年6月19日，微软发布了TypeScript 0.9的正式版本，到目前为止，TypeScript已发展到2.x版本，相关资料可以查看W3C Type
Vue2.5笔记：Vue中的模版
weixin_34220179的博客
09-29 146
我们在上一篇说到如何把 Vue 实例中的数据显示到视图中，就会需要用到我们的模版，我们只是简单的使用了一些，模版其实还有很多其他的特性。今天我们就来看看模版的其他特性。 模版语法 Vue 中的模版是基于 HTML 的模版语法，所有的 Vue 模版都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。这也非常符合 Vue 的易用的特点减少开发者的学习成本。 在底层实现上，Vue ...
vue2.5如何使用计算属性
最新发布
12-16
在Vue2.5中，可以使用计算属性来根据已有的数据计算出新的数据。计算属性的定义方式为在Vue实例中添加一个computed属性，该属性的值为一个对象，对象中包含计算属性的名称和计算属性的函数。计算属性的函数中可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

互联网小队

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值