vue内部指令学习经验-创新互联-成都快上网建站

快上网建站品牌

13518219792

vue内部指令学习经验-创新互联

一、走起Vue2.0

一、下载Vue2.0的两个版本：

官方网站：http://vuejs.org/

创新互联网站建设公司是一家服务多年做网站建设策划设计制作的公司,为广大用户提供了做网站、成都网站设计，成都网站设计，广告投放，成都做网站选创新互联，贴合企业需求，高性价比，满足客户不同层次的需求一站式服务欢迎致电。

· 开发版本：包含完整的警告和调试模式

· 生产版本：删除了警告，进行了压缩

二、编写第一个HelloWorld代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

lang="en">

   charset="UTF-8">

   

   </strong>Helloworld<strong>

   

Hello World

   

   id="app">

       {{message}}

   

   

二、v-if  v-else  v-show 指令

一、v-if:

v-if:是vue 的一个内部指令，指令用在html中。

v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。

关键代码

1

v-if="isLogin">hello 合东！

完整html代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

lang="en">

   charset="UTF-8">

   

   </strong>v-if & v-show & v-else<strong>

   

v-if 判断是否加载

   

   id="app">

       v-if="isLogin">你好：JSPang

       v-else>请登录后操作

   

   

这里在vue的data里定义了isLogin的值，当它为true时，网页就会显示：你好：合东，如果为false时，就显示请登录后操作。

2、v-show ：

调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。

1

你好：合东

3、v-if 和v-show的区别：

· v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。

· v-show：调整css dispaly属性，可以使客户端操作更加流畅。

三、v-for指令 ：解决模板循环问题

一、基本用法：

模板写法

1

2

3

v-for="item in items">

       {{item}}

js写法

1

2

3

4

5

6

var app=new Vue({

    el:'#app',

    data:{

        items:[20,23,18,65,32,19,54,56,41]

    }

})

完整代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

lang="en">

   charset="UTF-8">

   

   </strong>V-for 案例<strong>

   

v-for指令用法

   

   id="app">

     

             v-for="item in items">

                   {{item}}

             

         

   

   

这是一个最基础的循环，先在js里定义了items数组，然后在模板中用v-for循环出来，需要注意的是，需要那个html标签循环，v-for就写在那个上边。

二、排序

三、已经顺利的输出了定义的数组，但是需要在输出之前给数组排个序，那就用到了Vue的computed:属性。

1

2

3

4

5

computed:{

   sortItems:function(){

         return this.items.sort();

   }

}

在computed里新声明了一个对象sortItems，如果不重新声明会污染原来的数据源，这是Vue不允许的，所以要重新声明一个对象。

如果不重新声明报错：

vue内部指令学习经验

如果一切顺利的话，已经看到了结果，但是这个小程序还是有个小Bug的，现在把数组修改成这样。

1

items:[20,23,18,65,32,19,5,56,41]

把其中的54修改成了5，我们再看一下结果，发现排序结果并不是想要的

vue内部指令学习经验

可以自己编写一个方法sortNumber，然后传给的sort函数解决这个Bug。

1

2

3

 function sortNumber(a,b){

           return a-b

 }

用法

1

2

3

4

5

computed:{

   sortItems:function(){

   return this.items.sort(sortNumber);

   }

}

经过一番折腾终于实现了真正的数字排序。

三、对象循环输出

上边循环的都是数组，那来看一个对象类型的循环是如何输出的。

先定义个数组，数组里边是对象数据

1

2

3

4

5

6

students:[

 {name:'合东',age:32},

 {name:'Panda',age:30},

 {name:'PanPaN',age:21},

 {name:'King',age:45}

]

在模板中输出

1

2

3

4

5

     v-for="student in students">

          {{student.name}} - {{student.age}}

     

加入索引序号：

1

2

3

4

5

     

       {{index}}：{{student.name}} - {{student.age}}

     

排序，先加一个原生的对象形式的数组排序方法：

1

2

3

4

5

6

7

8

//数组对象方法排序:

function sortByKey(array,key){

   return array.sort(function(a,b){

     var x=a[key];

     var y=b[key];

     return ((xy)?1:0));

  });

}

有了数组的排序方法，在computed中进行调用排序

1

2

3

sortStudent:function(){

   return sortByKey(this.students,'age');

}

注意：vue低版本中 data里面的items和computed里面可以一样，但是高版本，是不允许相同名称。

四、v-text & v-html

已经会在html中输出data中的值了，已经用的是{{xxx}},这种情况是有弊端的，就是当网速很慢或者javascript出错时，会暴露的{{xxx}}。Vue提供的v-text,就是解决这个问题的。代码：

1

{{ message }}=v-text="message">

如果在javascript中写有html标签，用v-text是输出不出来的，这时候就需要用v-html标签了。

1

v-html="msgHtml">

双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，需要使用v-html 指令。

需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS***。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。

完整代码：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

lang="en">

   charset="UTF-8">

   

   </strong>v-text & v-html 案例<strong>

   

v-text & v-html 案例

   

   id="app">

       {{ message }}=v-text="message">

       v-html="msgHtml">

   

   

五、v-on：绑定事件监听器

v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。

一、使用绑定事件监听器，编写一个加分减分的程序。

效果如图

vue内部指令学习经验

程序代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

lang="en">

   charset="UTF-8">

   

   </strong>v-on事件监听器<strong>

   

