new  Vue({
         el: "#box",            // element(元素) 当前作用域
         data:{
    msg:"hello!"
 
           },
          methods:{
      changecontent(){
        this.msg='hi!'
      }
    }
        });

一、v-model双向绑定数据

<input type="text" v-model="msg"/>   {{msg}}      // "hello!"  <!--取数据-->
 

二、v-for循环

 
 1 <div id="box">
2 <ul>
3 <!--ng-repeat-->
4 <li v-for="item in arr">
5 <span>{{item.name}}</span>
6 <span>{{item.age}}</span>
7 </li>
8 </ul>
9 </div>
10 <script type="text/javascript">
11 new Vue({
12 el:'#box',
13 data(){
14 return{
15 // arr:['module','views','controlle','aaaaa']
16 arr:[
17 {"name":"xiaohong1","age":12},
18 {"name":"xiaohong2","age":12},
19 {"name":"xiaohong3","age":12},
20 {"name":"xiaohong4","age":12}
21 ]
22 }
23 }
24 })
25 </script>

三、v-show 显示与隐藏

传递的值为布尔值  true  false  默认为false
<div id="box">
<div style="width: 100px;height: 100px;background: black;display: none" v-show="show"></div>
</div>
</body>
<script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>

四、v-if显示与隐藏

与v-show的区别:v-if的隐藏相当于给代码加注释,也就是删除了DOM元素;v-show相当于在操作display属性,隐藏后DOM元素仍然存在,占用内存。

<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
</div> <script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>

五、v-else与v-else-if(必须与v-if一起使用)

<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div> <script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>

v-else-if

<div id="box">
<div style="width: 100px;height: 100px;background: black;" v-if="show"></div>
<div style="width: 100px;height: 100px;background: aqua;" v-else-if=""></div>
<div style="width: 300px;height: 300px;background: blue" v-else=""></div>
</div> <script>
new Vue({
el: "#box",
data(){
return {
show: true
}
}
})
</script>

六、v-bind(简写:)

v-bind:class   三种绑定方法  1、对象型  '{red:isred}'  2、三目型   'isred?"red":"blue"'   3、数组型  '[{red:"isred"},{blue:"isblue"}]'
<div id="box">
<input type="text" v-bind:value="msg">
<a :href="link">点击</a>
</div>
<script>
new Vue({
el: "#box",
data(){
return {
msg: "12222",
link:"1、v-model.html"
}
}
})
</script>

七、v-on 事件

<div id="box">
<!-- v-on -->
<button v-on:click="say">按钮</button>
<!--<button @click="say">按钮</button>-->
</div> <script>
new Vue({
el: "#box",
data(){
return {}
},
methods: {
say() {
alert(111);
}
}
})
</script>

八、v-text读取文本

不能读取html标签

 1 <div id="box">
2 <div v-text="msg"></div>
3 </div>
4
5 <script>
6 new Vue({
7 el: "#box",
8 data(){
9 return {
10 msg:"11111"
11 }
12 },
13 methods: {
14 say() {
15 alert(111);
16 }
17 }
18 })
19 </script>

九、v-html

读取html标签

<div id="box">
<div v-html="msg"></div>
</div> <script>
new Vue({
el: "#box",
data(){
return {
msg:"<h1>121212</h1>"
}
},
methods: {
say() {
}
}
})
</script>

十、v-class (类名)与v-style

 1 <style>
2 .red {
3
4 background: red;
5 }
6
7 .blue {
8 width: 100px;
9 height: 100px;
10 background: blue;
11 }
12
13 </style>
14
15
16 <div id="box">
17 <div style="width: 100px;height: 100px;" v-bind:class='{red:isred}'></div>
18 <!--<div style="width: 100px;height: 100px;" v-bind:class='isred?"red":"blue"'></div>--> <!--三元运算符方式-->
19 <!--<div style="width: 100px;height: 100px;" v-bind:class='[{red:"isred"}]'></div>-->
20
21 </div>
22
23
24 <script>
25 new Vue({
26 el: "#box",
27 data(){
28 return {
29 isred:false
30 }
31 }
32 })
33 </script>

十一、v-once

就是  加载一次  如果用到事件中就是事件只执行一次(@click.once="show")

<div id="box">
<div v-once>{{msg}}</div>
</div> <script type="text/javascript">
new Vue({
el:"#box",
data(){
return{
msg:"qwdqwdqwd"
}
}
})
</script>

