Vue学习笔记

第一节：

1.下载Vue2.0的两个版本：

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

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

2.项目结构搭建：

image.png

3、live-server使用

用npm进行全局安装
npm install live-server -g

在项目目录中打开
live-server

4、编写第一个HelloWorld代码

    <!DOCTYPE html>
    <head>
            <meta charset="UTF-8">
            <script type="text/javascript" src="../assets/js/vue.js"></script>
            <title>Helloworld</title>
    <body>
              <h1>HelloWorld</h1>
              <hr>
              <div id="app">
                       {{message}}
               </div>
               <script type="text/javascript">
                      var app = new Vue({
                            el:"#qpp",
                            data:{
                                  message:"hello world"
                            }
                       })
                </script> 
    </body>
    </head>
    </body>
    </html>

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

1.v-if:

v-if:是vue 的一个内部指令，指令用在我们的html中。
v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。
关键代码：

<div v-if="isLogin">你好，欢迎Joey</idv> 
<div v-else>请登录！</div>

2、v-show ：

调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
<div v-show="isLogin">你好：JSPang</div>

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

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

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

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

1、基本用法：

模版写法

<li v-for="item in items">
     {{item}}
</li>

js写法

  var app = new Vue({
          el:'#app',
          data:{
                  items:[20,23,18,65,32,19,54,56,41]
          }
  })

完整代码

<!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就写在那个上边。

2、排序：

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

  computed:{
          sortItems:function(){
                   return this.items.sort();
      }
  }

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

如果不重新声明报错：

image.png

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

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

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

image.png

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

   function sortNumber(a,b){
            return a-b
    }

用法:

  computed:{
        sortItems:function(){
          return this.items.sort(sortNumber);
       }
  }

经过一番折腾，我们终于实现了真正的数字排序，这是在工作中非常常用的，一定要学好，记住。

3、对象循环输出

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

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

  students:[
            {name:"Joey",age:26},
            {name:"Cpp",age:20},
            {name:"Clother",age:16}
        ]

在模板中输出

<ul>
   <li v-for="student in students">
       {{student.name}} - {{student.age}}
   </li>
</ul>

加入索引序号：

<ul>
  <li v-for="(student,index) in students">
    {{index}}：{{student.name}} - {{student.age}}
  </li>
</ul>

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

//数组对象排序方法
function sortByKey(arry,key){
       return arry.sort(function(a,b){
             var x=a[key];
             var y=b[key];
             return ((x<y)?-1:((x>y)?1:0));
      })
  }

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

 sortStudent:function(){
          return sortByKey(this.students,'age');
  }

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

第四节：v-text & v-html

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-text & v-html </title>
  <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-text & v-html</h1>
    <hr>
    <div id="app">
      <span>{{ message }}</span>=<span v-text="message"></span><br>
      <span v-html="dodo"></span>
    </div>
    <script type="text/javascript">
      //实例化vue
      var app = new Vue({
        el:"#app",
        data:{
          message:'hello world!',
          dodo:'<h2>hello world!</h2>'//少用，会引起黑客xss攻击
        }
      })
    </script>
</body>
</html>

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

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

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

效果如图:

效果图

程序代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>v-on 实例</title>
  <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-on 实例</h1>
    <hr>
    <div id="app">
      本场比赛得分：{{fenshu}}
      <p>
        <button v-on:click ="jiafen">加分</button>
        <button @click="jianfen">减分</button><br/>
        <input type="text" v-on:keyup.enter="onEnter" v-model="fenshu2">
      </p>
    </div>
    <script type="text/javascript">
      //实例化vue
      var app = new Vue({
        el:"#app",
        data:{
          fenshu:0,
          fenshu2:1
        },
        methods:{
          jiafen:function(){
            this.fenshu ++;
          },
          jianfen:function(){
            this.fenshu --;
          },
          onEnter:function(){
            this.fenshu = this.fenshu + parseInt(this.fenshu2);
          }
        }
      })
    </script>
</body>
</html>

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

我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。
因为文本框的数字会默认转变成字符串，所以我们需要用parseInt()函数进行整数转换。
你也可以根据键值表来定义键盘事件：:

键盘表

第六节：v-model指令

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

1.一个最简单的双向数据绑定代码。

html文件：

