Vue一周学习总结（一）

最新推荐文章于 2021-06-15 21:20:05 发布
最新推荐文章于 2021-06-15 21:20:05 发布
阅读量513 收藏
点赞数
文章标签： 学习 web Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq139473/article/details/95888927
版权

动画（transtion）

1.Vue自带的动画效果，第一种是最普通的隐藏与现实，也称为无动画效果

      <h1 v-show = flag>这是无动画效果 </h1>
		 <input type="button" value="切换" @click = "change()">
     	
    	  methods: {
           change(){
                this.flag = !this.flag
            }

2.第二种是transiton设置动画效果

	<style>
	.my-enter,.my-leave.to{
	transform:translate(100px,100px)//xy轴各100px;
	color:red;
	}
	.my-enter-active,.my-leave.active{
	transtion:all 1s ease
	}
	</style>
	 
	<input type="button" value="切换" @click = "change()">
	<transiton name="my">
	<h1 v-show = flag>这是有动画效果 </h1>
	</transiton>


	 methods: {
           change(){
                this.flag = !this.flag
            }

Vue的组件

Vue的组件 ：
组件的出现,是为了拆分Vue实例的代码里的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；
组件化： 是从UI界面的角度进行划分的，前端的组件化，方便UI组件的重用

组件的注意事项

如果使用驼峰命名，在 引用组件的时候，需要把大写的驼峰改成小写的字母，同时，两个单词之间要用 - 来连接
如果不适用驼峰，则直接使用
组件可以有自己的data，但是组件的data和实例的data有点不一样，实例中的data可以为一个对象，但是组件中的data必须是一个方法；
组件中的data除了必须为一个方法之外，这个方法内部还必须返回一个对象才可以
组件中的data数据，使用方式和实例中的data使用方式完全一样

定义组件的方法：

	<!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>Document</title>
</head>

<body>
    <div id="app">
        <demo></demo>
        <demo2></demo2>
        <demo3></demo3>
    </div>
</body>
<template id="demo3">
    <h1>这是另外一种方法定义的一个全局组件</h1> <!-- 这是另外一种全局组件的定义方式 -->

</template>

<script src="../lib/vue-2.4.0.js"></script>
<script>
    Vue.component('demo', { //这是全局组件的定义
        template: '<h1>这是一个全局组件</h1>'
    })
    Vue.component('demo3', {
        template: '#demo3'
    })
    new Vue({
        el: '#app',
        data() {
            return {

            }
        },
        methods: {

        },
        components: {
            'demo2': { //私有组件的定义
                template: '<h1>这是一个私有组件</h1>'
            }
        }
    })
</script>

</html>

父子组件的的传值

<!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>Document</title>
</head>

<body>
    <div id="app">
        <demo :parentmsg="msg"></demo>
    </div>
</body>
<script src="../lib/vue-2.4.0.js"></script>
<script>
    Vue.component('demo', {
        props: ['parentmsg'],
        template: '<h1 @click="change">{{parentmsg}}</h1>',
        methods: {
            change() {
                this.parentmsg = '修改后的父组件'
            }
        },
    })

    new Vue({
        el: '#app',
        data() {
            return {
                msg: "这是父组件"
            }
        },
        methods: {

        },

    })
</script>
</html>

父子组件的方法传递

<!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>Document</title>
</head>

<body>
    <div id="app">
        <demo @change="parentmsg"></demo>
    </div>
</body>
<script src="../lib/vue-2.4.0.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {}
        },
        methods: {
            parentmsg(msg) {
                alert(msg)
            }
        },
        components: {
            demo: {
                template: '<input type="button" value="父组件给子组件传递方法" @click="myclick">',
                data() {
                    return {
                        msg: "这是传递过后的方法"
                    }
                },
                methods: {
                    myclick() {
                        this.$emit('change', this.msg)
                    }
                },
            }
        }
    })
</script>

</html>

使用component在组件之间的切换

<!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>Document</title>
</head>

<body>
    <div id="app">
        <button @click="comName='login'">登陆</button>
        <button @click="comName='registered'">注册</button>
        <component :is="comName"></component>
    </div>

</body>
<script src="../lib/vue-2.4.0.js"></script>
<script>
    Vue.component('login', {
        template: "<h1>这是{{msg}}</h1>",
        data() {
            return {
                msg: "登陆"
            }
        },
    })
    Vue.component('registered', {
        template: "<h1>这是{{msg}}</h1>",
        data() {
            return {
                msg: '注册'
            }
        },
    })
    new Vue({
        el: '#app',
        data() {
            return {
                comName: 'login'
            }
        },
        methods: {}

    })
