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
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<script type="text/javascript" src="../assets/js/vue.js"></script>

<title>Helloworld</title>

</head>

<body>

<h1>Hello World</h1>

<hr>

<div id="app">

{{message}}

</div>

<script type="text/javascript">

var app=new Vue({

el:'#app',

data:{

message:'hello Vue!'

}

})

</script>

</body>

</html>

 

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

一、v-if:

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

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

关键代码


1
<div v-if="isLogin">hello 合东！</div>

完整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
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<script type="text/javascript" src="../assets/js/vue.js"></script>

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

</head>

<body>

<h1>v-if 判断是否加载</h1>

<hr>

<div id="app">

<div v-if="isLogin">你好：JSPang</div>

<div v-else>请登录后操作</div>

</div>

<script type="text/javascript">

var app=new Vue({

el:'#app',

data:{

isLogin:false

}

})

</script>

</body>

</html>

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

2、v-show ：

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


1
<div v-show="isLogin">你好：合东</div>

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

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

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

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

一、基本用法：

模板写法


1

2

3
<li v-for="item in items">

{{item}}

</li>

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
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<script type="text/javascript" src="../assets/js/vue.js"></script>

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

</head>

<body>

<h1>v-for指令用法</h1>

<hr>

<div id="app">

<ul>

<li v-for="item in items">

{{item}}

</li>

</ul>

</div>

<script type="text/javascript">

var app=new Vue({

el:'#app',

data:{

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

}

})

</script>

</body>

</html>

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

二、排序

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


1

2

3

4

5
computed:{

sortItems:function(){

return this.items.sort();

}

}

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

如果不重新声明报错：

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


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

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

可以自己编写一个方法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
<ul>

<li v-for="student in students">

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

</li>

</ul>

加入索引序号：


1

2

3

4

5
<ul>

<li v-for="(student,index) in students">

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

</li>