v-on 事件监听器

   

   id="app">

      本场比赛得分： {{count}}

     v-on:click="jiafen">加分

     v-on:click="jianfen">减分

   

   

v-on 还有一种简单的写法，就是用@代替。

1

@click="jianfen">减分

除了绑定click之外，还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到count上。

绑定事件写法：

1

type="text" v-on:keyup.enter="onEnter" v-model="secondCount">

javascript代码：

1

2

3

onEnter:function(){

   this.count=this.count+parseInt(this.secondCount);

}

因为文本框的数字会默认转变成字符串，所以需要用parseInt()函数进行整数转换。也可以根据键值表来定义键盘事件：

vue内部指令学习经验

六、v-model指令

v-model指令，理解为绑定数据源。就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。

一、看一个最简单的双向数据绑定代码：

html文件：

1

2

3

4

5

id="app">

   

原始文本信息：{{message}}

   

文本框

   

v-model:type="text" v-model="message">

javascript代码：

1

2

3

4

5

6

var app=new Vue({

 el:'#app',

 data:{

      message:'hello Vue!'

 }

})

二、修饰符

· .lazy：取代 imput 监听 change 事件。

· .number：输入字符串转为数字。

· .trim：输入去掉首尾空格。

三、文本区域加入数据绑定

1

cols="30" rows="10" v-model="message">

四、多选按钮绑定一个值

1

2

3

多选按钮绑定一个值

type="checkbox" id="isTrue" v-model="isTrue">

for='isTrue'>{{isTrue}}

五、多选绑定一个数组

1

2

3

4

5

6

7

8

9

10

     

多选绑定一个数组

     

           

           for="JSP">JSPang

           

           for="JSP">Panda

           

           for="JSP">PanPan

           

{{web_Names}}

     

六、单选按钮绑定数据

1

2

3

4

5

6

单选按钮绑定

for="one">男

for="one">女

{{sex}}

七：、v-bind 指令

v-bind是处理HTML中的标签属性的，例如

就是一个标签，也是一个标签，绑定上的src进行动态赋值。

html文件：

1

2

3

id="app">

   v-bind:src="imgSrc"  width="200px">

在html中我们用v-bind:src=”imgSrc”的动态绑定了src的值，这个值是在vue构造器里的data属性中找到的。

js文件：

1

2

3

4

5

6

var app=new Vue({

   el:'#app',

   data:{

         imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg'

    }

})

在data对象在中增加了imgSrc属性来供html调用。

v-bind 缩写

1

2

3

4

v-bind:href="url">

:href="url">

绑定CSS样式

在工作中我们经常使用v-bind来绑定css样式：

在绑定CSS样式是，绑定的值必须在vue中的data属性中进行声明。

1、直接绑定class样式

1

:class="className">1、绑定classA

2、绑定classA并进行判断，在isOK为true时显示样式，在isOk为false时不显示样式。

1

:class="{classA:isOk}">2、绑定class中的判断

3、绑定class中的数组

1

class="[classA,classB]">3、绑定class中的数组

4、绑定class中使用三元表达式判断

1

class="isOk?classA:classB">4、绑定class中的三元表达式判断

5、绑定style

1

5、绑定style

6、用对象绑定style样式

1

6、用对象绑定style样式

1

2

3

4

5

6

7

8

9

var app=new Vue({

  el:'#app',

  data:{

      styleObject:{

          fontSize:'24px',

          color:'green'

           }

       }

})

八、其他内部指令(v-pre & v-cloak & v-once)

v-pre指令

在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。

1

v-pre>{{message}}

这时并不会输出message值，而是直接在网页中显示{{message}}

v-cloak指令

在vue渲染完指定的整个DOM后才进行显示。它必须和CSS样式一起使用，

1

2

3

[v-cloak] {

 display: none;

}

1

2

3

v-cloak>

 {{ message }}

v-once指令

在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。

1

2

v-once>第一次绑定的值：{{message}}

type="text" v-model="message">

创新互联www.cdcxhl.cn，专业提供香港、美国云服务器，动态BGP最优骨干路由自动选择，持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证， 机房独有T级流量清洗系统配攻击溯源，准确进行流量调度，确保服务器高可用性。佳节活动现已开启，新人活动云服务器买多久送多久。


本文标题：vue内部指令学习经验-创新互联
URL地址：http://kswjz.com/article/idheg.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

其他资讯

行业动态

企业网站建设的重要性！

现在虽然是移动互联网时代，但企业网站依然重要，包含PC站点，移动站。可以说企业网站关系企业的未来发展和前途，尤其对中小企业更是如此，一些中小企业老板，对自己的名片很在乎，因为这是个门面。...

服务项目

联系吧 在百度地图上找到我们

电话：13518219792

如遇占线或暂未接听请拨：136xxx98888

业务咨询 技术咨询 售后服务
网站设计
温江网站设计
成都网站设计
教育网站设计方案
成都网站设计
网站制作
成都网站制作
重庆网站制作
手机网站制作
四川成都网站制作
联系我们
电话：13518219792
邮箱：631063699@qq.com
地址：成都青羊区锦天国际1002号
网址：www.kswjz.com
网站建设
成都网站建设
阿坝网站建设
响应式网站建设
营销型网站建设

微信二维码

Copyright © 2002-2023 www.kswjz.com 快上网建站品牌 QQ：244261566 版权所有 备案号：蜀ICP备19037934号