1. Vue第一天

1.1. MVVM模式讲解

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

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

1.2. 编码步骤

1. 引入vue.js文件

    <srcipt src=‘./vue221.js‘></srcipt>
   

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

    <div id=‘app‘>
   
    </div>
   
    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托管区域中

<!--HTML-->
{{name}}

<!--JavaScript-->
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

<span v-text=‘name‘></span>

1.3.3. v-html

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

<div v-html=‘name‘></div>

data：{
  name：‘<span>zs</span>‘
}

1.3.4. v-cloak

解决表达式闪烁问题

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

1. 定义一个样式
<style>
  [v-cloak]{
      display:none
  }
</style>

2. 使用
<div v-cloak>{{name}}</div>

1.3.5. v-bind

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

<div v-bind:class = ‘box‘></div>

// 使用:简写v-bind
<div :class = ‘box‘></div>

// 当绑定的属性值是常量字符串+变量时 我们在绑定这个属性时 是需要绑定一个对象,这个对象的键就是需要绑定的属性名 这个对象的值就是常量字符串+变量
<a v-bind="{href:‘http://itcast.cn/index/‘+id}">跳转</a>
// 最终实际效果:
<a href=‘http://itcast.cn/index/1’>跳转</a>

1.3.6. v-on

绑定事件

// v-on:事件名称 = ’事件处理函数’,事件处理函数需要定义在methods对象中
<div v-on:click = ‘click(e)‘></div>
<div @keydown = ‘key(e)‘></div>

new Vue({
    el:‘#app‘,
    data:{},
    methods:{
        click:function(e){
            console.log(e)
        },
        key:function(e){
            console.log(e)
        }
    }
})

常用事件

v-on:click
v-on:keydown
v-on:keyup
v-on:mousedown
v-on:mouseover
v-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 组件
<input v-model=‘name‘></input>

// name会和表单元素的value进行关联 value值变化 name值变化 反过来name值发生变化 value值也会发生变化

1.3.8. v-for

循环输出HTML元素

<div v-for=‘(item,index) in list‘ :key = ‘index‘>{{item.name}}</div>

1.3.9. v-if

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

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

1.3.10. v-show

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

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

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指令循环渲染数据源中的数据

<tr v-for="item in list">
    <td>{{item.id}}</td>
    <td>{{item.name}}</td>
    <td>{{item.ctime}}</td>
    <td>
        <a href="#">删除</a>
    </td>
</tr>

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‘ 会显示当前元素
<tr v-show="list.length==0">
    <td colspan="4">列表无数据</td>
</tr>

1.4.3. 添加功能

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

// 1. 通过v-model给input标签绑定数据,同时给按钮绑定添加事件
<input type="text" v-model="id">
<input type="text" v-model="pname">
<button @click="addData">添加数据</button>

// 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
<a href="javascript:void(0)" @click="delData(item.id)">删除</a>

// 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);
}