vue指令入门

1.  vue属性、事件、内容绑定

 1 <div id="dv">
 2     <!-- v-cloak能够解决表达式闪烁问题
 3     (当网速较慢时,会先出现{{msg}},当请求完毕后才会将数据替换) -->
 4     <p v-cloak>===={{msg}}====</p>
 5     <p>========={{msg2}}========</p>
 6     <h4 v-text="msg">============</h4>
 7     <!--默认 v-text 没有闪烁问题-->
 8     <!-- v-text会覆盖元素中原本内容,
 9          而插件表达式不会覆盖,可在前后增加想要的元素 -->
10     <div v-text="msg3"></div>
11     <div>{{msg3}}</div>
12     <div v-html="msg3"></div>
13     <!-- v-html能够将数据当成HTML文本显示,会覆盖原有内容 -->
14     <!-- v-text与插件表达式只会讲数据当成普通文本显示 -->
15
16
17     <!-- v-bind:用于绑定属性的指令 -->
18     <input type="text" v-bind:value="mytitle">
19     <!-- v-bind可以简写成 : -->
20     <!-- v-bind原理是将被绑定的属性的值当成js代码执行,
21          所以可以在其中写合法的表达式-->
22     <input type="text" :value="mytitle+‘123‘" @click = "show">
23
24     <!-- v-on:事件绑定机制 -->
25     <!-- v-on:缩写@ -->
26     <input type="button" value="按钮" v-on:click = "show">
27 </div>
28
29
30 <script src="./lib/vue-2.4.0.js"></script>
31 <script>
32     var vm = new Vue({
33         el: ‘#dv‘,//el:代表被操作的元素
34         data:{//存储数据,这里面的数据名不是固定的
35             msg:‘123‘,
36             msg2:‘456‘,
37             msg3:‘<h1>哈哈,你好Vue</h1>‘,
38             mytitle:‘这是我自己定义的title‘
39         },
40         methods:{//这个methods属性定义了当前Vue实例中所有可用的方法
41             show:function () {
42                 alert("hello");
43             }
44         }
45     });
46 </script>

vue/事件、属性、内容绑定

2.  v-on的事件修饰符

vue/v-on的事件修饰符

 3.  v-model双向绑定

 1     <div id="dv">
 2         <h4>{{msg}}</h4>
 3         <input type="text" v-bind:value="msg">
 4         <input type="text" v-model="msg">
 5         <!-- v-bind只能实现数据的单向绑定 -->
 6         <!-- v-model能够实现数据的双向绑定
 7              注意:v-model只能运用在表单元素中-->
 8     </div>
 9     <script src="./lib/vue-2.4.0.js"></script>
10     <script>
11         var vm = new Vue({
12             el: ‘#dv‘,
13             data:{
14                 msg:‘123‘,
15             },
16             methods:{
17             }
18         });
19     </script>

vue/v-model双向绑定

4.  vue中的样式

 1 <!-- 注意:这里的class都需要使用 v-bind 进行数据绑定 -->
 2 <div id="dv">
 3     <!-- 第一种使用方式:直接传递一个数组 -->
 4     <h2 v-bind:class="[‘red‘,‘thin‘]">hello world!</h2>
 5     <!-- 第二种使用方法:可在数组中使用三元表达式 -->
 6     <h2 v-bind:class="[‘red‘,‘thin‘,flag?‘italic‘:‘‘]">hello world!</h2>
 7     <!-- 第三种使用方法:使用对象代替三元表达式,提高可读性 -->
 8     <h2 v-bind:class="[‘red‘,‘thin‘,{‘spacing‘:flag}]">hello world!</h2>
 9     <!-- 第四种:使用对象代替数组 -->
