demo说明:
1、{{message}}                           --“Mustache” 语法(双大括号)

2、v-bind:属性名                        --绑定元素属性,缩写  :title or :style  or  :class

3、v-if="change=='a'"              --判断change=='a',等于则显示该DOM节点

4、v-else-if="change=='b'"      --结合[v-if]使用,判断change=='b',等于则显示该DOM节点

5、v-else                                   --结合[v-if]or[v-else-if]使用,当他们的条件全部为假时,显示该DOM节点

6、v-for:"i in itemTest"             --以i遍历循环输出itemTest数组中的值,类似于Js的for...in

7、v-on:事件="function"           --监听DOM事件,并当事件被触发时执行function函数,缩写  @click

8、v-model="inputInfo"           --结合 {{inputInfo}} 实现表单输入与应用状态之间的双向绑定

9、v-once                                  --结合{{buttomText}}使用,表示数据仅执行一次性绑定,不在因后期数据更新而更新

10、v-html="addHtml"            --可以这样插入一段html,站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击,请只对可信内容使用 HTML 插值,绝不要对用户提供的内容插值

注意:v-html中不可以使用v-bind、v-on等或{{Mustache}}等指令和语法,他仅会对Html内容进行渲染

  1. demo
  2. <div id="app">
  3. <header v-bind:title="message" v-bind:class="headerClass">{{message}}</header>
  4. <section>
  5. <p v-if="change=='a'">如果change等于a,我就会显示</p>
  6. <p v-else-if="change=='b'">如果change等于b,我就会显示</p>
  7. <p v-else>如果change不等于a也不是b,我就会显示</p>
  8. <ul>
  9. <li v-for="i in itemTest">{{i}}</li>
  10. </ul>
  11. <button v-on:click="btnClick">点击就会弹窗</button>
  12. <br/><br/>
  13. <input type="text" name="inputInfo" v-model="inputInfo"> <span>您输入的信息为:{{inputInfo}}</span>
  14. <div v-html="addHtml"></div>
  15.  
  16. </section>
  17. <footer v-once v-bind:style="bottomStyle">{{bottomText}}</footer>
  18. <br/><br/>
  19. </div>
  20.  
  21. <script>
  22. var app=new Vue({
  23. el:"#app",
  24. data:{
  25. message:"我的第一个vue实例",
  26. headerClass:"textTitle",
  27. change:"a",
  28. itemTest:["橘子","桃子","梨子","栗子","李子"],
  29. inputInfo:"我的第一个vue输入实例",
  30. bottomText:"2017-4-13 Vue学习笔记 leona",
  31. bottomStyle:"margin-top:20px;font-size:12px; color:#4cd807",
  32. //v-bind:style='bottomStyle'与{{message}}将会直接作为Html内容被渲染进DOM,不会绑定任何值
  33. addHtml:"<div v-bind:style='bottomStyle'>学习如何插入HTML-{{message}}</div>"
  34. },
  35. methods:{
  36. btnClick:function(){
  37. alert("vue可以监听DOM事件");
  38. }
  39. }
  40. })
  41.  
  42. //添加了v-once的这里,数据改变将不会再更新DOM
  43. app.bottomText="测试数据......";
  44.  
  45. //这里的数据改变后,会实时更新DOM
  46. app.message="Vue实例学习ing";
  47. </script>

Vue.js_础学习之DOM操作的更多相关文章

  1. jquery学习笔记---Dom操作

    一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可以分为DOM Core.HTML-D ...

  2. HTML学习之==>DOM操作

    DOM(Document Object Model 文档对象模型) 一个web页面的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象.可以通过dom对象中j ...

  3. Javascript学习笔记二——操作DOM

    Javascript学习笔记 DOM操作: 一.GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二.querySelector( ...

  4. javascript DOM 操作

    在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...

  5. 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  6. 第25篇 jQuer快速学习(上)---选择器和DOM操作

    这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...

  7. jQuery学习之旅 Item4 细说DOM操作

    jQuery-–DOM操作(文档处理) Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准 ...

  8. vue怎么不通过dom操作获取dom节点

    今天写一个公众号的项目,写了一个vue的搜索组件,点击搜索框时,背景出现一个遮罩,代码结构如下: template:`<div class="searchBar-div"&g ...

  9. jQuery学习笔记之DOM操作、事件绑定(2)

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

随机推荐

  1. C++ vector 和 map的删除

    1.连续内存序列容器(vector,string,deque) 序列容器的erase方法返回值是指向紧接在被删除元素之后的元素的有效迭代器,可以根据这个返回值来安全删除元素. vector<in ...

  2. Atitit. Dwr 抛出异常error解决方案

    Atitit. Dwr 抛出异常error解决方案 1. Dwr3的处理机制..setErrorHandler 1 2. remote Mteh  try catch 1 3. 林吧,子好java 处 ...

  3. utubu远程

    http://www.linuxidc.com/Linux/2014-04/100491.htm 首先安装xfce: sudo apt-get update sudo apt-get install ...

  4. 【Android】15.0 第15章 广播和通知—本章示例主界面

    分类:C#.Android.VS2015: 创建日期:2016-02-28 一.简介 广播(Broadcast):其功能类似于收音机的广播,你只要调到那个台(只要在接收的类中注册了要接收的广播),就能 ...

  5. 用EA生成实体层代码

    在个人版机房重构中.实体层的代码敲得有点儿烦了.不同的实体仅仅是命名不同.代码结构全然一样.遇到反复的事情,就该动动脑.想想办法了. 以下给大家介绍使用EA生成实体层的代码. 首先.建一个类,注意选择 ...

  6. 线程相关函数(6)-pthread_cond_wait(),pthread_cond_signal(), 条件变量

    pthread_cond_tpthread_cond_initpthread_cond_destroypthread_cond_waitpthread_cond_timedwaitpthread_co ...

  7. [system]c/c++调用cat命令

    因为cat并不是一个带返回的命令,而是输出到标准输出.所以使用system("cat /sys/class/gpio/...."); 得不到我们想要的结果. 下面的/bin/ls同 ...

  8. RabbitMQ之路由(Routing)【译】

    在上一节中,我们创建了一个简单的日志系统,可以广播消息到很多接收者. 这一节,我们将在上一节的基础上加一个功能--订阅部分消息.例如,我们只将严重错误信息写入到日志文件保存在磁盘上,同时我们能将所有的 ...

  9. NAT and Traversal NAT(TURN/STUN/ICE)

    http://www.cnblogs.com/whyandinside/archive/2010/12/08/1900492.html -------------------------------- ...

  10. 阿里云ecs开启x11图形化桌面

    阿里云帮助文档:https://www.alibabacloud.com/help/zh/faq-detail/41227.htm 安装云服务器 ECS CentOS 7 图形化桌面 以安装 MATE ...