Vue学习(一)概念及常见命令介绍

最新推荐文章于 2024-06-11 01:14:10 发布
最新推荐文章于 2024-06-11 01:14:10 发布
阅读量6.8k 收藏 8
点赞数 1
分类专栏： Web前端框架-Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ZUOZIJI416/article/details/53323032
版权

Vue.js介绍

这里写图片描述
Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。Vue尽可能通过简单的API实现响应的数据绑定和组合的视图组件。

Vue和MVVM模式

这里写图片描述
MVVM模式即Model-View-ViewModel。

Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。

ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素。

DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。

Vue.js特点

  • 简洁：页面由HTML模板+Json数据+Vue实例组成
  • 数据驱动：自动计算属性和追踪依赖的模板表达式
  • 组件化：用可复用、解耦的组件来构造页面
  • 轻量：代码量小，不依赖其他库
  • 快速：精确有效批量DOM更新
  • 模板友好：可通过npm，bower等多种方式安装，很容易融入

Vue.js入门小例子

声明式渲染

本例子由HTML模板（View）+Json数据（Model）+Vue实例（ViewModel）组成。

创建Vue的实例，需传入一个选项对象，如：数据、挂载元素、方法、模生命周期钩子等。本例子中，选项对象的el属性为#app，表示Vue实例挂载在<div id="app">...</div>元素上，data属性为exampleData，表示Model为exampleData。View中{{message}}是Vue的一种数据绑定语法，在运行时，{{message}}会被数据对象的message属性替换。

<!DOCTYPE html>
<html>
    <head>
        <title>声明式渲染</title>
        <meta charset="utf-8">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>        
    </head>
    <body>
        <!-- View -->
        <div id="app">
            {{message}}
        </div>
        <script>
            //Model
            var exampleData = {
                message: 'Hello Vue!'
            }
            //ViewModel
            var app = new Vue({
                el: '#app',
                data: exampleData
            })
        </script>
    </body>
</html>

双向绑定

在Vue中使用v-model在表单元素上实现双向绑定。当在输入框输入的信息发生变化，<p>...</p>中的信息随之变化；当通过控制台中的Console，修改exampleData.message的值，输入框中的信息也随之变化。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>双向绑定</title>
        <meta charset="utf-8">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <!-- View -->
        <div id="app">
            <p>{{message}}</p>
            <input type="text" v-model="message">
        </div>
        <script>
            //Model
            var exampleData = {
                message: 'Hello Vue!'
            }
            //ViewModel
            var app = new Vue({
                el: '#app',
                data: exampleData
            })
        </script>
    </body>
</html>

运行截图：

这里写图片描述

更改exampleData.message：
这里写图片描述

Vue.js常用指令

Vue指令以v-开头，作用在HTML元素上，将指令绑定在元素上时，会给绑定的元素添加一些特殊行为，可将指令视作特殊的HTML属性（attribute）。

下面将介绍Vue中常用的几个内置指令。当然，Vue除了内置指令，也可以根据需求自定义指令。

v-if指令

条件判断指令，根据表达式值的真假来插入或删除元素，表达式返回一个布尔值，语法如下：

v-if = "expression"

例子：

在本例中，表达式是yes，no，和age>25，yes的值为true，因此在HTML中显示该元素，其他同理。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>v-if指令</title>
        <meta charset="utf-8">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1 v-if="yes">Yes</h1>
            <h1 v-if="no">No</h1>
            <h1 v-if="age > 25">Age: {{age}}</h1>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    yes: true,//值为真，插入元素
                    no: false,//值为假，不插入元素
                    age: 28
                }
            })
        </script>
    </body>
</html>

运行截图：

这里写图片描述

v-show指令

条件渲染指令，与v-if不同的是，无论v-show的值为true或false，元素都会存在于HTML代码中；而只有当v-if的值为true，元素才会存在于HTML代码中。v-show指令只是设置了元素CSS的style值。语法如下：

v-show = "expression"

例子：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>v-show指令</title>
        <meta charset="utf-8">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1 v-show="yes">Yes</h1>
            <h1 v-show="no">No</h1>
            <h1 v-show="age > 25">Age: {{age}}</h1>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    yes: true,//值为真
                    no: false,//值为假
                    age: 28
                }
            })
        </script>
    </body>
</html>

运行截图：
这里写图片描述

v-else指令

可配合v-if或v-show使用，v-else指令必须紧邻v-if或v-show，否则该命令无法正常工作。v-else绑定的元素能否渲染在HTML中，取决于前面使用的是v-if还是v-show。若前面使用的是v-if，且v-if值为true，则v-else元素不会渲染；若前面使用的是v-show，且v-show值为true，则v-else元素仍会渲染到HTML。

v-for指令

循环指令，基于一个数组渲染一个列表，与JavaScript遍历类似，语法如下：

v-for = "item in items"

例子：

