Vue的学习记录，心得体会-1

最新推荐文章于 2023-12-20 14:20:36 发布

非忆

最新推荐文章于 2023-12-20 14:20:36 发布

阅读量2.6k

点赞数

本文链接：https://blog.csdn.net/Gurad233/article/details/80493704

版权

Vue是什么？

vue是如今最火的前端框架，是一套构建用户界面的框架，让程序员减少对dom的操作，更多的精力用来关注业务逻辑上，

在mvc中，主要是负责v，view(视图)这一层。

为什么要学习vue呢？

vue可以极大的提高我们的开发效率，让我们不再关注dom，而是去关注与业务逻辑，帮我们在工作中提升竞争力。

vue是一个框架，jquery是一个库，框架和库的区别是什么？

框架：有一套完整的解决方法，对于项目的入侵很大，如果想在开发中途更换框架的话，项目需要重新写。

库：提供一个小的功能板块，对项目入侵小，在开发途中，更换库的代价比较小。

MVC与MVVM的区别

MVC是站在整个程序的角度上，m module模块，进行数据的crud，v view 视图，负责页面的展示 c controller 控制器用于业务逻辑的处理。

而mvvm只是站在了前端的角度上，m module 数据， v view 视图 vm viewModule 是一个调度者，分割了m v

Vue代码与MVVM关系的对应

首先，让我们来看看vue的基本代码结构吧。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <!--在两个大括号中{
  {}}直接写入data对象中定义好的变量，可以将数据渲染输出-->
    <!--对应mvvm中的v-->
    <p>{
  {info}}</p>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

    //new出来的wm对应mvvm中的vm，是页面的调度者。
    let vm = new Vue({
        //使用元素选择器选择想要控制的区域。
        el:"#app",
        //用来定义el中需要用到的数据
        //对那个mvvm中的m
        data:{
            //通过模板字符串，可以把数据渲染到页面中，而不需要去操作dom。
            info:"你好，欢迎学习vue"

        },
        //用来定义el中需要用到的方法
        methods:{

        }
    })
</script>
</body>
</html>

m对应data中定义的变量，

v对应html代码，可通过模板字符串或者vue指令渲染数据

vm对应new Vue()这个对象，是整个mvvm的调度者

vue指令v-cloak v-text v-html

如果我们想将data中的对象渲染到页面中，可以使用{ {}}差值表达式的方法，但是差值表达式有一个缺陷，就是在第一次加载时，vue文件还没加载的时候，会直接显示{ {}}大括号和变量名，而不是要显示的数据，这时，我们只要在html的标签属性中添加一个vue指令，v-cloak即可解决差值表达式闪烁的问题。

<p v-cloak>{
  {msg}}</p>

v-text 将这个vue指令写入html标签属性中，并且赋值相应的data中的变量，也可以实现数据在页面中的渲染。

<p v-text="msg"></p>

v-html 这个命令可以将data属性中的html代码解析，如<h1>你好vue</h1>,如果用v-html解析将会是

你好vue

如果用v-text会解析为 <h1>你好vue</h1>

    <p v-html="vueHtml"></p>

差值表达式与v-text的功能很是相似，那么他们有什么区别吗？

v-text不会出现闪烁问题，并且会把标签中的内容覆盖，而{ {}}不会出现闪烁问题，而且只会替换本身的占位符。

vue指令 v-bind

在平常使用html代码时，我们会给元素添加title之类的属性，我们也想让title使用data中的变量，该怎么去做呢？

这时，我们就要使用v-bind指令了，v-bind是vue中用于绑定属性的指令，只要在需要使用变量的属性之前，加入 v-bind: 就可以使用data中的变量了。

<button v-bind:title="title">按钮</button>

注意：v-bind : 是可以简写为 :要绑定的属性即可，而且v-bind可以写合法的js表达式。

vue指令 v-on

如果我们想点击一个按钮并触发一些事件的话，就需要使用v-on命令了。

v-on:事件="定义的方法名";

定义方法，需要在vue配置对象中的methods属性中进行方法的配置。

<div id="app"><!--属性v-on:click = "click"代表点击按钮可触发相应的事件，事件自行替换，入mousermove等js中常用的事件-->
    <button v-on:click="click">按钮2</button>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{

        },//在该对象中进行方法的定义
        methods:{//在v-on:click = ""中，直接在双引号里写入方法名，就可以在点击按钮是进行方法调用。
            click:function(){
                alert("我是v-on绑定的事件");
            },
            
        }
    })
</script>

v-on:的简写方法是@

接下来我们使用学到的vue基础制作一个跑马灯的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body >
<div id="app">
    <!--这是定义的两个方法与一个字符串-->
    <button v-on:click="starts">浪起来</button>
    <button @click="stop">停</button>
    <div >
        {
  {msg}}
    </div>
</div>



<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            //我们定义的字符串
            msg:"猥琐发育，别浪",
            //这是定时器返回的对象，到时候通过这个对象进行暂停。
            dingshi:null
        },
        methods:{
            //这是开始方法，通过v-on:click = "starts"进行调用
            starts(){
                //为了不重复开启定时器，我们需要在最开始的时候进行定时器的关闭
                clearInterval(this.dingshi);
                //如果我们想在methods中的方法调用data中的属性，必须通过this.属性名
                //的方式进行调用，因为定时器内的this与外部this不同，所以我们需要在外
                //部进行this的传递。
                //还有一个办法，就是可以通过es6的箭头函数代替function函数。达到内外this一致
                let _this = this;
                this.dingshi = setInterval(function () {
                    //将字符串的第一位取出，然后方法最后一位，并且重新赋值给该字符串
                    //使用定时器重复执行，就可以达到跑马灯的效果。
                    let head = _this.msg.substring(0,1);
                    let body = _this.msg.substring(1)

最低0.47元/天解锁文章

非忆

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
Vue的学习记录，心得体会-1

Vue是什么？vue是如今最火的前端框架，是一套构建用户界面的框架，让程序员减少对dom的操作，更多的精力用来关注业务逻辑上，在mvc中，主要是负责v，view(视图)这一层。为什么要学习vue呢？vue可以极大的提高我们的开发效率，让我们不再关注dom，而是去关注与业务逻辑，帮我们在工作中提升竞争力。vue是一个框架，jquery是一个库，框架和库的区别是什么？框架：有一套完整的解决方法，对于项...
复制链接

扫一扫