Vue.js_础学习之DOM操作
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内容进行渲染
- demo:
- <div id="app">
- <header v-bind:title="message" v-bind:class="headerClass">{{message}}</header>
- <section>
- <p v-if="change=='a'">如果change等于a,我就会显示</p>
- <p v-else-if="change=='b'">如果change等于b,我就会显示</p>
- <p v-else>如果change不等于a也不是b,我就会显示</p>
- <ul>
- <li v-for="i in itemTest">{{i}}</li>
- </ul>
- <button v-on:click="btnClick">点击就会弹窗</button>
- <br/><br/>
- <input type="text" name="inputInfo" v-model="inputInfo"> <span>您输入的信息为:{{inputInfo}}</span>
- <div v-html="addHtml"></div>
- </section>
- <footer v-once v-bind:style="bottomStyle">{{bottomText}}</footer>
- <br/><br/>
- </div>
- <script>
- var app=new Vue({
- el:"#app",
- data:{
- message:"我的第一个vue实例",
- headerClass:"textTitle",
- change:"a",
- itemTest:["橘子","桃子","梨子","栗子","李子"],
- inputInfo:"我的第一个vue输入实例",
- bottomText:"2017-4-13 Vue学习笔记 leona",
- bottomStyle:"margin-top:20px;font-size:12px; color:#4cd807",
- //v-bind:style='bottomStyle'与{{message}}将会直接作为Html内容被渲染进DOM,不会绑定任何值
- addHtml:"<div v-bind:style='bottomStyle'>学习如何插入HTML-{{message}}</div>"
- },
- methods:{
- btnClick:function(){
- alert("vue可以监听DOM事件");
- }
- }
- })
- //添加了v-once的这里,数据改变将不会再更新DOM
- app.bottomText="测试数据......";
- //这里的数据改变后,会实时更新DOM
- app.message="Vue实例学习ing";
- </script>
Vue.js_础学习之DOM操作的更多相关文章
- jquery学习笔记---Dom操作
一.DOM操作的分类 DOM(document object model)是一种与浏览器.平台.语言无关的接口,使用该接口可以访问页面中的·所有组件.DOM的操作可以分为DOM Core.HTML-D ...
- HTML学习之==>DOM操作
DOM(Document Object Model 文档对象模型) 一个web页面的展示,是由html标签组合成的一个页面,dom对象实际就是将html标签转换成了一个文档对象.可以通过dom对象中j ...
- Javascript学习笔记二——操作DOM
Javascript学习笔记 DOM操作: 一.GetElementById() ID在HTML是唯一的,getElementById()可以定位唯一的一个DOM节点 二.querySelector( ...
- javascript DOM 操作
在javascript中,经常会需要操作DOM操作,在此记录一下学习到DOM操作的知识. 一.JavaScript DOM 操作 1.1.DOM概念 DOM :Document Object Mode ...
- 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo
前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...
- 第25篇 jQuer快速学习(上)---选择器和DOM操作
这个文章经历的时间比较长,不是因为jQuery比较难,而是东西比较多,真心是个体力活.所以本来想把jQuery做成一篇去写,但由于写的时候发现jQuery发现写成一篇的话过于长,对于阅读起来也不是一个 ...
- jQuery学习之旅 Item4 细说DOM操作
jQuery-–DOM操作(文档处理) Dom是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用该接口可以轻松访问页面中所有的标准 ...
- vue怎么不通过dom操作获取dom节点
今天写一个公众号的项目,写了一个vue的搜索组件,点击搜索框时,背景出现一个遮罩,代码结构如下: template:`<div class="searchBar-div"&g ...
- jQuery学习笔记之DOM操作、事件绑定(2)
jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...
随机推荐
- C++ vector 和 map的删除
1.连续内存序列容器(vector,string,deque) 序列容器的erase方法返回值是指向紧接在被删除元素之后的元素的有效迭代器,可以根据这个返回值来安全删除元素. vector<in ...
- Atitit. Dwr 抛出异常error解决方案
Atitit. Dwr 抛出异常error解决方案 1. Dwr3的处理机制..setErrorHandler 1 2. remote Mteh try catch 1 3. 林吧,子好java 处 ...
- utubu远程
http://www.linuxidc.com/Linux/2014-04/100491.htm 首先安装xfce: sudo apt-get update sudo apt-get install ...
- 【Android】15.0 第15章 广播和通知—本章示例主界面
分类:C#.Android.VS2015: 创建日期:2016-02-28 一.简介 广播(Broadcast):其功能类似于收音机的广播,你只要调到那个台(只要在接收的类中注册了要接收的广播),就能 ...
- 用EA生成实体层代码
在个人版机房重构中.实体层的代码敲得有点儿烦了.不同的实体仅仅是命名不同.代码结构全然一样.遇到反复的事情,就该动动脑.想想办法了. 以下给大家介绍使用EA生成实体层的代码. 首先.建一个类,注意选择 ...
- 线程相关函数(6)-pthread_cond_wait(),pthread_cond_signal(), 条件变量
pthread_cond_tpthread_cond_initpthread_cond_destroypthread_cond_waitpthread_cond_timedwaitpthread_co ...
- [system]c/c++调用cat命令
因为cat并不是一个带返回的命令,而是输出到标准输出.所以使用system("cat /sys/class/gpio/...."); 得不到我们想要的结果. 下面的/bin/ls同 ...
- RabbitMQ之路由(Routing)【译】
在上一节中,我们创建了一个简单的日志系统,可以广播消息到很多接收者. 这一节,我们将在上一节的基础上加一个功能--订阅部分消息.例如,我们只将严重错误信息写入到日志文件保存在磁盘上,同时我们能将所有的 ...
- NAT and Traversal NAT(TURN/STUN/ICE)
http://www.cnblogs.com/whyandinside/archive/2010/12/08/1900492.html -------------------------------- ...
- 阿里云ecs开启x11图形化桌面
阿里云帮助文档:https://www.alibabacloud.com/help/zh/faq-detail/41227.htm 安装云服务器 ECS CentOS 7 图形化桌面 以安装 MATE ...