<div id="app">
    <p>原始文本信息：{{message}}</p>
    <h3>文本框</h3>
    <p>v-model:<input type="text" v-model="message"></p>
</div>

javascript代码：

var app=new Vue({
  el:'#app',
  data:{
       message:'hello Vue!'
  }
 })

2.修饰符

.lazy：取代 imput 监听 change 事件。
.number：输入字符串转为数字。
.trim：输入去掉首尾空格。

3.文本区域加入数据绑定

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

4.多选按钮绑定一个值

<h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for="isTrue">{{isTrue}}</label>

5.多选绑定一个数组

<h3>多选框绑定一个数组</h3>
 <p>
    <input type="checkbox" id="react" value="react" v-model="web_names">
    <label for="isTrue">{{joeych}}</label>
    <input type="checkbox" id="vue" value="vue" v-model="web_names">
    <label for="isTrue">{{vue}}</label>
    <input type="checkbox" id="angular" value="angular" v-model="web_names">
    <label for="isTrue">{{angular}}</label>
 </p>
 <p>{{web_names}}</p>

6.单选按钮绑定数据

<h3>单选框绑定</h3>
<p>
       <input type="radio" id="one" value="男" v-model="sex">
       <label for="one">男</label>
       <input type="radio" id="two" value="女" v-model="sex">
       <label for="two">女</label>
       <p>你选择的性别是：{{sex}}</p>
  </p>

第七节：v-bind 指令

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

<div id="app">
    <img v-bind:src="imgSrc"  width="200px">
</div>

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

var app=new Vue({
    el:'#app',
    data:{
          imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg'
     }
})

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

** v-bind 缩写 **

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

** 绑定CSS样式 **

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

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

直接绑定class样式

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

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

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

绑定class中的数组

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

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

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

绑定style

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

用对象绑定style样式

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

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值了。

<div v-pre>{{message}}</div>

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

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

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

<div v-once>第一次绑定的值：{{message}}</div>
<div><input type="text" v-model="message"></div>

小知识点：

1.终止批处理操作退出快捷键

   ctrl + c

2. 几种实现双向绑定的做法

发布者-订阅者模式（backbone.js）
脏值检查（angular.js）
数据劫持（vue.js）

发布者-订阅者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是 vm.set('property', value)，这里有篇文章讲的比较详细，有兴趣可点这里

这种方式现在毕竟太low了，我们更希望通过 vm.property = value这种方式更新数据，同时自动更新视图，于是有了下面两种方式

脏值检查: angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，当然Google不会这么low，angular只有在指定的事件触发时进入脏值检测，大致如下：

DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
XHR响应事件 ( $http )
浏览器Location变更事件 ( $location )
Timer事件( $timeout ,$ interval )
执行 $digest() 或$ apply()

数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

思路整理:

已经了解到vue是通过数据劫持的方式来做数据绑定的，其中最核心的方法便是通过Object.defineProperty()来实现对属性的劫持，达到监听数据变动的目的，无疑这个方法是本文中最重要、最基础的内容之一，如果不熟悉defineProperty，猛戳这里
整理了一下，要实现mvvm的双向绑定，就必须要实现以下几点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm入口函数，整合以上三者

最后编辑于：2024.01.03 16:35:20

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,772评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,458评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,610评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,640评论 1赞 276
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,657评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,590评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,962评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,631评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,870评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,611评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,704评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,386评论 4赞 319
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,969评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,944评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,179评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 44,742评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,440评论 2赞 342

Vue学习笔记

第一节：

1.下载Vue2.0的两个版本：

2.项目结构搭建：

3、live-server使用

4、编写第一个HelloWorld代码

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

1.v-if:

2、v-show ：

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

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

1、基本用法：

2、排序 ：

3、对象循环输出

第四节：v-text & v-html

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

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

第六节：v-model指令

1.一个最简单的双向数据绑定代码。

2.修饰符

3.文本区域加入数据绑定

4.多选按钮绑定一个值

5.多选绑定一个数组

6.单选按钮绑定数据

第七节：v-bind 指令

第八节：其他内部指令(v-pre & v-cloak & v-once)：##

小知识点：

1.终止批处理操作退出快捷键

2. 几种实现双向绑定的做法

推荐阅读更多精彩内容

2、排序：