Vue

样式绑定

class 使用

1.通过数组方式添加样式

通过数组方式添加样式 【‘样式名’】 --> 这里的样式名是提前在CSS中定义好的， 使用 :class绑定使用

 <h1 :class="['size', 'color',boo?'big':'weight']">添加样式</h1>

2.通过添加对象的方式进行判断 {‘样式名’,布尔值变量}

<h1 :class="[ 'color',{'big':boo}]">添加样式</h1>

3.通过使用 计算属性来控制样式的显示

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

style 内联样式使用

CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

1.通过往style中传入对象改变样式

缺点不能传多个对象

<h3 :style="ss">测试</h3>

<script>
       new Vue({
            el: '#fade',
            data:{
                ss:{color:'red','font-size':"50px"},
            }
        })
    </script>

2. 通过往style中传入数组，在数组中可以放多个对象

 <h3 :style="[yy , dd]">测试</h3>

<script>
       new Vue({
            el: '#fade',
            data:{
                dd:{"font-weight":900},
                yy:{color:'blue','font-size':"30px"},
            }
        })
    </script>

条件渲染

v-if 与 v-show

// 两个指令都可以做控制元素渲染。
//区别是： 
1. v-if  是用来控制元素的创建和销毁
2. v-show  是用来控制元素的 display 变化
        
//选择使用：
如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

列表渲染

v-for

v-for 指令基于一个数组来渲染一个列表。

格式：1. 遍历数组

​ （ item，index） in items

​ item 为每一项 ， index为索引，

2. 遍历对象

​ (value, name, index) in object

​ value 为值 name为key index 为索引

注意

1 根据JavaScript 机制 ， in 可以改为 of， 更接近于JavaScript

2. 遍历项必须绑定key，来确定每个节点的身份

变异方法

//官方含义：会改变调用了这些方法的原始数组。
简单说： 就是改变了原始数组，在原始数组上做一些操作，例如：增加，删除..

// 变异方法包括：
push()
pop()
shift()
unshift()
splice()
sort()
reverse()

非变异方法

//所谓非变异方法：不改变原始数组，生成新的数组
// 非变异方法包括：
filter()
concat() 
slice()
....

注意

//vm 为Vue实例

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})

//当你利用索引直接设置一个数组项时
vm.items[indexOfItem] = newValue    ❌错误操作

//官方提供了两种解决办法   
1.  Vue.set
Vue.set(vm.items, indexOfItem, newValue)

2. Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)



//当你修改数组的长度时
vm.items.length = newLength         ❌错误操作

//官方提供了一种解决办法  
1.vm.items.splice(newLength) 

对象变更注意

有时可能遇到这种需求，在原有data对象属性中，想实现动态添加属性，

直接添加是，不是响应式的，官方提供了解决办法。

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

// 添加一个属性 可以使用
Vue.set(vm.userProfile, 'age', 27)

// 为已有对象赋值多个新属性，可以使用 Object.assign()
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

显示过滤 / 排序的结果

​ 有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。

    <div>
        <div id="main">

            <template v-for='(item,index) in filters' :key=index>
                <li>{{item}}</li>
            </template>
        </div>
    </div>

    <script>
        var vm = new Vue({
            el: '#main',
            data: {
                list:[1,2,3,4,5,6]
            },
            computed: {
                filters: function(){
                    return this.list.filter(item => 
                        item%2 == 0
                    )
                }
            },
        })
    </script>

事件处理

事件修饰符

Vue.js 为 v-on 提供了事件修饰符。对事件的一些操作限制， 修饰符是由点开头的指令后缀来表示的。

• .stop
• .prevent
• .capture
• .self
• .once
• .passive
• .once

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

按键修饰符

由于Vue 废除了 keyCode 事件， 在开发中，想要获取用户输入的按键，可以自己通过全局 config.keyCodes 对象自定义按键修饰符别名： 具体设置为 https://cn.vuejs.org/v2/api/#keyCodes

// 虽然Vue 废除了 keyCode事件，但是Vue 提供了绝大多数常用的按键码的别名：
 .enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right


<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="自定义事件">

表单输入绑定

复选框checkbox

单个复选框 绑定到布尔值

多个复选框，绑定到同一个数组

单选按钮radio

直接绑定到data中自定义属性中

选择框 select

v-model 绑定到 select 元素上。

请选择 A B C

多选时： 绑定到一个数组上

值绑定

对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：

ABC

把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。

复选框

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'

单选按钮

<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时
vm.pick === vm.a

选择框选项

<select v-model="selected">
    <!-- 内联对象字面量 -->
  <option v-bind:value="{ number: 123 }">123</option>
</select>

// 当选中时
vm.selected.number // => 123

修饰符

• .lazy

• .number

• .trim

Vue 已经基础已经过完了，看完文章可以跟着多敲一些demo，来熟练Vue的基本使用。下一章将更新Vue 组件的使用，组件在Vue中是很重要的一部分，其中组件的通信尤其重要，理解了如何使用组件，那么可以构建一个数据通信的Web Components。