声明式渲染:vue的核心是一个允许你才用一个简洁的模板语法来声明式的将数据渲染进行DOM的系统

html部分:
<div id="app">
  {{message}}
</div>
vue部分:
var app=new Vue({
  el:'#app',
  data:{
    message:'Hello Vue!'
  }
})

  除了绑定插入文本的内容,我们还可以才用这样的方式绑定DOM元素属性:

<div id="app-2">
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds to see my dynamically bound title!
  <span>
</div>
Vue部分:
var app2=new Vue({
  el:'#app-2',
  data:{
    message:'You loaded this page on'+new Data();
  }
})

 你看到的v-bind属性被称为指令。指带有v的前缀,表示vue提供的特殊属性,他们在渲染DOM上应用特殊的响应式行为

二、条件与循环

控制切换一个元素的显示也相当简单。

html部分
<div id="app-3">
  <p v-if="seen">Now you see me</p>
</div>
vue部分:
var app3=new Vue({
  el:'#app-3',
  data:{
    seen:true
  }
})

  当seen为false时,你会发现Now you see me消失了。

这个例子演示了我们不仅可以绑定Dom文本到数据,也可以绑定DOM结构到数据,vue提供了一个强大的国度效果系统,可以在vue插入/删除元素是自动应用国度效果。

也有其他指令,每个有特殊的功能,v-if指令可以绑定数据到数组来渲染一个列表:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}
    </li>
  </ol>
</div>
vue部分:
var app4=new Vue({
  el:'#app-4',
  data:{
    todos:[
      {text:'learn javascript'},
      {text:'learn Vue'},
      {text:'Bulid something awesome'}
    ]
  }
})

  三、处理用户输入

v-on绑定一个监听事件用于调用我们vue实例中定义的方法:

<div id="app-5">
  <p>{{message}}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>
vue部分:
var app5=new Vue({
  el:'#app-5',
  data:{
    message:'Hello World'
  },
  methods:{
    reverseMessage:function(){
      this.message=this.message.split('').reverse().join('')
    }
  }
})

  在reverseMessage方法中,我们没有接触DOM的情况下更新了应用的状态,所有的DOM操作都有vue来处理,只需写代码的逻辑

vue的v-model指令,使得在表单输入和应用状态中做双向数据绑定变得非常轻巧

  

<div id="app-6">
  <p>{{message}}</p>
  <input v-model="message">
</div>
vue部分:
var app6=new Vue({
  el:'#app-6',
  data:{
    message:'Hello World'
  }
})

  

vue介绍啊的更多相关文章

  1. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  2. Vue.js是什么,vue介绍

    Vue.js是什么,vue介绍 Vue.js 是什么Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. ...

  3. vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

    这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...

  4. vue——介绍和使用

    一.vue介绍 vue官网说:Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式的JavaScript框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. ...

  5. Vue介绍

    1.Vue的简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是通过尽可能简单的 AP ...

  6. Vue学习笔记之Vue介绍

    vue的作者叫尤雨溪,中国人.自认为很牛逼的人物,也是我的崇拜之神. 关于他本人的认知,希望大家读一下这篇关于他的文章,或许你会对语言,技术,产生浓厚的兴趣.https://mp.weixin.qq. ...

  7. Vue介绍以及模板语法-插值

    1.Vue的介绍 Vue是一套用于构建用户界面的渐进式框架. 注意:Vue是一个框架,相对于jq库来说,是由本质的区别的:https://cn.vuejs.org/ Vue不支持IE8及一下版本,因为 ...

  8. 02 Vue介绍与安装,指令系统 v-*、音乐播放器

    VUE文档 https://cn.vuejs.org/v2/guide/ 1.vue的介绍 尤雨溪 1.vue的优点 2.vue的介绍 3.vue的安装 4.声明式渲染 <body> &l ...

  9. Vue小白篇 - Vue介绍

    Vue ?啥是Vue?能干嘛? vue 的介绍 Vue 是一套用于构建用户界面的 渐进式框架 ,与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层 前端三大框 ...

  10. Vue 介绍,优点,实例

    一 认识vue 1.什么是vue 以数据驱动的web渐进式框架 三大主流框架: Angular React Vue 设计模式:MVVM 2.vue优点 - 以数据驱动,不直接操作DOM,效率高- 单页 ...

随机推荐

  1. Mac 安装 Android commandlinetools 各种报错的问题

    https://developer.android.com/studio/releases/platform-tools commandlinetools-mac 下载地址 解压后直接运行 sdkma ...

  2. You-Get开源在线下载神器,搭配python更加丝滑(文中案例演示)

    大家好,我是辰哥 今天给大家介绍一个号称可以下载全网视频.音频.图像的开源库 --you-get you-get 这里说全网可能一点夸张,但如果实际上去使用you-get下载媒体文件(视频.音频.图像 ...

  3. 面试官:Redis的事务满足原子性吗?

    原创:码农参上(微信公众号ID:CODER_SANJYOU),欢迎分享,转载请保留出处. 谈起数据库的事务来,估计很多同学的第一反应都是ACID,而排在ACID中首位的A原子性,要求一个事务中的所有操 ...

  4. Apache Hudi内核之文件标记机制深入解析

    1. 摘要 Hudi 支持在写入时自动清理未成功提交的数据.Apache Hudi 在写入时引入标记机制来有效跟踪写入存储的数据文件. 在本博客中,我们将深入探讨现有直接标记文件机制的设计,并解释了其 ...

  5. Linux网络编程:原始套接字简介

    Linux网络编程:原始套接字编程 一.原始套接字用途 通常情况下程序员接所接触到的套接字(Socket)为两类: 流式套接字(SOCK_STREAM):一种面向连接的Socket,针对于面向连接的T ...

  6. MacOS安装和卸载Java

    ​ 安装java 下载地址:https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 设 ...

  7. python库--tensorflow

    方法 返回值类型 参数 说明 张量    .constant() Tensort 张量 实例t value 创建一个常量tensor dtype=None 输出类型 shape=None 返回tens ...

  8. IDEA weblogic远程调试

    weblogic远程调试 这里我们使用vulhub的镜像作为初始构建镜像搭建漏洞环境 1. 搭建docker环境 新建一个目录,创建两个文件 DockerFile FROM vulhub/weblog ...

  9. python 打字小游戏

    最近随便用python的pygame编了这个打字小游戏 只要有字母调到窗口底部就结束 上代码: import pygame.freetype import sys import random pyga ...

  10. 查看Win10商店应用更新日期

    查看Win10商店应用更新日期 需要用到一个工具--WP Snitch,网址 https://wpsnitch.appspot.com/ 打开网址后他会给出一个示例,比如给出的是 https://ww ...