VUE入门笔记

最新推荐文章于 2024-07-08 18:51:22 发布

weixin_43967401

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量160

点赞数

分类专栏：入门文章标签：前端 vue

本文链接：https://blog.csdn.net/weixin_43967401/article/details/114574154

版权

入门专栏收录该内容

4 篇文章 0 订阅

订阅专栏

VUE入门笔记

一、 Hello World

通过下面简单的html代码实现vue的第一个程序：

<!DOCTYPE html>
<html lang="en">
<head>
<!--导入vue的资源-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
<script>
<!--通过一个vue函数创建新的vue实例-->
    var app = new Vue({
        // 绑定的div元素id
        el: '#app',
        // 为对应的div元素中的属性赋值
        data: {
            message: 'Hello Vue!'
        }
    })

</script>
</body>
</html>

需要注意的是，vue的渲染是响应式的，也就是说当vue渲染的属性发生了变化，该页面就会立即作出反应。比如在上面的页面中打开控制台，输入“app.message=‘1111’ ”，这个时候页面中的显示会立马发生变化。

二、模板语法

Vue使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例数据。

2.1 属性插值

2.1.1 双大括号——字符串插值

数据绑定中最常见的形式就是使用“双大括号”的文本插值，如上面的第一个入门案例使用的就是这种方式。

<span>message:{{msg}}</span>span>

2.1.2 v-htm——html代码插值

当然，这种方式并不是每一种的情况都是适用的，它仅仅能解释成为普通的文本，而非HTML代码。如果要解释成为HTML代码，需要使用v-html指令。比如，将上面的入门案例更改为：

<!DOCTYPE html>
<html lang="en">
<head>
    <!--导入vue的资源-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <p v-html="link"></p>
</div>
<script>
    <!--通过一个vue函数创建新的vue实例-->
    var app = new Vue({
        // 绑定的div元素id
        el: '#app',
        // 对应的v-html标签发生替换
        data: {
            link: '<a href="https://www.taobao.com">taobao</a>'
        }

        //    等价与这段代码
        // data() {
        //     return {
        //         websiteTag: '<a href="https://www.taobao.com">taobao</a>'
        //     }
        // },
    })

</script>
</body>
</html>

看到上边的操作，你或许会想使用上面的方式来复合局部模板，这种想法是错误的。vue官方的教程明确提出‘组件”更适合作为可重用和可组合的基本单位

通过上面的两个例子，可以看到双大括号的方式适用于直接的标签之间的字符串替换，而v-html的方式适用于插入html代码的场景。但是对于标签中的属性两者都无能为力。这个时候需要使用v-bind指令

2.1.3 v-bind——标签属性插值

直接上例子

<!DOCTYPE html>
<html lang="en">
<head>
    <!--导入vue的资源-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <a v-bind:href="link">taobao</a>
</div>
<script>
    <!--通过一个vue函数创建新的vue实例-->
    var app = new Vue({
        // 绑定的div元素id
        el: '#app',
        // 对应的v-html标签发生替换
        data: {
            link: "https://www.taobao.com"
        }
    })

</script>
</body>
</html>

当然，v-bind的方式不止于对一个属性赋值，还可以对v-bind中包含的布尔属性，数组，对象，样式以及它们之间的组合使用。部分代码如下展示：

# 对象
<ul class="box" :class="classObject">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>

var vm= new Vue({
    el:‘.box‘,
    data:{
        classObject:{
            ‘textColor‘:true,
            ‘textSize‘:false //不渲染，注意看下面的截图
        }
    }
})

# 数组
<ul class="box" :class="[classA, classB]">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>

var vm= new Vue({
    el:‘.box‘,
    data:{
        classA:‘textColor‘,
        classB:‘textSize‘
    }
})

#样式
<div id="box" :style="{color:activeColor, font-size:size}">红嘴绿鹦哥</div>

var vm= new Vue({
    el:‘#box‘,
    data:{
        activeColor:‘#f00‘,
        size:‘30px‘,
        shadow:‘5px 2px 6px #000‘
    }
})

2.2.4跑马灯制作

功能实现思路：