10     <!--<h2 v-bind:class="{red:true,italic:true,spacing:true,thin:true}">hello world!</h2>-->
11     <h2 v-bind:class="obj">hello world!</h2>
12 </div>
13 <script src="./lib/vue-2.4.0.js"></script>
14 <script>
15     var vm = new Vue({
16         el: ‘#dv‘,
17         data:{
18             flag:true,
19             obj:{red:true,italic:true,spacing:true,thin:true}
20         },
21         method:{}
22     });
23 </script>
24
25
26
27 <div id="dv2">
28     <!-- 内联样式绑定: -->
29     <!-- 第一种:传入一个对象 -->
30     <h3 :style="{color:‘red‘,‘font-weight‘:200}">内联样式绑定</h3>
31
32     <!-- 第二种:将对象提取出来 -->
33     <h3 :style="styleFlag">内联样式绑定</h3>
34
35     <!-- 第三种:通过数组同时传入多个对象 -->
36     <h3 :style="[styleFlag,styleFlag2]">内联样式绑定</h3>
37 </div>
38 <script>
39     var vm2= new Vue({
40         el:‘#dv2‘,
41         data:{
42             styleFlag:{color:‘red‘,‘font-weight‘:200},
43             styleFlag2:{color:‘#000‘}
44         }
45     });
46 </script>

vue中的样式

5.  v-for循环指令

 1     <div id="dv">
 2         <!-- v-for遍历数组,item代表数组的每一项(与PHP类似),i代表每一项的索引 -->
 3         <!--<p v-for="item in arr">{{item}}</p>-->
 4         <p v-for="(item,i) in arr">项:{{item}}----索引:{{i}}</p>
 5         <br>--------------------<br>
 6
 7         <!-- v-for遍历 对象数组,有i代表索引与上相同 -->
 8         <p v-for="user in users">user.id:{{user.id}}----user.name:{{user.name}}</p>
 9         <br>--------------------<br>
10         <!-- v-for遍历对象,出现形式为 键值对 的形式,
11         第一个参数为值,第二个参数为键,有第三个参数 i 为索引值 -->
12         <p v-for="(val,key) in obj">值:{{val}}----键:{{key}}</p>
13
14         <!-- v-for迭代数字 -->
15         <p v-for="num in 3"></p>
16     </div>
17
18     <script src="./lib/vue-2.4.0.js"></script>
19     <script>
20         var vm = new Vue({
21             el:‘#dv‘,
22             data:{
23                 arr:[1,2,3,4],
24                 users:[
25                     {id:1,name:‘user1‘},
26                     {id:2,name:‘user2‘},
27                     {id:3,name:‘user3‘},
28                     {id:4,name:‘user4‘}
29                 ],
30                 obj:{
31                     id:1,
32                     name:‘user‘,
33                     sex:‘男‘,
34                     age:‘22‘
35                 }
36             }
37         })
38     </script>

vue/v-for循环

6.  v-if、v-show判断

 1 <div id="dv">
 2         <input type="button" value="toggle" @click="flag=!flag">
 3         <!-- v-if会重复的创建与删除元素,v-show只是切换改变display:none样式 -->
 4         <!-- v-if有较高的切换性能消耗,v-show有较高的初始渲染消耗 -->
 5
 6         <!-- 如果元素涉及到频繁的切换,最好不要使用 v-if -->
 7         <!-- 如果元素可能永远也不会被显示出来,则不要使用v-show -->
 8         <h3 v-if="flag">这是一个v-if控制的元素</h3>
 9         <h3 v-show="flag">这是一个v-show控制的元素</h3>
10     </div>
11     <script src="./lib/vue-2.4.0.js"></script>
12     <script>
13         var vm = new Vue({
14             el:‘#dv‘,
15             data:{
16                 flag:false
17             }
18         });
19     </script>

vue/v-if、v-show

原文地址:https://www.cnblogs.com/Smile-W/p/11002423.html

时间: 2024-11-05 23:33:35

vue指令入门的相关文章

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

今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪吧. v-text :string  用法:更新元素的textContent,更新部分的textContent,需要使用{{Mustache}}插值 v-html: string 用法:更新元素的innerHTML:注意:网站动态渲染任意HTML,容易导致XXS攻击 v-show:any 用法:根据

Vue.js 入门指南之“前传”(含sublime text 3 配置)

题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴级别”的前端开发人员,大牛请绕过. 1,下载安装Node.js 去 Node.js 官网下载一个Windows环节的安装包 node-v6.2.0-x64.rar 文件,一路安装下去即可.官网访问很慢,可以试试中文网 http://nodejs.cn/ 2,配置Vue环境 一开始看<基于Webpac

Vue指令实战:结合bootstrap做一个用户信息输入表格

结合前面的vue指令做了个小例子,用户在表单里面输入用户名和年龄,点击"添加"以后会保存到用户信息表里面 <!DOCTYPE html> <html> <head lang="en">     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-

Vue.js 入门指南之“前传”

题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧.此文献给跟我一样“白痴级别”的前端开发人员,大牛请绕过. 1,下载安装Node.js 去 Node.js 官网下载一个Windows环节的安装包 node-v6.2.0-x64.rar 文件,一路安装下去即可.官网访问很慢,可以试试中文网 http://nodejs.cn/ 2,配置Vue环境 一开始看<基于Webpac

VUE指令-样式绑定v-bind

样式绑定v-bind 操作元素的 class 列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以用 v-bind 处理它们:只需要通过表达式计算出字符串结果即可.不过,字符串拼接麻烦且易错.因此,在将 v-bind 用于 class 和 style 时,Vue.js 做了专门的增强.表达式结果的类型除了字符串之外,还可以是对象或数组. v-bind:style <!-- 格式v-bind:style="{ key:value }" --> <!--

VUE指令-列表渲染v-for

v-for 指令根据一组数组的选项列表进行渲染.v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名. v-for="item in items" <!-- 格式v-for="item in items" --> <div style="height: 150px;background: #CCC;margin: 5px;"> <div s

VUE指令-数据绑定v-model

用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值而总是将 Vue 实例的数据作为数据来源.你应该通过 JavaScript 在组件的 data选项中声明初始值. VUE

vue指令大全~~~

是的,这里有很全的vue指令使用~ 1.简单的vue应用 vue作为一个mvvm框架,想想为什么叫做mvvm? Model是负责数据的存储, View负责页面的展示 Model View 负责业务逻辑处理,对数据加工后视图展示 MVVM的作用是业务逻辑代码与视图代码完全分离,各自的职责更加清晰~ <body> <!--mvvm里面的v--> <div id="app"> {{val}} </div> <script src=&quo

Vue.js 入门之路

最近在学习 Vue ,简单的介绍一下Vue.js,它是一款流行的 JavaScript 前端框架,旨在更好地组织与简化 Web 开发,Vue 是面向数据的编程,也就是 MVVM 模式.想了解的更多就去Vue.js官网. Vue.js 入门 很多大牛都说学习一门编程最好的方式就是阅读官方文档,这是不可否认的.问题是像我这种新人阅读那种干巴巴的文档确实有点无聊又吃力,附带效果:头皮发麻.恰好在网上找到了一些我觉得很实用的教程,在这里分享出来,希望能帮助和我一样的新手尽快的入门.在学习 Vue.js