Vue 入门，Vue属性和指令

yuanxin 发布于2019-08-20 19:02 / 1358人阅读

摘要：鼠标悬停几秒钟查看此处动态绑定的提示信息页面加载于如上，属性被称为指令，其前缀表示其为提供的特殊属性。这里该指令的作用是将这个元素节点的属性和实例的属性保持一致。

初步认识vue

github地址：https://github.com/jiaoshibo/vue

vue是一套构建用户界面的渐进式框架，是mvvm框架的一种。vue采用了自底向上增量开发的设计，其核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。

vue有三个部分组成 : 视图-数据-视图模型。视图即HTML部分。

vue的引入：


//或者直接引入文件

声明式渲染

vue的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM：


    {{message}}

就这样，数据和DOM进行了绑定，视图将数据引入，并进行渲染，显示出来，而且元素是响应式的，打开控制台，修改 app.message 的值，就会发现视图的文本也会相应的更新。

除了文本插值，我们还可以使用指令的方式绑定DOM元素属性。


  
    鼠标悬停几秒钟查看此处动态绑定的提示信息！

如上，v-bind 属性被称为指令，其前缀 v- 表示其为vue提供的特殊属性。这里该指令的作用是：“将这个元素节点的 title 属性和 Vue 实例的 message 属性保持一致”。

条件与循环

控制一个元素的显示与隐藏


    显示

如果在控制台输入 app3.seen=false ，你就发现上例的文本隐藏了。

利用 v-for 指令绑定数组的数据来渲染一个项目列表


    
        
            {{todo.text}}

1.HTML
2.JAVASCRIPT
3.VUE.JS

在控制台输入 app3.todos.push({text:"CSS"}) ，列表中会增加一个新项

处理用户输入

利用 v-on 绑定一个事件监听器，使用户和应用之间进行互动


    {{message}}

通过 v-model 指令，可以轻松实现表单输入和应用状态之间的双向绑定


    {{message}}

组件化应用构建

使用 v-bind 指令将todo传到每一个重复的组件中

1.JAVASCRIPT
2.HTML
3.VUE

在上面的例子中，我们已经设法将应用分割成了两个更小的单元，子单元通过 props 接口实现了与父单元很好的解耦。

To be continued......

下一篇：Vuede 模板语法和计算属性：https://segmentfault.com/a/11...

GPU云服务器云服务器 vue实例属性 vue.js 属性 vue的计算属性 vue入门教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85060.html

Vue入门--基础语法

摘要：在模板中放入太多的逻辑会让模板过重且难以维护。它会根据控件类型自动选取正确的方法来更新元素。指令需要使用的语法，指的是原数据数组，指的是迭代的数组元素。注：本教程所使用的vue版本为 2.5.16 MVC与MVVM MVC（Model-View-Controller）： M指的是从后台获取到的数据， V指的是显示动态数据的html页面， C是指响应用户操作、经过业务逻辑处理后去更新...

haoguo 2019-08-26 12:00 评论0 收藏0
vue入门笔记体系（五）vue指令

摘要：指令指令带有前缀，以表示它们是提供的特殊特性。添加事件侦听器时使用模式。只当事件是从侦听器绑定的元素本身触发时才触发回调。差别在哪里将特性名转换为从开始支持语法糖，会扩展成一个更新父组件绑定值的侦听器。 vue指令指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。 v-text {{msg}} v-html //渲染HTML文本，更新元素的 innerHTML 。注意：内...

myshell 2019-08-23 10:36 评论0 收藏0
vue入门

摘要：基本信息是框架读音，类似于是一套构建用户界面的渐进式框架。我们现在可以进一步为我们的组件实现更复杂的模板和逻辑的改进，而不会影响到父单元。基本信息 vue是mvvm框架 (model view viewmodel) Vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。 model 视图/模板 view 模型/数据 viewmod...

NotFound 2019-08-20 19:02 评论0 收藏0
快速入门 - Vue2 Tutorials (一)

摘要：在这个组件里面有一些链接列表，和，这些列表直接使用编写按照传统的写法，如果我们需要往里面添加链接的时候，每次我们都得添加和标签。所以修改如下这样我们就把数据和视图分开了，模板里面的代码也简洁了很多，不再需要写很多重复的代码。 Vue 的官方文档对 Vue 介绍非常详细，但官方文档使用在 HTML 中引入 vue 的方式进行讲解，而实际项目中一般使用脚手架如 vue-cli 初始化项目...

djfml 2019-08-20 17:47 评论0 收藏0
Vue学习笔记之一 - 入门

摘要：而在页面中，在之内的元素只需写一个。但是元素的内容被更改之后，控件中的内容并不会同步更新。下面的代码，在中遍历实例中属性里的每一项，并将每个与绑定。而在定义组件的代码中，接收传入的，并在元素中显示中的字符串。 URL：Introduction - Vue.js 注意所演示的示例，都是在JS中将Vue实例绑定至HTML中的指定元素，然后再通过Vue实例中data内的属性或者method...

BLUE 2019-08-20 13:49 评论0 收藏0