1. Vue第一天

1.1. MVVM模式讲解

M代表模型,V代表视图,VM代表视图模型

在Vue中,M就是Vue实例中data里面定义的数据,V就是Vue实例所托管的区域,VM就是使用Vue实例化出来的对象

1.2. 编码步骤

1. 引入vue.js文件

2. 定义一个vue的管理范围

         
    
         
    vue1.0里面vue的管理区域的id可以定义在HTML以及body标签上 vue2.0里面不允许这样来做

3. 定义一个vue的对象

   var vm = new Vue({     el:'#app',     // data定义vue实例的所有属性     data:{         // 定义将来要在vue管理区域中使用的数据         name："zs"     },     // methods定义vue实例所有的方法     methods：{         fn:function(){             this.name = 'ls'         }     } })

1.3. 系统指令

1.3.1. {

{}}插值表达式

作用:将vue对象中的数据以及表达式显示到vue托管区域中

    {
   {name}}
    new Vue({  el:'#app',  // data定义vue实例的所有属性  data:{      // 定义将来要在vue管理区域中使用的数据      name："zs"  },  // methods定义vue实例所有的方法  methods：{      fn:function(){          this.name = 'ls'      }  }})

1.3.2. v-text

输出文本数据,作用类似如document.innerText

1.3.3. v-html

输出HTML结构数据,作用类似如document.innerHTML

    
data：{  name：'zs'}

1.3.4. v-cloak

解决表达式闪烁问题

原理:1.当vue.js文件还没有加载出来时 使用[v-cloak]样式作用于当前指令所在标签,2.当vue.js加载完毕,会自动找到所有的v-cloak指令,并移除这些指令

1. 定义一个样式2. 使用
    
     {
   {name}}
    

1.3.5. v-bind

动态给标签或者组件绑定属性

    
// 使用:简写v-bind
    
// 当绑定的属性值是常量字符串+变量时 我们在绑定这个属性时 是需要绑定一个对象,这个对象的键就是需要绑定的属性名 这个对象的值就是常量字符串+变量跳转// 最终实际效果:跳转

1.3.6. v-on

绑定事件

// v-on:事件名称 = ’事件处理函数’,事件处理函数需要定义在methods对象中
    
    
new Vue({    el:'#app',    data:{},    methods:{        click:function(e){            console.log(e)        },        key:function(e){            console.log(e)        }    }})

常用事件

v-on:clickv-on:keydownv-on:keyupv-on:mousedownv-on:mouseoverv-on:submit

事件修饰符:v-on提供了很多事件修饰符来辅助实现一些功能，例如阻止冒泡等

事件修饰符有如下:

.stop - 调用 event.stopPropagation()。.prevent - 调用 event.preventDefault()。.capture - 添加事件侦听器时使用 capture 模式。.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias} - 只当事件是从侦听器绑定的元素本身触发时才触发回调。.native - 监听组件根元素的原生事件。

1.3.7. v-model

双向数据绑定:可以使用的标签:input textarea select 组件(components)

// 可以使用的标签:input textarea select 组件// name会和表单元素的value进行关联 value值变化 name值变化 反过来name值发生变化 value值也会发生变化

1.3.8. v-for

循环输出HTML元素

    
     {
   {item.name}}
    

1.3.9. v-if

根据表达式值的真假决定元素的显示隐藏,增加移除DOM元素实现

// isShow为true显示div 为false隐藏div// v-if是直接操作DOM 即隐藏时会将该div从DOM结构中移除
    

1.3.10. v-show

根据表达式值的真假决定元素的显示隐藏,控制元素的显示隐藏样式实现

// isShow为true显示div 为false隐藏div// v-show是操作div的样式 显示时添加 style = 'display:block'; 隐藏时添加style = 'display:none'
    

v-if 是删除DOM元素 效率比较低 会造成页面的结构重新绘制

v-show 是控制样式 只会改变当前这一个元素的样式 不会造成页面结构的重新绘制

1.4. 品牌案例

1.4.1. 品牌列表

数据驱动视图,需要展示的内容全部从数据中得到,数据发生变化,视图显示也会发生变化

1.在vue实例中定义好需要显示的数据源new Vue({    el:'#app',    data:{        // 数据源        list:[            {id:1,name:'奔驰',ctime:new Date}        ]    }});2. 在Vue的托管区域中,通过v-for指令循环渲染数据源中的数据    {
   {item.id}}    {
   {item.name}}    {
   {item.ctime}}            删除    

1.4.2. 无数据提示

为了良好的用户体验,在没有数据的时候,应该提示用户暂无数据,当有数据的时候,隐藏掉提示信息.可以用到v-if或者v-show根据数据源数组的长度进行控制。

// 1. 当数组中有数据时,list.length == 0不成立,表达式返回结果为false// 2. v-show = 'false' 会隐藏当前元素// 3. 当数组中没有数据时,list.length == 0成立,表达式返回结果为true// 4. v-show = 'true' 会显示当前元素    列表无数据

1.4.3. 添加功能

通过表单元素的双向数据绑定,当用户输入数据时,在程序代码中拿到这些数据,将数据拼装成需要的格式后添加到数据源数组中,数组内容发生了变化,根据数据驱动视图思想,页面中的内容会自动发生更新

// 1. 通过v-model给input标签绑定数据,同时给按钮绑定添加事件添加数据// 2. vue实例的data中定义v-model中使用的数据,同时methods中定义添加方法data:{    list:[        {id:1,name:'奔驰',ctime:new Date}    ],    id:0,    pname:''},methods:{    addData:function(){    }}// 3. addData方法中实现添加逻辑addData:function(){    // 3.1.0 包装成list要求的对象    var p = {        id:this.id,        name:this.pname,        ctime:new Date()    };    // 3.2.0 将p追加到list数组中    this.list.push(p);    // 3.3.0 清空页面上的文本框中的数据    this.id = 0;    this.pname = '';}

1.4.4. 删除功能

删除时只需要根据点击的元素,获取到对应的这个数据的索引,然后从数组中将该项删除掉即可。

// 1. 注册删除事件,同时传入点击的这一项数据的id删除// 2. methods中定义delData方法methods:{    delData:function(){    }}// 3. 实现删除逻辑delData:function(id){        // 1.0 调用list.findIndex()方法根据传入的id获取到这个要删除数据的索引值        var index = this.list.findIndex(function(item){            return item.id == id        });        // 2.0 调用的 list.splice(删除元素的索引，删除的元素个数)        this.list.splice(index,1);}