vue - 指令系统
指令系统：
所谓指令系统，大家可以联想咱们的cmd命令行工具，只要我输入一条正确的指令，系统就开始干活了。
在vue中，指令系统，设置一些命令之后，来操作我们的数据属性，并展示到我们的DOM上。
1. v-if v-else-if v-else
2. v-show
一般来说，
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。
3. v-bind 简写为 :
4. v-on 简写为 :@
5. v-for
6. v-html
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding: 0; margin: 0;}
.box{width: 100px;height: 100px;background-color: red;}
.box2{background-color: green;}
.lunbo ul{width: 180px; overflow: hidden; list-style: none;}
.lunbo ul li{float: left; width: 30px; height: 30px; background-color: purple; margin-left: 5px; line-height: 30px; text-align: center;
color: white;}
</style>
</head>
<body> <div id="app">
<!-- 插值语法 react{} angular{{}} {% %} <%= %> -->
<!-- 除了 if else -->
<h3>{{123}}</h3>
<h3>{{msg}}</h3>
<h3>{{1>2?"真的":"假的"}}</h3> <div v-if = 'show'>哈哈哈哈</div> <!-- <button v-on:click = 'clickHandler' >切换</button> --> <button @click = 'clickHandler' >切换</button> <div v-if="Math.random() > 0.5">
Now you see me
</div>
<div v-else>
Now you don't
</div> <h3 v-show='iShow' v-bind:title="title">我是一个三级标题</h3> <img v-bind:src="imgSrc" :title="time" width="100px;height100px;"> <!--
v-bind: 简便写法 ：
v-on:click 简便写法 @click
--> <div class="box" :class="{box2:isGreen,box3:isYellow}"></div> <button @click='changeColor'>切换颜色</button> <button @click='count+=1'>加{{count}}</button> <!--
声明式的指令
命令式的
--> <div class='lunbo'>
<img :src="currentSrc" @mouseenter='closeTimer' @mouseleave='openTimer' width="100" height="100">
<ul>
<li v-for = "(item,index) in imgArr" @click='currentHandler(item)'>{{index+1}}</li>
</ul>
</div> <button @click='nextImg'>下一张</button> <div v-html="str"></div>
</div> <script type="text/javascript" src="./vue.js"></script> <script type="text/javascript"> // vue的实例化对象 // MVVM model view viewmodel // MTV model template view // 指令系统 v-* // 核心思想概念： 数据驱动视图 ，双向的数据绑定 var app = new Vue({
el: "#app",
data: {
msg:"今天学习vue",
msg2:"今天学习vue2",
show:false,
iShow:true,
title:"哈哈哈",
imgSrc:"./5.jpg",
time: `页面加载于${new Date().toLocaleString()}`,
isGreen:true,
isYellow:true,
count:0,
imgArr:[
{id:1,src:'./1.jpg'},
{id:2,src:'./2.jpg'},
{id:3,src:'./3.jpg'},
{id:4,src:'./4.jpg'}
],
currentSrc:"./1.jpg",
currntIndex:0,
timer:null,
str:"<p>嘿嘿嘿</p>"
},
created(){
// 加载dom之前
// 开启定时器
// 获取cookie session 提前获取出来
this.timer = setInterval(this.nextImg,2000)
},
methods:{
clickHandler(){
this.show = !this.show;
},
changeColor(){
this.isGreen = !this.isGreen
},
currentHandler(item){
this.currentSrc = item.src
},
nextImg(){
if (this.currntIndex == this.imgArr.length-1){
this.currntIndex=-1
}
this.currntIndex++
this.currentSrc = this.imgArr[this.currntIndex].src
},
closeTimer(){
clearInterval(this.timer)
},
openTimer(){
this.timer = setInterval(this.nextImg,2000)
} } }) // 直接取操作dom 但是不介意这样用！，应该使用vue对dom操作
console.log(app)
console.log(app.$el)
console.log(app.$data.msg)
console.log(app.msg)
console.log(app.msg2) </script> </body>
</html> <!-- 找相关资料
开发者网络 上一张； -->
vue - 指令系统的更多相关文章
- day67:Vue:es6基本语法&vue.js基本使用&vue指令系统
目录 Vue前戏:es6的基本语法 1.es6中的let特点 1.1.局部作用域 1.2.不存在变量提升 1.3.不能重复声明 1.4.let声明的全局变量不从属于window对象,var声明的全局变 ...
- vue——指令系统
指令系统,可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. 在vue中提供了一套为数 ...
- vue 指令系统的使用
所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...
- vue指令系统
一.vue基础 使用vue需在官网上先下载vue.js,网址:https://cn.vuejs.org/v2/guide/installation.html.然后: 在project中引入vue.js ...
- 3. Vue - 指令系统
一.vue指令 (1) v-if // 条件判断 如果条件成立就在页面上生成一个标签并显示出来 (2) v-show //DOM中都存在只是显示与否 (3) v-for //注意 v-bind:key ...
- python全栈开发之路
一.Python基础 python简介 python数据类型(数字\字符串\列表) python数据类型(元组\字典) python数据类型(集合) python占位符%s,%d,%r,%f prin ...
- vue-learning：3-template-{{}}-and-v-html
插值{{ }} 和 v-html 本节开始,我们按如下顺序学习vue模板API-指令.点击各部分的DEMO可在线查看代码 输出字符串文本内容的插值:{{}} 输出HMTL元素作为内容的指令:v-htm ...
- vue-learning：2 - template - directive
指令 directive 在上一节我们知道,VUE的template模板通过VUE指令API实现与页面的视图层联系.所以本节将聚集在实现视图层交互的VUE指令系统directive的基础使用. 我们先 ...
- Vue的指令系统、计算属性和表单输入绑定
指令系统 指令 (Directives) 是带有 v- 前缀的特殊特性.指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况,稍后我们再讨论).指令的职责是,当表达式的值改变 ...
随机推荐
- CentOS运行级别和开机过程
linux运行级别: 1)0:关机 2)1:单用户 3)2:多用户状态没有网络服务 4)3:多用户状态有网络服务 5)4:系统未使用保留给用户 6)5:图形界面 7)6:系统重启 注:常用运行级别是3 ...
- SharePoint 2010用“localhost”方式访问网站，File not found问题处理方式
场景:本地服务器上,用“localhost”方式访问网站:在某网站集(Site Collection)下的子网站(Sub Site)中,点击网站权限菜单(Site permissions)等关于调用L ...
- LINUX 环境变量总结
1.概述 Linux是一个多用户的操作系统.多用户意味着每个用户登录系统后,都有自己专用的运行环境.而这个环境是由一组变量所定义,这组变量被称为环境变量.用户可以对自己的环境变量进行修改以达到对环境的 ...
- 双十二“MathType”限时6折特惠
MathType是由美国Design Science公司开发功能强大的公式编辑器,专门用来对数学公式的编辑,与常见的文字处理软件和演示程序配合使用,能够在各种文档中加入复杂的数学公式和符号.双十二期间 ...
- spring配置文件中bean标签
<bean id="beanId"(1) name="beanName"(2) class="beanClass"(3) parent ...
- XML高速入门
XML是什么 Extensible Markup Language 自己定义标签: 用来数据传输: 可扩展标记语言,是一种类似超文本标记语言的标记语言. 与HTML的比較: 1.不是用来替代HTML的 ...
- shell基础（六）--字符串和数组
对文本处理,单独用shell来处理还是比较薄弱.所以shell就引用了awk and sed这两个命令.我们今天不说这个 一 字符串 字符串是shell编程中最常用最有用的数据类型,因为你定义一个变 ...
- java.lang.OutOfMemoryError 错误分类
java.lang.OutOfMemoryError: Java heap space原因:Heap内存溢出,意味着Young和Old generation的内存不够.解决:调整java启动参数 -X ...
- storm中的基本概念
Storm是一个流计算框架,处理的数据是实时消息队列中的,所以需要我们写好一个topology逻辑放在那,接收进来的数据来处理,所以是通过移动数据平均分配到机器资源来获得高效率. Storm的优点是全 ...
- abs()
abs() 用于返回一个数值的绝对值 In [1]: abs(10) Out[1]: 10 In [2]: abs(-10) Out[2]: 10 In [3]: abs(-10.9) Out[3]: ...