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. ASP.MVC 项目中使用 UEditor 文本编辑器

    1.下载UEditor 源文件,并导入项目中 2.添加项目中需要使用的CSS和JS //Ueditor 文本编辑器必备的StyleBundle和ScriptBundle StyleBundle ued ...

  2. vue2.0过度动画

    vue在插入.更新或移除dom时,提供了多种不同方式的应用过度效果. 包括以下工具: 在css过渡和动画中自动应用class. 可以配合使用第三方css动画库,如animate.css 在过渡钩子函数 ...

  3. Oracle 事务处理

    事务的四大特性 1.原子性(Atomicity) 事务的原子性是指事务中包含的所有操作要么都做,要么都不做,保证数据库是一致的. 2.一致性(Consistency) 一致性是指数据库在事务操作前和事 ...

  4. COS-7设备管理

    操作系统(Operating System,简称OS)是管理和控制计算机硬件与软件资源的计算机程序,是直接运行在“裸机”上的最基本的系统软件,任何其他软件都必须在操作系统的支持下才能运行.   操作系 ...

  5. v4l2 下载

    To clone the master development repository, install git, and run: git clone git://github.com/torvald ...

  6. some words

    For we meet in an hour of change and challenge,              in a dacade of hope and fear,   in an a ...

  7. TNS-12541: TNS:no listener , TNS-12542: TNS:address already in use

    查看数据库监听状态不对$ lsnrctl status LSNRCTL for IBM/AIX RISC System/6000: Version 10.2.0.5.0 - Production on ...

  8. 基于 CodeIgniter 的各类开源项目大全

    名称:STBlog 介绍:STBlog 是一套由CI中国社区驱动,基于Codeigniter MVC 框架编写的多权限博客系统,轻巧/快速/安全/易拓展/界面友好是它的最大特点. 官方:http:// ...

  9. LeetCode——Next Greater Element I

    LeetCode--Next Greater Element I Question You are given two arrays (without duplicates) nums1 and nu ...

  10. 解决com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Specified key was too long; max key length is 767 bytes异常

    错误截图: 解决方法: 用root进入mysql终端,执行以下命令: alter database hive character set latin1;