</ul>

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


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 ((x<y)?-1:((x>y)?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
<span>{{ message }}</span>=<span v-text="message"></span><br/>

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


1
<span v-html="msgHtml"></span>

双大括号会将数据解释为纯文本，而非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
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<script type="text/javascript" src="../assets/js/vue.js"></script>

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

</head>

<body>

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

<hr>

<div id="app">

<span>{{ message }}</span>=<span v-text="message"></span><br/>

<span v-html="msgHtml"></span>

</div>

<script type="text/javascript">

var app=new Vue({

el:'#app',

data:{

message:'hello Vue!',

msgHtml:'<h2>hello Vue!</h2>'

}

})

</script>

</body>

</html>

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

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

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

效果如图

程序代码


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
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<script type="text/javascript" src="../assets/js/vue.js"></script>

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

</head>

<body>

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

<hr>

<div id="app">

本场比赛得分： {{count}}<br/>

<button v-on:click="jiafen">加分</button>

<button v-on:click="jianfen">减分</button>

</div>

<script type="text/javascript">

var app=new Vue({

el:'#app',

data:{

count:1

},

methods:{

jiafen:function(){

this.count++;

},

jianfen:function(){

this.count--;

}

}

})

</script>

</body>

</html>

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


1
<button @click="jianfen">减分</button>

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

绑定事件写法：


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

javascript代码：


1

2

3
onEnter:function(){

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

}

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

六、v-model指令

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

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

html文件：


1

2

3

4

5
<div id="app">

<p>原始文本信息：{{message}}</p>

<h3>文本框</h3>

<p>v-model:<input type="text" v-model="message"></p>

</div>

javascript代码：


1

2

3

4

5

6
var app=new Vue({

el:'#app',

data:{

message:'hello Vue!'

}

})

二、修饰符

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

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

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

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


1
<textarea  cols="30" rows="10" v-model="message"></textarea>

四、多选按钮绑定一个值


1

2

3
<h3>多选按钮绑定一个值</h3>

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

<label for='isTrue'>{{isTrue}}</label>

五、多选绑定一个数组


1

2

3

4

5

6

7

8

9

10
<h3>多选绑定一个数组</h3>

<p>

<input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">

<label for="JSP">JSPang</label><br/>

<input type="checkbox" id="Panda" value="Panda" v-model="web_Names">

<label for="JSP">Panda</label><br/>

<input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">

<label for="JSP">PanPan</label>

<p>{{web_Names}}</p>

</p>

六、单选按钮绑定数据


1

2

3

4

5

6
<h3>单选按钮绑定</h3>

<input type="radio" id="one" value="男" v-model="sex">

<label for="one">男</label>

<input type="radio" id="two" value="女" v-model="sex">

<label for="one">女</label>

<p>{{sex}}</p>

七：、v-bind 指令

v-bind是处理HTML中的标签属性的，例如<div></div>就是一个标签，<img>也是一个标签，绑定<img>上的src进行动态赋值。

html文件：


1

2

3
<div id="app">

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

</div>

在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
<!-- 完整语法 -->

<a v-bind:href="url"></a>

<!-- 缩写 -->

<a :href="url"></a>

绑定CSS样式

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

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

1、直接绑定class样式


1
<div :class="className">1、绑定classA</div>

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


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

3、绑定class中的数组


1
<div :class="[classA,classB]">3、绑定class中的数组</div>

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


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

5、绑定style


1
<div :style="{color:red,fontSize:font}">5、绑定style</div>

6、用对象绑定style样式


1
<div :style="styleObject">6、用对象绑定style样式</div>

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
<div v-pre>{{message}}</div>

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

v-cloak指令

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


1

2

3
[v-cloak] {

display: none;

}

1

2

3
<div v-cloak>

{{ message }}

</div>

v-once指令

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


1

2
<div v-once>第一次绑定的值：{{message}}</div>

<div><input type="text" v-model="message"></div>

原文地址：http://blog.51cto.com/13507333/2087495

时间： 2024-10-13 04:06:54

vue内部指令学习经验的相关文章

Vue - 内部指令

1.插值 1 A:<span>TEXT:{{text}}</span> 2 {{text}}会被相应的数据类型text属性值替换,当text值改变时候,文本中的值也会相应的发生变化 3 4 B:有时候只需要渲染一次数据,后续的数据变化不再关心,可以通过"*"实现 5 <span>TEXT:{{*text}}</span> 6 7 C:双大括号标签会将里面的值作为字符串来处理,如果值是HTML代码,可以使用过3个大括号表示 2.表达式 表达

vue基础指令学习

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--定义挂载vue对象的div--> <div id="app"> <todo-list></todo-lis

Vue基础（环境配置、内部指令、全局API、选项、内置组件）

1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装完成后在命令行执行以下命令查看npm包管理器版本 npm -v npm中文文档:https://www.npmjs.cn/ 配置淘宝镜像 npm install cnpm -g --registry=https://registry.npm.taobao.org 然后执行 cnpm -v 查看版本信

vue2.0学习(一)-内部指令

vue2.0学习(一)-内部指令 GitHub源码 https://github.com/sunnyguyan/VueDemo 1.v-if v-else v-show v-if:是vue的一个内部指令,指令用在我们的html中 v-if用来判断是否加载html的DOM,比如我们模拟一个用户登录状态,在用户登录后现实用户名称 <div v-if='isLogin'>你好,guyan</div> 完整的html代码 <!DOCTYPE html> <html lan

vue2.0学习(一)-的内部指令

vue2.0学习(一)-内部指令 GitHub源码 v-if v-else v-show v-if dq 原文地址:https://www.cnblogs.com/guyanv/p/8734904.html

Vue学习之路8-v-on指令学习简单事件绑定之属性

前言 上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用方法,本文介绍一下v-on绑定事件的一些属性的使用方法. v-on绑定指令属性 .stop属性 阻止单击事件继续向上传播(简单点说就是不让父节点及父节点以上的节点事件触发),本示例如果没有stop属性,父节点和爷爷节点事件将会触发,并在控制台输出内容,示例代码和示例结果如下: 1 1 <template> 2 2 <div> 3 3 <p class="title1">{{t

vue学习指南：第二篇(详细Vue基础) - Vue的指令

一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. 绑定数据 2. dom检测 3. vue 实例 靠 new 关键字实例化 vue 对象,使用 mvvm 模型 1. M modal 数据 2. v view 视图 3. vm 全称viewmodal 就是一个vue实例 4. Vue.js 是封装的一个类,参数是个 options 对象 最常用的属性

Vue学习之路7-v-on指令学习之简单事件绑定

前言 在JavaScript中任何一个DOM元素都有其自身存在的事件对象,事件对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置和鼠标按钮的状态等.事件通常与函数结合使用,函数不会在事件发生前被执行.在JavaScript中常见的事件句柄(Event Handlers)主要有: 属性名 描述(对应事件发生在何时...) onabort 图像的加载被中断 onchange 域的内容被改变 ondblclick 当用户双击某个对象时调用的事件句柄 onfocus 元素获得焦点

Vue 超快速学习

Vue 超快速学习 基础知识: 1.vue的生命周期: beforeCreate/created. beforeMount/mounted. beforeUpdate/updated. beforeDestory/destoryed 2.vue常用指令: v-for. v-bind(缩写形式 :prop). v-on(缩写形式 @click='sss'). v-if/v-else/v-else-if. v-model. v-once. v-html. v-show... 3.vue自定义组件: