vue one

作者: kathyever | 来源:发表于2019-04-09 17:33 被阅读0次

Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统:

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

var app=new Vue({
    el:'#app',
    data:{
        message:'hello kathy'
         }
})              

除了文本插值,还可以像下面这样来绑定元素特性:

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

var app2 = new Vue({
    el: '#app-2',
    data: {
      message: '页面加载于 ' + new Date().toLocaleString()
  }
})      

上面这一段代码里所看到的v-bind特性被称为指令。指令带有前缀v-,以表示它们是Vue提供的特殊特性。它们会在渲染的DOM上应用特殊的响应式行为。在这里指令的意思是:“将这个元素节点的title特性和Vue实例的message属性保持一致”

通过Javascript控制台,输入app.message=‘新消息’,就会再次看到这个绑定了title特性的HTML已经进行了更新。

相关文章

  • vue one

    Vue.js的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进DOM的系统: 除了文本插值,还可以像下面这样...

  • vscode vue开发 实用插件整理

    项目管理 Project Manager 皮肤 Dracula Official One Dark Pro vue...

  • 总结2018-06-21

    主要完成 RLFrame 的step one step one 主要是 将 vue 直接转换成 js 文件 第二步...

  • 一文快速上手Vue3

    Vue3快速上手 1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海...

  • vue3

    Vue3快速上手 1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海...

  • Vue3 教程

    1.Vue3简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 耗时2年多...

  • vue中父子传值

    3父组件是App.vue 子组件是one.vue 父子传值 一。父向子: (1)在父组件中引用子组件 (2...

  • 快速入门vue3

    一.简介 2020年9月18日,Vue.js发布3.0版本,代号:One Piece(海贼王) 和vue2相比它的...

  • 使用ts和vue开发一个应用

    工程创建 基础用法 mixin的使用 mixin-one.ts App.vue 项目代码:https://gith...

  • 聊一聊 Vue3 中响应式原理

    引言 Vue.js 3.0 "One Piece"[https://v3.vuejs.org/] 正式发布已经有一...

网友评论

      本文标题:vue one

      本文链接:https://www.haomeiwen.com/subject/lpsiiqtx.html