初识Vue

最新推荐文章于 2022-07-25 19:26:06 发布

汀途

最新推荐文章于 2022-07-25 19:26:06 发布

阅读量86

点赞数

分类专栏： Web前端文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/m0_47323674/article/details/119957034

版权

Web前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

概述

这篇文章初步认识Vue，阅读官方文档可以更好的学习Vue
Vue的官方文档：https://cn.vuejs.org/v2/guide/

引入Vue

如果想使用Vue的话，需要引入，Vue的引入有几种方式，这里使用的是script引入方式，相对简单。当然，没有网络是引入不了的。大型项目推荐使用npm安装Vue

<!-- 引入 vue js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

双向绑定：

首先给大家介绍的是Vue的双向绑定，在接触的Vue之前，想要获取，修改，创建和删除DOM元素节点是很痛苦的，而Vue就很好的解决了这一问题

案例：获取输入框中的内容并展示：

创建HTML页面

<!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>Document</title>
    <!-- 引入 vue js -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <div>{{user}}, 你好!</div>
        <input v-model="user" type="text" placeholder="请输入姓名">
    </div>
</body>
</html>

创建Vue实例

<script>
    	// vue 实例
        let vm = new Vue({
           // el 找到实例操作的元素 :id为"app"的
           el: '#app',
           // data 声明变量 对象
           data: {
             user: '张三',
           },
           // methods  定义方法  处理事件
           methods: {
                
           },
        });
</Script>

这里可以看到我们在data中声明了一个user ‘张三’，在输入框中使用v-model绑定user，在div标签内用{{user}}展示

页面效果：

这时，我们输入一个值‘李四’
在这里插入图片描述

可以看到div展示的值和输入框的值已经进行绑定，并随着值的改变动态变化，这就是Vue的双向绑定

Vue指令

我们刚刚已经使用了v-model指令，Vue中还有许多指令，接下来给大家介绍用来遍历数据的v-for指令

案例：循环遍历list数组中的数据

HTML页面

		<ul>
            <!-- 循环 for -->
            <!-- item：数组中便利取得的对象 index：下标 -->
            <li v-for="(item,index) in list">{{item}} | {{index}}</li>
        </ul>

Vue实例

let vm = new Vue({
            // el 找到实例操作的元素
            // element, findElementById
            el: '#app',
            // 实例属性（成员变量）model
            data: {
                num: 2,
                list: ['HTML','CSS','JS','Bootstrap']
            }
        });

页面效果

可以看出使用Vue遍历数组大大简化了页面中的代码，当数组内容变更时无需修改页面，只需修改Vue实例中data数据即可

常用的指令还有v-if, v-else等

事件处理

案例：简单备忘录

HTML页面

	<div id="app">
        <h1>事件处理：备忘录</h1>
        <!-- v-model 数据绑定，输入框输入的内容赋值为成员变量 -->
        <input v-model="task" placeholder="新任务">
        <!-- 注册属性事件 -->
        <button @click="create">创建新任务</button>
        <ol>
            <li v-for="t in taskList">{{t}}</li>
        </ol>
    </div>

Vue实例

let vm3 = new Vue({
           el: '#app3',
           data: {
               task: '',
               taskList: ['起床','吃饭']
           },
           methods: {
                // 定义多个方法
                create: function() {
                    // 把新任务添加到任务列表中
                    this.taskList.push(this.task);
                }
           },
        });

首先将输入框中的值绑定到data中的task，通过触发点击事件将task push到taskList数组，需要注意的是，这里需要使用this来调用data中的变量

通过上面两个案例相结合，在methods中定义create处理点击事件就完成了一个简单的备忘录

页面效果

到此结束了，分享的知识不一定对，但希望对你有所帮助

汀途

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识Vue

概述这篇文章初步认识Vue，阅读官方文档可以更好的学习VueVue的官方文档：https://cn.vuejs.org/v2/guide/引入Vue如果想使用Vue的话，需要引入，Vue的引入有几种方式，这里使用的是 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>双向绑定：首先给大家介绍的是Vue的双向绑定，在接触的Vue之前
复制链接

扫一扫