vue基础（一）

注：此笔记是本人基于vue.js黑马程序员教学视频所做的整理

1.vue是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，和Angular.js和react.js（react除了开发网站还可以开发手机app）一起，并称为三大主流框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
在vue中，一个核心的概念就是让用户不再操作DOM元素，解放了用户得双手，可以让程序员更多的关注业务逻辑。
注：提升开发效率的发展历程：源生js>jquery之类的类库>前段模板引擎>Angular.js/react.js

1.1框架与库的区别

框架：是一套完整的解决方案，对项目入侵较大，项目如果要更换框架，则需要重新构建整个项目
库（插件）面向某一个小功能，对项目入侵较小。如果某个库无法完成某些需求，可以切换到其他库实现需求

2.node（后端）中的MVC与前端中MVVM之间的区别

mvc是后端的分层开发概念
mvvm是前段视图层的概念，主要关注于视图层分离，也就是说：mvvm把前段的视图层分为了三部分 Model，view，VM viewmodel
mvvc结构如下图所示：

3.vue基本代码结构

1.new的Vue实例会控制这个元素中的内容，vue实例所控制的这个元素区域，就是我们的V。
2.创建一个Vue实例，当我们导入包之后，在浏览器内存中，就多了一个Vue构造函数。我们new出来的这个VM对象，就是MVVM中的vm调度者
3.el表示，当我们new的这个Vue实例要控制页面上的那个区域。data就是mvvm中的m，专门用来保存每个页面的数据。
4.通过Vue提供的指令，很方便就能把数据渲染到页面上，程序员不用再手动操作dom元素，Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。我们要怎么确认呢？打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新。
注意！在vm实例中，如果要访问data上的数据，或者要访问methods中的方法，必须带this

<div id="app">
  {{ message }}           //html代码
</div>
var app = new Vue({
  el: '#app',
  data: {                
    message: 'Hello Vue!'                   //js代码
  }
})

4.一些基本指令

1.v-cloak
使用v-cloc能够解决插值表达式闪烁的问题

<p v-cloak>{{mag}}</p>  //html代码
[v-clock]{
display:none;       //css样式代码
}

2.v-text
默认v-text是没有闪烁问题的，会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把整个元素内容清空。

<div v-text="msg"></div>

3.v-html
v-html可以直接将元素标签去掉。

<p v-html="msg"></p>
//script
data:{
msg: '<h1>hahaha</h1>
}

此实例中因为用到了V-HTML指令所以显示的内容将会去掉h1标签。
4.v-bind
v-bind可以绑定属性的指令，可以简写为：

<input type="button" value="按钮" :title="mytitle+'123' ">
//js
data:{
mytitle:"自定义"
}

5.v-on
v-on为vue中提供的事件绑定机制，可简写为@