在本例中，数组是todos，依次遍历数组todos中的每个元素，将text部分显示。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>v-for指令</title>
        <meta charset="utf-8">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <ol>
                <li v-for="todo in todos">{{todo.text}}</li>
            </ol>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    todos: [
                        {text: 'learn Javascript'},
                        {text: 'learn Vue'},
                        {text: 'learn ...'}
                    ]
                }
            })
        </script>
    </body>
</html>

运行截图：

这里写图片描述

在浏览器控制台里Console，输入app.todos.push({text: 'new item'})，则会插入新的一条信息。

运行截图：
这里写图片描述

v-bind指令

给DOM绑定元素属性，语法如下：

v-bind:argument="expression"

其中，argument通常是HTML元素的特性，如：v-bind:class="expression"。

注：v-bind指令可以缩写为:冒号。如：:class="expression"。

例子：

在本例子中，当鼠标悬停在span标签的文字上时，会显示加载网页的时间。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <span v-bind:title="message">Hover your mouse over me</span>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'you loaded this page on ' + new Date()
                }
            })
        </script>
    </body>
</html>

v-on指令

用于监听DOM事件，语法与v-bind类似，如监听点击事件v-on:click="doSth"。

注：v-on指令可以缩写为@符号。如：@click="doSth"。

例子：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <p><input type="text" v-model="message"></p>
            <p>
                <button v-on:click="greet">Greet</button>
            </p>
            <p>
                <button v-on:click="say('hello vue')">Hello</button>
            </p>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    message: 'Greet to Vue'
                },
                methods: {
                    greet: function(){
                        alert(this.message);
                    },
                    say: function(msg){
                        alert(msg);
                    }
                }
            })
        </script>
    </body>
</html>

运行结果：
这里写图片描述

一个综合性例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <fieldset>
                <legend>Create New</legend>

                <label for="">Name:</label>
                <input type="text" v-model="newPerson.name">

                <label for="">Age:</label>
                <input type="text" v-model="newPerson.age">

                <label for="">Age:</label>
                <select name="" id="" v-model="newPerson.sex">
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>

                <button @click="createPerson">Create</button>
            </fieldset>
            <table>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Sex</th>
                    <th>Delete</th>
                </tr>
                <tr v-for="person in people">
                    <td>{{person.name}}</td>
                    <td>{{person.age}}</td>
                    <td>{{person.sex}}</td>
                    <td><button @click="deletePerson($index)">Delete</button></td>
                </tr>
            </table>
        </div>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    newPerson: {
                        name: '',
                        age: 0,
                        sex: 'Male'
                    },
                    people: [{
                        name: 'tyy',
                        age: 24,
                        sex: 'Male'
                    }, {
                        name: 'syd',
                        age: 24,
                        sex: 'Female'
                    }]
                },
                methods: {
                    createPerson: function(){
                        this.people.push(this.newPerson);
                        this.newPerson = {
                            name: '',
                            age: 0,
                            sex: 'Male'
                        }
                    },
                    deletePerson: function(index){
                        this.people.splice(index, 1);
                    }
                }
            })
        </script>
    </body>
</html>

运行截图：

这里写图片描述