</script>

</html>

组件案例，发表评论功能的实现

<!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>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap.css">
</head>

<body>
    <div id="app" v-cloak>
        <combox @func="getlist"></combox>
        <ul class="list-group">
            <li class="list-group-item" v-for="item in list">
                <span class="badge">发布者：{{item.user}}</span>
                {{item.content}}
            </li>
        </ul>
    </div>

    <template id="com-box">
        <div>
            <input placeholder="发布者姓名" v-model="user">
            <input placeholder="请输入发布内容" v-model="content">
            <input type="button" value="发布" @click="add">
        </div>
    </template>
</body>
<script src="../lib/vue-2.4.0.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                list: []
            }
        },
        methods: {
            getlist() {
                let p1 = localStorage.getItem("user")
                let p2 = localStorage.getItem("content")
                let addlist = {
                    user: p1,
                    content: p2
                }
                this.list.push(addlist)
                window.localStorage.setItem("list-json", JSON.stringify(this.list))
            }

        },
        created() {
            if (window.localStorage.getItem("list-json")) {
                this.list = JSON.parse(localStorage.getItem("list-json"))
            }
        },
        components: {
            combox: {
                template: '#com-box',
                data() {
                    return {
                        user: "",
                        content: ""
                    }
                },
                methods: {
                    add() {
                        localStorage.setItem("user", this.user)
                        localStorage.setItem("content", this.content)
                        this.$emit('func')
                    }
                },
            }
        }
    })
</script>