先用插值表达式绑定一个msg，在页面上显示
设置开始与停止的两个按钮，开始按钮的作用是让这个msg“动起来”实现跑马灯效果，停止的按钮让msg停止动、
绑定开始按钮的点击事件，设置函数在一定的时间让msg头尾循环拼接，而停止按钮结束这个拼接

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <!--导入vue的资源-->
    <script src="./lib/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--    两个按钮绑定事件-->
    <input type="button" value="浪起来！" @click="start">
    <input type="button" value="低调！" @click="stop">
    <!--    插值表达式绑定msg-->
    <h4>{{ msg }}</h4>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '猥琐发育，别浪！',
            // 设置全局变量，重复调用函数变量，初始值为空
            interval: null,
        },
        methods: {
            start() {
                //先进行判断，当不为null的时候才执行函数，避免每次点击的时候多个函数同时执行
                if (this.interval != null) return
                // this的指向保存，确保二级函数的指向当前vue实例的msg变量
                var _this = this
                // 每个300毫秒执行这个字符串重组的函数
                this.interval = window.setInterval(function () {
                    var start = _this.msg.substring(0, 1)
                    var end = _this.msg.substring(1)
                    _this.msg = end + start
                }, 300);
            },
            stop() {
                // 停止的时候只需要将interval变量清除掉
                window.clearInterval(this.interval)
                // 重新对interval变量赋值
                this.interval = null
            }
        }
    })
</script>
</body>
</html>

2.2.5其他属性插值与总结

除了上面的两个指令和插值表达式之外，还有的就是v-cloak和v-text这两个指令，前者可以作用在标签上避免由于网络问题带来的页面闪烁（暴露源代码随后才渲染）配合插值表达式的使用，后者没有闪烁的问题，是一种覆盖（与v-html一样，只是不能解析html代码），而前者是一种直接插入不会覆盖。

**总结：**在使用插值表达式的时候，可以使用v-cloak指令解决闪烁的问题，使用v-text覆盖对应标签位置的字符串，使用v-html覆盖并解析要插入的html代码，使用v-bind指令绑定并替换对应属性的值。

2.2 条件渲染

使用指令v-if,v-else，可以在标签上标志的属性设定一个布尔值，上下两个标签还可以嵌套使用。

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <!--导入vue的资源-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <a v-bind:href="link">taobao</a>
    <p v-if="seen">you can see me</p>
    <p v-else>false</p>
</div>
<script>
    <!--通过一个vue函数创建新的vue实例-->
    var app = new Vue({
        // 绑定的div元素id
        el: '#app',
        // 对应的v-html标签发生替换
        data: {
            link: "https://www.taobao.com",
            seen: true
        }
    })

</script>
</body>
</html>

2.3 事件渲染

v-on

v-on用于绑定事件，比如按钮，点击，悬浮等的事件可以与vue实例中的method绑定，代码如下：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <!--导入vue的资源-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <a v-bind:href="link">taobao</a>
    <p v-if="seen">you can see me</p>
    <p v-else>false</p>
    <button v-on:click="event">click me</button>
</div>
<script>
    <!--通过一个vue函数创建新的vue实例-->
    var app = new Vue({
        // 绑定的div元素id
        el: '#app',
        // 对应的v-html标签发生替换
        data: {
            link: "https://www.taobao.com",
            seen: true
        },
        methods: {
            event: function () {
                this.seen = !this.seen
            }
        }
    })

</script>
</body>
</html>

动态参数

如上面的例子，我们想可不可以将click动态地替换，使得我们想要的动态事件，这个时候，只需要在上述代码中改动如下部分：

    <button v-on:[click]="event">click me</button>

此时，click作为一个vue实例的data属性，即成功地实现了动态参数的赋值。

2.4 循环渲染

v-for

vue中使用循环的时候和Java中的语法大致相同，只需要在v-for=的右边输入一个a in b既可以用a来遍历b数组。需要注意的事，当使用两个元素去遍历这个b值的时候，比如{a, c} in b，这个时候c默认赋予的是a对应的下标。当然，循环遍历的对象除了熟悉的数组对象，还有自定义的对象和整型整数也是可以支持的。

<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
  <ul id="v-for-object" class="demo">
    <li v-for="value in object">
      {{ value }}
    </li>
  </ul>
<script>
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})
</script>
</body>
</html>

2.5 表单输入绑定

v-mode关联的属性会与input、textarea、select标签上的数据进行双向绑定。例如下面简单的例子：

<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>
<div id="app">
  <input v-model="message" placeholder="edit me">
  <p>Message is: {{ message }}</p>
</div>

<script> 
new Vue({
  el: '#app',
  data: {
    message: ''
  }
})
</script>
</body>
</html>

需要注意的是，即使大括号里面没有让vue实例赋予正确的值，但是还是需要进行绑定，这样的话系统才知道这是一个需要替换的值。
除此之外还可以绑定单选框，多选框，选择框等等。

三、组件基础

3.1 入门案例

组件是vue最强大的功能之一，组件可以扩展HTML代码，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树。

先看一个入门案例：

weixin_43967401

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE入门笔记

VUE入门笔记一、 Hello World通过下面简单的html代码实现vue的第一个程序：<!DOCTYPE html><html lang="en"><head> <script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body> <div id="app">
复制链接

扫一扫