参考链接

  1. [Vue.js——60分钟快速入门](http://www.cnblogs.com/keepfool/p/5619070.html)
  2. 介绍Vue.js
Suyd
关注
  • 1
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue常用指令
weixin_58017699的博客
06-06 3477
使用如下例子: 2 使用,如下例子: 3、v-show 和 v-if指令: v-if和v-show区别：使用和v-if如下例子: 4、v-if和v-else的逻辑使用: v-if和v-else的逻辑使用，如下例子: 5、v-for指令: 使用如下例子: 6、v-bind指令: 使用如下例子: 7、v-on指令: 使用如下例子: 8、v-model指令: 使用如下例子: 文章参考资料：vue常用指令_jayLog的博客-CSDN博客_v
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
适合想要学习Vue.js前端框架的新人、复习资料，里面资料都是个人从0开始学习所总结的笔记（希望能帮到更多人）
VUE项目运行常用命令
m0_55876338的博客
09-08 1万+
3、打包部署：npm run build进行打包，打包完成后项目里面多了一个dist文件夹，将dist扔到服务器。2、启动项目：npm run dev，如果npm run dev不行，则用npm run serve。
vue指令大全
最新发布
2401_85123714的博客
06-11 365
好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。
vue 的指令
热门推荐
青蛙king的博客
10-27 1万+
一、vue 的指令 指令的本质：语法糖，标志位。在编译阶段 render 函数里，会把指令编译成 JavaScript 代码。 vue的14个指令： v-text v-html（不建议使用） v-show v-if v-else-if v-else v-for v-on v-bind v-model v-slot v-pre（使用频率很低） v-once（使用频率很低） v-cloak（使用频率极低，不细介绍） 1、v-text v-text 指令，会把该元素下面的所有内.
Vue常用指令+用法举例 详解
m0_69287579的博客
08-18 3717
有：v-on指令、v-model指令、v-once指令、v-show指令、v-if指令、v-else指令、v-else-if指令、v-for指令、v-text指令、v-html指令、v-bind指令等等。vue中双向绑定是一个指令v-model，可以绑定一个动态值到视图，同时视图中变化能改变该值。可以单独使用，v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。v-if和v-show有同样的效果，不同在于。v-for可用来遍历数组、对象、字符串。
vue.js一课一得
tWan9J1e的博客
12-15 52
父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！使用 v-on 绑定自定义事件。每个Vue使用 $on(eventName) 监听事件使用 $emit(eventName) 触发事件Vue的事件系统分离自浏览器的EventTarget API。尽管它们的运行类似，但是$on和 $emit不是addEventListener 和 dispatchEvent 的别名。另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。
Vue概念及常见命令介绍(1)
10-20
总结来说，Vue.js的概念和命令主要围绕数据驱动、声明式渲染、双向绑定以及一系列的内置指令展开。这些特性使得Vue成为构建现代Web应用的理想选择，特别是对于需要高效、易维护和可扩展性的项目。通过深入理解和熟练...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
vue项目学习编写
04-19
1. **Vue基础知识**：首先，你需要了解Vue的核心概念，如Vue实例、虚拟DOM、指令（v-bind、v-if、v-for等）、事件处理（v-on）以及计算属性和侦听器。这些都是构建Vue应用的基础。 2. **Vue CLI**：Vue CLI是官方...
vue学习笔记，学习vue从0-1的步骤
09-21
使用`vue create`命令可以创建一个新的Vue项目，它会自动配置好必要的依赖和构建工具。 7. **VSCode 插件**：为了提高开发效率，VSCode中可以安装Vue相关的插件，如Vue语言支持、Vue提示和Vue调试工具等。此外，还...
vue常用的命令
王春燕的博客
06-15 5828
Vue一些常用命令： 1.安装vue-cli npm install --global vue-cli 2.创建一个基于 webpack 模板的新项目 vue init webpack 项目名称 3. 安装依赖： cd 项目名称 npm install 3运行： npm run dev 4.安装vue-resource插件（通过XMLHttpRequest或JSONP发起请求并处理响应 //get post请求）： npm install vue-resource --save......
超全vue指令全家桶
qq_48866673的博客
02-23 988
一篇文章搞懂vue2和3中所有的指令常用
Vue2基础二、常用指令
李宥的博客
07-27 734
- **概念：**指令（Directives）是 Vue 提供的带有 **v- 前缀** 的 特殊 标签**属性**。Vue 会根据不同的【指令】，针对标签实现不同的【功能】。 - **为啥要学：**提高程序员操作 DOM 的效率。 - **vue指令分类：** - 内容渲染指令（v-html、v-text） - 条件渲染指令（v-show、v-if、v-else、v-else-if） - 事件绑定指令（v-on） - 属性绑定指令 （v-bind） - 列表渲染指令（v-for）
Vue学习-基础入门篇(三万字收藏篇)
林钟一的博客
07-27 6196
Vue是一套用于构建用户界面的 渐进式框架 。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。(1) Vue 的核心库只关注视图层。 (2) 不仅易于上手，还便于与第三方库或既有项目整合。 (3) 遵循 MVVM模式 ，能够实现视图与模型的 双向绑定。(4) 编码简洁，体积小，运行效率高，适合移动/PC端开发。Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的 冷服务器启动。它做到了 本地快速开发启动, 在生产环境下基于 Rollup 打包。通过在终端中
Vue的简单学习（一文快速上手Vue2.0！）
an_gentle_killer的博客
08-08 2680
页内目录 一，Vue的介绍 二，基于vue.js的学习 三，Vue的使用模板 四，Vue的简单实用 五， 六， 一，Vue的介绍（Vue官网） 来看看官方的解释 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。（概括官网的话就是易用.
vue常用命令
qq_37196621的博客
08-20 981
node -v 查看node版本
vue基础指令
Mr_ZCheng的博客
10-20 1433
1.插值表达式 目的: 在dom标签中, 直接插入内容 又叫: 声明式渲染/文本插值 语法: {{ 表达式 }} <template> <div> <h1>{{ msg }}</h1> <h2>{{ obj.name }}</h2> <h3>{{ obj.age > 18 ? '成年' : '未成年' }}</h3> </div> </templa
Vue学习笔记：从环境搭建到项目实战
本资源是一份详细的Vue前端开发学习笔记，涵盖了从基础入门到实战项目的全过程，适合初学者和希望进一步提升Vue技能的开发者参考。以下是主要内容概要： 1. **环境搭建**： - 使用Node.js和npm进行环境配置，通过...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值