</html>
再睡一夏_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
第十四周周记——Vue学习
weixin_54826115的博客
06-10 355
Vue学习 1.监听属性 在Vue中，我们可以使用监听属性 watch 来响应数据的变化。那如何使用它呢？我们可以看看下面的例子。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script&gt
Vue大概多久能学会
weixin_42610671的博客
01-03 3764
学习 Vue 的时间可能因人而异。如果您已经具备了 JavaScript 和 HTML/CSS 的基础知识，那么学习 Vue 可能会快一些。通常，如果您每天至少花几小时来学习 Vue，那么大概一周左右就可以学会 Vue 的基本知识。然后，您还可以继续学习更高级的主题，比如状态管理、路由、服务端渲染等。这些主题可能需要更多的时间才能完全掌握。 ...
学习vue一星期感言
飞鸿的博客
07-26 1万+
学习vue已经一星期了，感觉完全颠覆了之前对前端的看法。之前只是觉得前端工作不过是将页面写好后，丢给后端人员填数据，工作量还是蛮轻的，现在的工作是要前端工程化，与后端分离，你是你，我是我，咋们彼此无关。前端弄好了，就是一个项目，用mock测试以下，就是一个工程，可以说用不着后端。哈哈，但是工作量也多起来了，要打包，要优化。之前js,jq是对dom进行操作，现在的vue项目是对数据进行操作，我老是喜...
如何在5天内学会Vue？聊聊我的学习方法！
热门推荐
macrozheng的专栏
04-20 1万+
先说下为什么用学习Vue这个例子来谈我的学习方法？其实关注我的朋友很多都是从我的Github上面来的，大多数都是Java后端开发者，Vue作为一种前端技术，掌握的人并不多。所以使用Vue...
[ 01 ] 学习vue只需要1天
H5移动开发
12-20 5879
一、认识vue new Vue({ el:'#box', data:{ msg:'welcome vue' } });
vue基本内容总结学习
07-01
包含路由，组件传值，路由对象，路由守卫等
vue基础学习总结经验
04-26
vue基础学习总结经验，让你可以更轻松的了解并快速的掌握vue入门
前端vue本周个人学习成果
04-20
vue
一个基于vue的个人学习资源
最新发布
06-08
一个基于vue的个人学习资源 一个基于vue的个人学习资源 一个基于vue的个人学习资源 一个基于vue的个人学习资源 一个基于vue的个人学习资源 一个基于vue的个人学习资源 一个基于vue的个人学习资源 一个基于vue的个人...
vue 点击按钮增加一行的方法
10-18
今天小编就为大家分享一篇vue 点击按钮增加一行的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue学习日记（一）
SUN_FLOWER__的博客
05-31 470
最开始接触Vue可以先不使用脚手架工具。首先从官网下载开发版本的vue.js。保存命名为vue.js创建一个HTML文档，这里命名为vue1.html。在头文件的下边引入js文件。&lt;script src="./vue.js"&gt;&lt;/script&gt;知识点一  挂载点 模板 实例声明一个vue实例，使用 new Vue({})来实现。el表示的是这个实例指的是哪一个元素。其所对应...
Vue开发学习-周报1-基础内容学习
qq_42497807的博客
01-18 512
完成情况 Vue实例 Vue语法指令 Vue组件 Vue生命周期（后期开发会使用） vue中的css样式绑定 Vue条件判断渲染 列表渲染 父子组件通信 插槽 重点特殊内容记录 Vue实例的特殊问题 计算属性computed，watch监听器都会自动缓存，提高性能 数据传递问题 子父组件通信，子向父发送通过emit进行发送，在父组件中用@监听，可以带回返回的数据 父向子发送可...
Vue.use 写多个_做好4件事，周记不难写
weixin_39953740的博客
10-30 73
周记是用文字记录的一周生活。一周中，自己的学习、生活中发生的有趣的事，遇到的印象深刻的人，有意思的物品，优美的景色，读书或看电影后的想法等，都是周记可以记录的内容。写好周记要做好四件事：一是充分思考，找准写作内容，要通过回忆、梳理，找到7天中最有意思、印象最深的事，作为周记主要写作内容；二是一事一记，要学会裁剪材料，明确主题，不写流水帐；三是重视结构，做好段落安排，用心写好开头、结尾，把周记当成作...
20190622 前端开发周报
前端开发博客
06-22 557
给「前端开发博客」加星标，每天打卡学习长按二维码即可识别“进入网页”查看哟~1、送你43道JavaScript面试题导读 这两天的 GitHub Trending repositor...
前端周记20190211-20190215
weixin_34343308的博客
02-15 231
1、静态公有方法 (function(){ var privateVariable=10; function privateFunction(){ return false; } MyObject=function(){} MyObject.prototype.publicMetho...
第十三周学习周记——初学Vue
jix_Hu的博客
06-15 319
第十三周学习周记前言一、Vue简介二、Vue起步实例三、Vue模板语法1. 插值1. 文本2. HTML3. 属性2. 指令3. 用户输入4. 过滤器总结 前言 在上一周学习了AJAX后，这一周将学习Vue。 一、Vue简介 Vue是一套构建用户界面的渐进式框架，只关注视图层， 采用自底向上增量开发的设计，其目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。 实例： 代码： <!DOCTYPE html> <html> <head> <meta c
Vue学习日记01
深海如梦的博客
08-09 211
记录下学习Vue的过程，加深印象。 什么是Vue？ vue是一个轻量级框架，与其他重量级的框架不同的是，vue采用自底向上增量开发的设计。使用vue只需要关注视图层，不过使用起来让我感觉最不错的是vue的响应式数据绑定和组合视图组件。 vue.js的使用？ vue.js的开发环境我使用的是webstrom。vue的环境搭建首先要安装node，借助node里面的npm来安装需要的依赖等等，网上教程很...
我的vue学习日记（一）——后台管理系统（vue+vuex+axios+iview+router）
你好！刘斩仙
08-01 8522
效果如图： 介绍： 1.创建vue项目 //桌面打开命令窗口 npm和cnpm都行，建议cnpm快很多，还不容易出错（前提是你安装了淘宝镜像cnpm） cnpm install -g vue-cli //建好了，cd..到work文件夹（我的是work） vue init webpack Vue-Project //Vue-Project是项目名字（work文件夹下执行） ...
第十四周学习周记——进一步学习Vue
jix_Hu的博客
06-15 261
第十四周学习周记前言一、Vue条件语句二、Vue循环语句三、Vue样式绑定1. Vue class2. class属性绑定3. Vue style（内联样式）四、Vue事件处理器1. 实例2. 事件修饰符3. 按键修饰符总结 前言 在上一周初步学习了Vue的基础知识后，这一周将进一步学习Vue。 一、Vue条件语句 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>V
vue日历插件折叠成一周
05-25
您可以使用以下步骤将Vue日历插件折叠成一周： 1. 在Vue组件中，创建一个变量来控制日历是否应该显示为一周或完整月份： ``` data() { return { isWeekView: true, ... } } ``` 2. 在Vue模板中，添加一个按钮...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值