十二、v-cloak防闪烁

<div id="box">
<div v-cloak="">欢迎--{{msg}}</div>
</div> <script>
new Vue({
el:"#box",
data(){
return{
msg:"111111"
}
}
})
</script>

十三、v-pre

把标签内部的元素原位输出

<div id="box">
<div v-pre>欢迎--{{msg}}</div>
</div> <script>
new Vue({
el:"#box",
data(){
return{
msg:"111111"
}
}
})
</script>

vue指令总结的更多相关文章

  1. Vue指令总结---小白同学必看

    今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...

  2. 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

  3. vue指令总结(二)

    一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插 ...

  4. vue指令与$nextTick 操作DOM的不同之处

    异步更新队列 可能你还没有注意到,Vue 异步执行 DOM 更新.只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.如果同一个 watcher 被多次触发,只会被推 ...

  5. vue指令概览

    原文 简书原文:https://www.jianshu.com/p/5fd47b7422fd 大纲 1.什么是vue指令 2.向指令中传入参数 3.指令中带入修饰符 4.指令的缩写 5.常见的vue指 ...

  6. vue 指令中el 的 parentNode 为空的问题

    在项目中,突然发现在用vue指令的时候,发现元素el的父元素parentNode变成了null. 代码: if (el.parentNode && !Vue.prototype.$_h ...

  7. vue指令用法

    vue指令 指令式带有 v- 前缀的特殊特性v-text和v-html都属于指令将数据和dom做关联,当表达式的值改变时,响应式地作用在视图 解决大胡子语法闪烁案例 [v-cloak] { dispa ...

  8. Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

  9. Vue框架(二)——Vue指令(v-once指令、v-cloak指令、条件指令、v-pre指令、循环指令)、todolist案例、Vue实例(计算、监听)、组件、组件数据交互

    Vue指令 1.v-once指令  单独使用,限制的标签内容一旦赋值,便不可被动更改(如果是输入框,可以主动修改) <!DOCTYPE html> <html lang=" ...

  10. vue指令大全~~~

    是的,这里有很全的vue指令使用~ 1.简单的vue应用 vue作为一个mvvm框架,想想为什么叫做mvvm? Model是负责数据的存储, View负责页面的展示 Model View 负责业务逻辑 ...

随机推荐

  1. Linux网络配置脚本

    #!/bin/bash ip=$1 if [ -f "/etc/sysconfig/network-scripts/ifcfg-bond1" ] then break else # ...

  2. Maven的SSM框架配置文件:

    applicationContext.xml: <?xml version="1.0" encoding="UTF-8"?> <beans x ...

  3. Extracting info from VCF files

    R, Bioconductor filterVcf: Extract Variants of Interest from a Large VCF File (Paul Shannon) We demo ...

  4. python测试函数的使用时间

    1. 使用装饰器来衡量函数执行时间 有一个简单方法,那就是定义一个装饰器来测量函数的执行时间,并输出结果:(代码通用3.x) import time from functools import wra ...

  5. [转]类不平衡问题与SMOTE过采样算法

    在前段时间做本科毕业设计的时候,遇到了各个类别的样本量分布不均的问题——某些类别的样本数量极多,而有些类别的样本数量极少,也就是所谓的类不平衡(class-imbalance)问题. 本篇简述了以下内 ...

  6. srm开发(基于ssh)(4)

    1 input处理内容补充 -在struts2里面有错误处理机制,当上传文件超过默认的大小,自动返回结果input -在struts.xml中配置input的返回结果 <!-- 配置input结 ...

  7. ssh整合学习(1)

    Hibernate框架 1 hibernate核心配置文件 (0)orm思想 -对象关系映射 (1)数据库信息 (2)hibernate信息 (3)映射配置 (4)hibernate核心配置文件 -如 ...

  8. Entity Framework 6 预热、启动优化

    虽然文章题目是针对EF的,但涉及的内容不仅仅是EF. 场景介绍 目前在做的一个项目,行业门户,项目部分站点按域名划分如下: user.xxx.com:用户登陆注册 owner.xxx.com:个人用户 ...

  9. bitmap==null

    bitmap==null 一.问题介绍 调试找bug的过程出现bitmap==null,而传过来创建bitmap的byte array有数据, 结果看了函数说明: 果断知道是那个图片没有办法decod ...

  10. 获得Ztree选择的节点

    $('#save').click(function(){ if($("#roleForm").form("validate")){ var treeObj = ...