<input type="button" value="按钮" @click="show">
//或<input type="button" value="按钮" v-on:click="show">
//js
methods:{
show:function(){
alert('123')
}

6.v-model和双向数据绑定
v-bind只能实现数据的单项绑定，从M自动绑定到V，无法实现双向绑定，v-model可实现双向绑定，即V发生变化M随之发生变化
**注意！ v-model只能运用在表单元素中

<input type="text" style="width:100%;" v-model="msg">
//js
   data:{
    msg:"自定义"
    }

7.v-for和key属性
当Vue.js用v-for正在更新已渲染过得元素列表时，它默认用就地复用策略。如果数据的顺序被改变，Vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保他在特定索引下显示已被渲染过得每个元素。
为了给Vue一个提示，以便他能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一的key属性
注意：v-for 循环的时候，key属性只接受string/number类型
注意：key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值
注意：vue2.20+版本里，当在组件中使用v-for时，key现在是必须的在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的字符串/数字类型 :key值,例：<p v-for="item in list" :key="item.id">
用法：**注：item为循环的每一项值，i为每一项的索引值，key为下面data对象中键值对的键，in为代表循环的每一项属于后边的数组，list为数组，在后面的data中需要声明list。
1.迭代数组

<ul>
     <li v-for="{item,i} in list">索引：{{i}} --- 姓名：{{item.name}} --- 年龄：{{item.age}}</li>
 </ul>

2.迭代对象中的属性
//循环遍历对象身上的属性

<div v-for="{val, key, i}in userinfo">{{val}} --- {{key}} --- {{i}}</div>

3.迭代数字

<p v-for="i in 10">这是第{{i}}个p标签</p> 

8.v-if和v-show
v-if和v-show
1.v-if的特点：每次都会重新删除或创建元素
2.v-show的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的display：none样式
v-if有较高的切换性能消耗
v-show有较高的初始渲染消耗
如果元素涉及到频繁的切换，最好不要使用v-if，而是推荐使用v-show，如果元素可能永远不会被显示出来被用户看到，则推荐使用v-if

5.vue中通过属性绑定为元素设置样式

一.使用class样式

1.数组 直接传递一个数组，注意！这里的class要用v-bind做数据绑定

<h1 :class="['red','thin']"> 这是h1</h1>

2.数组中使用三元表达式

<h1 :class="['red','thin',isactive?'active';' ']">这是h1</h1>

3.数组中嵌套对象

<h1 :class="['red','thin',{'active':isactive}]">这是h1</h1>

4.直接使用对象

<h1 :class="{red:true,italic:true,active:true,thin:true}">这是h1</h1>

二.使用内联样式

1.直接在元素上通过:style的形式，书写样式对象

<h1 :style="{color:'red','font-size':'40px','font-weight':'200'}">这是一个h1</h1>        //html代码

2.将样式对象，定义到data中，并直接引用到:style中

data:{
         msg:{color: 'red','font-size':'40px','font-weight':'200'}                //js
        }
        <h1 :style="msg">这是一个h1</h1>                                  //html代码

3.在:style中通过数组，引用多个data上的样式对象

data:{
   msg1:{color:'red','font-size':'40px','font-weight':'200'}       //js
   msg2:{fontstyle:'italic'}
   }
   <h1 :style="[msg1,msg2]">这是一个h1</h1>            //html代码

6 .小demo——跑马灯效果制作

demo要求：制作跑马灯效果，要求点击lang按钮动起来，点击stop按钮停止
分析：
1.给【开始】按钮绑定一个点击事件 v-on @
2.在按钮的事件处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后调用字符串的substring来进行字符串的截取操作，把第一个字符截取出来，放到最后。
3.为了实现点击按钮，自动截取功能需要，把步骤二放到一个定时器中执行。
主要代码如下：

  <div id="app">
        <input type="button" value="开始"  @click="lang">
        <input type="button" value="停止" @click="stop">
        <h4>{{msg}}</h4>
    </div>
    <script>
        //注意：在VM实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过
        //this.数据属性名或this.方法名来进行访问，这里的this，就表示我们new出来的VM实例对象
    var vm=new Vue({
        el: '#app',
        data: {
            msg: '猥琐发育，别浪~~！',
            interval: null //在data上定义 定时器id初值为null
        },
       methods:{
           lang(){
               
               //获取第一个字符
               if(this.interval !=null) return //用if判断若interval不为空，则直接返回，防止出现多次点lang越来越快现象
               this.interval=setInterval( ()=>  {  //var 一个interval处理定时器
                    var start = this.msg.substring(0,1)
               //获取到后面所以字符
               var end=this.msg.substring(1)
               //重新拼接到新的字符串，并赋值给this.msg
               this.msg= end+start
               },400)
               //vm实例，会监听自己身上data中的数据变化，只要数据发送改变，就自动吧最新的数据，从data上同步到页面中去。
               //好处：不需要考虑如何重新渲染DOM页面
           },
           stop(){  //停止定时器
           clearInterval(this.interval)
           this.interval=null; //每停止一次重新把interval设为null，不然会出现点一下stop不会再动情况
           }

       }
    })
    </script>

7.事件修饰符

使用方法：@事件.事件修饰符或v-on:事件.事件修饰符
.stop 防止冒泡
.prevent阻止默认事件
.capture添加事件侦听器时使用事件捕获模式
.self只当事件在该元素本身（比如不是子元素）触发时触发回调
.once事件只触发一次
注：.stop和.self区别：.self只会阻止自身冒泡行为触发，并不会真正阻止冒泡行为