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

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

  • 开发版本：包含完整的警告和调试模式
  • 生产版本：删除了警告，进行了压缩

二、项目结构搭建

这个部分要视频中有详细讲解。

三、live-server使用

用npm进行全局安装

1
npm install live-server -g

在项目目录中打开

1
live-server

四、编写第一个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>

第2节：v-if  v-else  v-show 指令

通过上节课的学习，我们已经搭建好了开发环境，并且写出了一个简单的HelloWorld程序，我们今天主要学习v-if  v-else 和 v-show。其实我们这一季学习的都是Vue2.0的内部指令。

一、v-if:

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

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

关键代码：

 
1
<div v-if="isLogin">你好，JSPang！</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时，网页就会显示：你好：JSPang，如果为false时，就显示请登录后操作。

2、v-show ：

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

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

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

  • v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
  • v-show：调整css dispaly属性，可以使客户端操作更加流畅。

下节课我们将学习v-for的知识。

第3节：v-for指令 ：解决模板循环问题

v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。

一、基本用法：

模板写法

 
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:'jspang',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');
}

第4节：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>

第5节：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()函数进行整数转换。

你也可以根据键值表来定义键盘事件：

第6节：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="JSPang">JSPang</label><br/>
            <input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
            <label for="JSPang">Panda</label><br/>
            <input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
            <label for="JSPang">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>

第7节：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'
            }
        }
})

第8节：其他内部指令(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>

VUE01指令的更多相关文章

  1. Vue01 Vue介绍、Vue使用、Vue实例的创建、数据绑定、Vue实例的生命周期、差值与表达式、指令与事件、语法糖

    1 Vue介绍 1.1 官方介绍 vue是一个简单小巧的渐进式的技术栈,它提供了Web开发中常用的高级功能:视图和数据的解耦.组件的服用.路由.状态管理.虚拟DOM 说明:简单小巧 -> 压缩后 ...

  2. iOS逆向工程之Hopper中的ARM指令

    虽然前段时间ARM被日本软银收购了,但是科技是无国界的,所以呢ARM相关知识该学的学.现在看ARM指令集还是倍感亲切的,毕竟大学里开了ARM这门课,并且做了不少的实验,当时自我感觉ARM这门课学的还是 ...

  3. 步入angularjs directive（指令）--点击按钮加入loading状态

    今天我终于鼓起勇气写自己的博客了,激动与害怕并存,希望大家能多多批评指导,如果能够帮助大家,也希望大家点个赞!! 用angularjs 工作也有段时间了,总体感觉最有挑战性的还是指令,因为没有指令的a ...

  4. Git小技巧 - 指令别名及使用Beyond Compare作为差异比较工具

    前言 本文主要写给使用命令行来操作Git的用户,用于提高Git使用的效率.至于使用命令还是GUI(Tortoise Git或VS的Git插件)就不在此讨论了,大家根据自己的的喜好选择就好.我个人是比较 ...

  5. 浅谈JSP中include指令与include动作标识的区别

    JSP中主要包含三大指令,分别是page,include,taglib.本篇主要提及include指令. include指令使用格式:<%@ include file="文件的绝对路径 ...

  6. [Django]用户权限学习系列之User权限基本操作指令

    针对Django 后台自带的用户管理系统,虽说感觉还可以,但是为了方便用户一些操作,特别设计自定义的用户权限管理系统. 在制作权限页面前,首先需要了解权限和用户配置权限的指令,上章讲到权限的添加,删除 ...

  7. 机器指令翻译成 JavaScript —— No.5 指令变化

    上一篇,我们通过内置解释器的方案,解决任意跳转的问题.同时,也提到另一个问题:如果指令发生变化,又该如何应对. 指令自改 如果指令加载到 RAM 中,那就和普通数据一样,也是可以随意修改的.然而,对应 ...

  8. ARM的栈指令

    ARM的指令系统中关于栈指令的内容比较容易引起迷惑,这是因为准确描述一个栈的特点需要两个参数: 栈地址的增长方向:ARM将向高地址增长的栈称为递增栈(Descendent Stack),将向低地址增长 ...

  9. IL指令详细表

    名称 说明 Add 将两个值相加并将结果推送到计算堆栈上. Add.Ovf 将两个整数相加,执行溢出检查,并且将结果推送到计算堆栈上. Add.Ovf.Un 将两个无符号整数值相加,执行溢出检查,并且 ...

随机推荐

  1. golang for循环里面创建协程问题的研究

    原本想在一个for里面创建10个协程,这些协程顺序拿到for的递增变量,把这10个递增变量都打印出来.但事与愿违,于是做实验,查书,思考,写出以下记录. golang里,在for循环里面起协程,如下代 ...

  2. 浅谈ConcurrentHashMap实现原理

    我们都知道HashTable是线程安全的类,因为使用了Synchronized来锁整张Hash表来实现线程安全,让线程独占: ConcurrentHashMap的锁分离技术就是用多个锁来控制对Hash ...

  3. 12-oauth密码模式identity server4实现

    1-服务端代码, 配置类,可加 RequireClientSecret=false, 这样调用端就不需要传入client_secret参数 using System.Collections; usin ...

  4. C++的特点

    C和C++ C主要是应用在在驱动层,是面向过程的编程语言,对类型的定义不是很严格.C++主要是应用与应用层,是C语言的一个加强版,可以完全兼容C语言,并且还有很多C语言不具备的特性,如,C++是一种面 ...

  5. 初识java atomic

    2018-8-19 昨天看到java.util.concurrent.atomic相关的文章,之前有过留意但并未去了解,正好有空学习一下.本人理解atomic包是concurrent子包,当是为并发所 ...

  6. 接口测试工具postman（八）上传文件接口

    涉及到选择文件的接口,在[Body]页签下,key选择File选项,会显示“选择文件”按钮,选择本地的文件

  7. linux部署maven

    1.下载安装包 https://maven.apache.org/download.cgi 2.解压,并配置环境变量 vim /etc/profile export MAVEN_HOME=maven目 ...

  8. Java开发工程师(Web方向) - 04.Spring框架 - 第4章.数据访问

    第4章--数据访问 Spring JDBC DAO (Data Access Object) 实现数据访问相关接口(接口和实现分离) ORM (Object Relation Mapping) 对象关 ...

  9. flask源码走读

    Flask-Origin 源码版本 一直想好好理一下flask的实现,这个项目有Flask 0.1版本源码并加了注解,挺清晰明了的,我在其基础上完成了对Werkzeug的理解部分,大家如果想深入学习的 ...

  10. C++错误：Process returned -1073741571 (0xC00000FD)

    最近写程序时,需要将一个一维数组编程二维数组,很简单,写完之后,运行错误! 提示:Process returned -1073741571 (0xC00000FD) 刚开始写的代码如下: #inclu ...