Vue2-核心最基本功能介绍

最新推荐文章于 2024-01-10 19:59:24 发布
最新推荐文章于 2024-01-10 19:59:24 发布
阅读量343 收藏 2
点赞数
分类专栏： 照着官网撸Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zzzpiu/article/details/112308077
版权

文章目录

hello

一个最简单的helloword

	<h1>hello</h1>
    <div id="app">
        {{ message }}
    </div>

// 绑定内容
        var app1 = new Vue({
            el: "#app",
            data: {
                message: 'Hello Vue!'
            }
        });

绑定属性

一个最简单的helloword

	<hr>
    <h1>绑定属性</h1>
    <div id="app-2">
        <!--title是span的属性-->
        <span v-bind:title="message" v-bind:style="style">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
    </div>

// 绑定标签的属性
        var app2 = new Vue({
            el: "#app-2",
            data: {
                message: "页面加载于 " + new Date().toLocaleString(),
                style: "color:red"
            }
        });

v-if

一个最简单的helloword

	<hr>
    <h1>v-if</h1>
    <div id="app-3">
        <input type="button" value="切换" V-on:click="fn"><p v-if="seen">现在你看到了</p>
    </div>

var app3 = new Vue({
            el: "#app-3",
            data: {
                seen :true
            },
            methods: {
                fn: function () {
                    this.seen = !this.seen;
                }
            }
        });

v-for

一个最简单的helloword

	<hr>
    <h1>v-for</h1>
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">{{ todo.text }}</li>
        </ol>
    </div>

// v-for
        var todos = [
            {text: "学习js"},
            {text: "学习vue"},
            {text: "整个项目"},
            ];
        var app4 = new Vue({
            el: "#app-4",
            data: {
                todos: todos
            }
        });

处理用户输入

一个最简单的helloword

	<hr>
    <h1>处理用户输入</h1>
    <div id="app-5">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转消息</button>
    </div>

//处理用户输入,反转message
        var app5 = new Vue({
            el: "#app-5",
            data: {
                message: "hello vue.js!"
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('');
                }
            }
        });

v-model双向绑定

一个最简单的helloword

	<hr>
    <h1>v-model双向绑定</h1>
    <div id="app-6">
        <p>{{ message }}</p>
        <input type="text" v-model="message">
    </div>

// v-model双向绑定
        var app6 = new Vue({
            el:"#app-6",
            data: {
                message: "hello v-model"
            }
        });

组件化应用构建

一个最简单的helloword

	<hr>
    <h1>组件化应用构建</h1>
    <p>组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：</p>
    <div id="app-7">
        <ol>
            <!--创建一个todo-item组件的实例-->
            <todo-item
                    v-for="item in groceryList"
                    v-bind:todo="item"
                    v-bind:key="item.id"
            ></todo-item>
        </ol>
    </div>

//组件化
        //定义一个新组建
        Vue.component('todo-item', {
            // todo-item组件现在接受一个
            // "prop",类似于一个定义attribute
            // 这个prop(属性)名为todo
            props: ['todo'],
            template: '<li class="templateClass">{{ todo.text }}</li>'
        });
        //现在使用v-bind指令将代办项传到循环输出的每个组件中
        var app7 = new Vue({
            el: "#app-7",
            data: {
                groceryList:[
                    {id:0,text:"蔬菜"},
                    {id:1,text:"奶酪"},
                    {id:2,text:"随便其它什么人吃的东西"},
                ]
            }
        });

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../vue.js"></script>
    <style>
        .templateClass {
            color: seagreen;
        }
        .templateClass:hover {
            color: dodgerblue;
        }
    </style>
</head>
<body>
    <!--hello-->
    <h1>hello</h1>
    <div id="app">
        {{ message }}
    </div>
    <!--绑定属性-->
    <hr>
    <h1>绑定属性</h1>
    <div id="app-2">
        <!--title是span的属性-->
        <span v-bind:title="message" v-bind:style="style">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
    </div>
    <!--v-if-->
    <hr>
    <h1>v-if</h1>
    <div id="app-3">
        <input type="button" value="切换" V-on:click="fn"><p v-if="seen">现在你看到了</p>
    </div>
    <!--v-for-->
    <hr>
    <h1>v-for</h1>
    <div id="app-4">
        <ol>
            <li v-for="todo in todos">{{ todo.text }}</li>
        </ol>
    </div>
    <!--处理用户输入-->
    <hr>
    <h1>处理用户输入</h1>
    <div id="app-5">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">反转消息</button>
    </div>
    <!--v-model双向绑定-->
    <hr>
    <h1>v-model双向绑定</h1>
    <div id="app-6">
        <p>{{ message }}</p>
        <input type="text" v-model="message">
    </div>
    <!--组件化应用构建-->
    <hr>
    <h1>组件化应用构建</h1>
    <p>组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：</p>
    <div id="app-7">
        <ol>
            <!--创建一个todo-item组件的实例-->
            <todo-item
                    v-for="item in groceryList"
                    v-bind:todo="item"
                    v-bind:key="item.id"
            ></todo-item>
        </ol>
    </div>

    <script>
        // 绑定内容
        var app1 = new Vue({
            el: "#app",
            data: {
                message: 'Hello Vue!'
            }
        });
        // 绑定标签的属性
        var app2 = new Vue({
            el: "#app-2",
            data: {
                message: "页面加载于 " + new Date().toLocaleString(),
                style: "color:red"
            }
        });
        // v-if
        var app3 = new Vue({
            el: "#app-3",
            data: {
                seen :true
            },
            methods: {
                fn: function () {
                    this.seen = !this.seen;
                }
            }
        });
        // v-for
        var todos = [
            {text: "学习js"},
            {text: "学习vue"},
            {text: "整个项目"},
            ];
        var app4 = new Vue({
            el: "#app-4",
            data: {
                todos: todos
            }
        });
        //处理用户输入,反转message
        var app5 = new Vue({
            el: "#app-5",
            data: {
                message: "hello vue.js!"
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('');
                }
            }
        });
        // v-model双向绑定
        var app6 = new Vue({
            el:"#app-6",
            data: {
                message: "hello v-model"
            }
        });
        //组件化
        //定义一个新组建
        Vue.component('todo-item', {
            // todo-item组件现在接受一个
            // "prop",类似于一个定义attribute
            // 这个prop(属性)名为todo
            props: ['todo'],
            template: '<li class="templateClass">{{ todo.text }}</li>'
        });
        //现在使用v-bind指令将代办项传到循环输出的每个组件中
        var app7 = new Vue({
            el: "#app-7",
            data: {
                groceryList:[
                    {id:0,text:"蔬菜"},
                    {id:1,text:"奶酪"},
                    {id:2,text:"随便其它什么人吃的东西"},
                ]
            }
        });
    </script>
</body>
</html>
blog12138
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-admin-template-master.zip
12-05
4. `main.js`：应用的入口文件，通常在这里导入Vue和其他核心依赖，并启动应用。 5. `App.vue`：应用的主组件，定义了整个应用程序的基本结构。 6. `vue.config.js`（如果存在）：Vue CLI 3的配置文件，允许你...
vue 翻页组件vue-flip-page效果
10-15
在本文中，我们将深入探讨Vue Flip Page的基本使用、核心功能以及如何在项目中集成。 首先，要使用Vue Flip Page，你需要通过npm来安装它： ```bash npm install vue-flip-page ``` 安装完成后，在需要使用该组件的...
Vue2 概述
热门推荐
Dailyblue的专栏
04-28 1万+
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。...
Vue2（初识vue）
passerby的博客
08-02 9380
官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。vue环境的搭建有很多种：对于我们初次学习，我们使用自行下载js的方式。 注意 面试题： Data为啥要写成函数？ Vue 里面data属性之所以不能写成对象的格式，是因为对象是对地址的引用，而不是独立存在的。如果一个.vue 文件有多个子组件共同接收一个变量的话，改变其中一个子组件内此变量的值，会影响其他组件的这个变量的值。如果写成函数的话，那么他们有一个作用域的概念在里面，相互隔阂，不受影响。什么是指令
VUE2基本介绍
最新发布
weixin_52633911的博客
01-10 556
Vue最基础的介绍和简单使用
vue2核心
HHYZBC的博客
06-05 354
初始vue 想让vue工作，必须创建一共Vue实例 <script type="text/javascript" > //创建Vue实例 new Vue({ el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。 data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。 name:'atguigu', address:'北京' } }) 上面代码中el用于指定当前Vue实例为哪个容器服务
Vue基础
weixin_52674026的博客
12-23 124
推荐大家安装的 VScode 中的 Vue 插件 Vue 3 Snippets https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippets Vetur https://marketplace.visualstudio.com/items?itemName=octref.vetur 什么是 vue 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便
vue-admin-template-4.4.0.zip
03-01
Vue.js 是一款流行的轻量级前端JavaScript框架，它以其易学易用、高效灵活的特点深受开发者喜爱...通过深入研究和实践，开发者不仅可以掌握Vue.js的基本原理，还能了解到前端工程化、状态管理和前后端交互等高级主题。
vue-video-player.zip
09-09
3. **组件化开发**：Vue-video-player的核心思想是组件化，它将播放器的功能分解为多个可复用的部件，如播放/暂停按钮、进度条、音量控制等。开发者可以根据需要选择和自定义这些部件，实现高度定制化的播放体验。 ...
vue路由--网站导航功能详解
10-17
Vue 路由是 Vue.js 应用程序中用于...通过以上步骤，你将能够创建一个具有基本导航功能的 Vue 应用。Vue Router 提供了丰富的功能，包括动态路由匹配、命名视图、路由参数、导航守卫等，可以根据需求进一步探索和使用。
基于vue2实现上拉加载功能
08-28
主要为大家详细介绍了基于vue2实现上拉加载功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue2基础概念
lhbxuetu的博客
12-26 1892
Vue.js 2 是一个流行的前端 JavaScript 框架，用于构建交互式用户界面。Vue.js 2 在 Vue.js 1 的基础上进行了全面的重写和重构，增加了很多新特性和改进，提供了更加优雅、高效的开发方式。响应式数据绑定：Vue.js 2 支持响应式的数据绑定机制，当数据发生变化时，相关的视图会自动更新，使得开发者无需手动操作 DOM 元素。组件化开发：Vue.js 2 提供了强大的组件化开发机制，允许开发者将页面划分为独立、可复用的组件，有助于提高代码的可维护性和复用性。虚拟 DOM。
Vue学习计划-Vue2--Vue核心（三）methods和computed
我愿化作繁星
12-01 800
Vue学习计划--Vue2（三）methods和computed
vue：vue2与vue3的区别
snowball的博客
03-04 2855
5、因为setup函数中，props是响应式得，当传入新的prop时，它将会被更新，所以不能使用es6解构，因为它会消除prop得响应性，如需解构prop，可以通过使用setup函数中得toRefs来完成此操作。Vue2.x中new出的实例对象，所有的东西都在这个vue对象上，这样其实⽆论你⽤到还是没⽤到，都会跑⼀遍，这样不仅提⾼了性能消耗，也⽆疑增加了⽤户加载时间。不需要在模板中追加.value。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
Vue2-基础知识
qq_54379580的博客
09-28 1万+
一些vue的基础知识啦, 基本用法, 指令相关,侦听器,过滤器,计算属性, 组件相关, 路由相关的基础知识点啦~~~
vue两大核心功能
weixin_42504805的博客
06-09 2306
Vue两大核心
vue2与vue3有什么区别？
weixin_43424900的博客
11-29 1万+
今天要说的vue3基本兼容我们所熟悉的vue2代码。 一、两者基本的不同点。 1.vue3固然是优点多多的，其3个主要的优点有： （1）按需引用； （2）组合式api：更加接近原生js，更加直观； （3）vue3新增的set up中没有this，也就是说vue3更有效地降低了代码地耦合性。 2.vue3地启动方式： var app=createApp(App); app.use(router).use(store) .mount("#app") 3.vue3全局方法定义： app.co
Vue2.x - 核心
伏城之外的博客
04-22 2070
Vue介绍 Vue是一种用于构建前端网页的框架。 传统前端网页开发中，开发者需要频繁的通过DOM操作来完成网页的构建，这引发了如下几个问题： 原生DOM操作是命令式的，即我们需要书写大量代码才能执行原生DOM操作，即使有了jQuery，DOM操作的代码得到简化，但是依旧是命令式；优异的命令式代码往往依赖于开发者使用它的熟练度，以及代码优化的思考深度，所以不同级别的开发者开发出来的命令式代码千差万别，这就产生了代码风格统一和代码性能调优的问题。 不精准的DOM操作会让浏览器进行冗余的网页构建，造成性能
Vue2原理浅谈
熊宗的博客
11-10 1万+
本文重点讲述Vue2渲染的整体流程，包括数据响应的实现（双向绑定）、模板编译、virtual dom原理等，希望读者看完有所收获。 前言 此部分内容初步介绍前端主流框架部分特点，来提高大家对框架的认识，从而最后导出对vue2原理的整体介绍 参考尤雨溪的live 不吹不黑聊聊前端框架 有兴趣的同学可以听听 现代主流框架均使用一种数据=>视图的方式，隐藏了繁琐的dom操作
vue-pure-admin
07-16
vue-pure-admin 的特点之一是纯净，它遵循了最简约的设计风格，界面简洁大方，没有赘余的元素，使用户能够专注于核心功能的实现。同时，它具有响应式布局，支持多种设备和屏幕的展示，并且可以进行自定义的布局设置...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值