第二章 

第三节

1.1这个和js的if结构和if-else 结构是类似的。

<h1 v-if="ok">Yes</h1>
<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1> 

1.2<template> 元素上使用 v-if 条件渲染分组

html代码
<div id="app">
	<template v-if="see">
	        <h1>课程列表</h1>
	        <ul>
			<li>web前端开发</li>
			<li>asp.net开发</li>
		</ul>
	</template>
</div>
js代码
var vm = new Vue({
      el: "#app",
      data: {
         see: true,
         msg: "<strong>智学无忧IT教育</strong>"
       }
 });

1.3v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面

<div v-if="Math.random() > 0.5">
        Now you see me
</div>
<div v-else>
	Now you don't
</div>

1.4v-else-if

<div v-if="type === 'A'">
	A
</div>
<div v-else-if="type === 'B'">
	B
</div>
<div v-else-if="type === 'C'">
	C
</div>
<div v-else>
	Not A/B/C
</div>

第四节列表渲染 

1.v-for 用于数组

html代码
<ul id="example-1">
	<li v-for="item in items">
        	{{ item.message }}
	</li>
</ul>
js代码
var example1 = new Vue({
    el: '#example-1',
    data: {
        items: [{
                message: 'Foo'
            },
            {
                message: 'Bar'
            }
        ]
    }
})

2.v-for 用于对象

 2.1 获取对象的值 v-for="value in object"

html代码
<div v-for="(value, key) in object">
	{{ key }}: {{ value }}
</div>
js代码
new Vue({
    el: '#v-for-object',
    data: {
        object: {
            firstName: 'John',
            lastName: 'Doe',
            age: 30
        }
    }
})

2.3获取key、value、index v-for="(value, key, index) in object"

<div v-for="(value, key，index) in object">
	{{index}}:{{ key }}:{{ value }}
</div>

2.4key值可以用于元素上，唯一标识一个元素。

<div v-for="(value, key，index) in object" :key="key">
	{{index}}:{{ key }}:{{ value }}
</div>

3.一段取值范围的 v-for(几乎不用)

<div>
         <span v-for="n in 10">{{ n }} </span>
</div>

4.v-for 在<template>上

<ul>
	<template v-for="item in items">
		<li>{{ item.msg }}</li>
		<li class="divider" role="presentation"></li>
	</template>
</ul>

5. v-for 和 v-if在一起

<li v-for="todo in todos" v-if="!todo.isComplete">
        {{ todo }}
</li>

第五节 数据变化的检测与跟踪

1. 在vue.js如何知道数据内容发送变化了？

2. 数组更新检测

html代码
<div id="app">
        <h3>数组更新检测的方法</h3>
        <div>
            <ul>
                <li>push() 追加末尾</li>
                <li>pop() 末尾移除</li>
                <li>shift() 删除第一个元素</li>
                <li>unshift() 追加数组元素到前面</li>
                <li>splice() 删除，插入，更新元素</li>
                <li>sort() 排序</li>
                <li>reverse() 反转</li>
                <li>vm.array=newarray 替换新数组</li>
            </ul>
        </div>
        <h3>例子，学生的增删改查</h3>
        <div>
            <label>姓名:</label>
            <input type="text" v-model="uname">
            <label>年龄:</label>
            <input type="text" v-model="ages">
            <button type="button" @click="addstudent">追加末尾</button>
            <br>
            <button type="button" @click="endremove">末尾移除</button>
            <button type="button" @click="removefrist">删除第一个</button>
            <button type="button" @click="addfront">添加到前面</button>
            <button type="button" @click="reversestu">反转</button>
            <button type="button" @click="sortstudent">年龄升序</button>
            <label>筛选</label>
            <input type="text" v-model="filterstudent">
            <table border="1" width="50%">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 三元表达式 为真实循环新数组 否则循环原数组 -->
                    <tr v-for="(item,index) in (bool?newarray:array)" align="center">
                        <td>{{index+1}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td>
                            <button type="button" @click="deletestu(index)">删除</button>
                            <button type="button" @click="uptatestu(index)">修改</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <h3>array[index]=value是不会检测到</h3>
        <h3>array.length=value是不会检测到</h3>
        <h3>示例</h3>
        <div>
            <ul>
                <li v-for="item in arr">{{item}}</li>
            </ul>
            <h3>解决方法1</h3>
            <h3>使用vue提供的方法</h3>
            <h3>写法1 Vue.set(vm.arr,key,value)参数1目标对象 参数2数组的话就是下标对象就是属性 参数3数组是元素对象是属性值</h3>
            <h3>写法2 vm.$set(vm.arr,key,value) vm是vue的示例对象</h3>
            <h3>vm.$forceUpdate() 强制渲染用于无效时 比如vm.arr[0]=100 单独这样无效 后面执行vm.$forceUpdate()就可以了</h3>
            <h3>原生方法 vm.arr.splice(index,0,newvalue)</h3>
        </div>
        <!-- key需要引号包起来 -->
        <h3> Vue.set(object,key,value) key相同则修改 key不同就添加</h3>
        <div>
            姓名：{{object.name}}年龄：{{object.age}}性别：{{object.sex}}
        </div>
        <h3>添加多个属性 var newObj=Object.assign(target,obj1,obj2,obj3);</h3>
    </div>

  js代码

        var vm = new Vue({
            el: "#app",
            data: {
                array: [{ name: "小智", age: 18 }, { name: "小黑", age: 19 }],
                uname: "",
                ages: "18",
                filterstudent: "",//过滤筛选
                newarray: [],//新数组
                bool: false, //布尔用于判断三元表达式循环
                arr: [1, 2, 3, 4, 5],
                object: {
                    name: "小智",
                    age: 21,
                }
            },
            methods: {
                //追加末尾添加
                addstudent() {
                    this.array.push({ name: this.uname, age: this.ages })
                },
                // 末尾移除
                endremove() {
                    this.array.pop()
                },
                //删除第一个
                removefrist() {
                    this.array.shift()
                },
                // 添加到前面
                addfront() {
                    this.array.unshift({ name: this.uname, age: this.ages })
                },
                // 反转
                reversestu() {
                    this.array.reverse()
                },
                //年龄升序
                sortstudent() {
                    this.array.sort(function (a, b) {
                        return a.age - b.age;  //升序返回a-b   降序返回b-a
                    });
                },
                //根据下标删除
                deletestu(index) {
                    this.array.splice(index, 1) //根据传过来的下标删除1个
                },
                //模糊查询
                filterArray() {
                    var _filterstudent = this.filterstudent  //变量接收模糊查询输入框的值 
                    // 新数组接收
                    this.newarray = this.array.filter(function (value, index, arr) { //filter() 参数1元素  参数2下标  参数3对象本身
                        return value.name.indexOf(_filterstudent) != -1; //匹配不到返回-1  不等于-1就是查找的到 返回匹配的值 用新数组接收 
                    });
                },
                //修改
                uptatestu(index) {
                    // this.array.splice(index,1,{name:"渣渣",age:21})
                }
            },
            watch: {
                filterstudent(newvalue, oldvalue) {  //监听双向绑定的变量
                    if (newvalue == "") { //如果新值为空时
                        this.bool = false;  //布尔为false  上面循环渲染的还是原数组
                    } else {  //否则相反 
                        this.filterArray(); //调用上面的方法
                        this.bool = true; //布尔为true 循环新数组
                    }

                }
            }
        });

3.以下数组的操作不会更新

3.1利用索引直接设置一个项时 vm.items[indexOfItem] = newValue

3.2修改数组的长度时 vm.items.length = newLength

3.3 弥补以上缺陷的办法

3.3.1 使用vue提供的方法Vue.set(vm.items, indexOfItem, newValue)

3.3.2 vm.$set是全局方法Vue.set的别名vm.$set(vm.items, indexOfItem, newValue)

3.3.3 原生的方法vm.items.splice(indexOfItem, 1, newValue)vm.items.splice(newLength)

4.对象更改检测注意事项

4.1由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除

4.2不能监测对象变化的示例

var vm = new Vue({
    data: {
        a: 1
    }
})
// vm.a 现在是响应式的
vm.b = 2
// vm.b 不是响应式的 

4.3vue.js提供了解决办法，使用Vue.set(object, key, value) 4.4 如果一次要新增多个属性了？

4.4.1 使用原生的Object.assign()，用于合并多个对象的属性。返回合并后的新对象。

4.4.2 语法 Object.assign(target,src1,src2,……) 将后面的对象合并到第一个参数的对象上，如果重复则覆盖。

4.4.3在Vue.js框架的使用

//  正确：使用合并后的新对象覆盖之前的
vm.userProfile = Object.assign({}, vm.userProfile, {
    age: 27,
    favoriteColor: 'Vue Green'
})// 错误：vm.userProfile不会有变化
Object.assign(vm.userProfile, {
    age: 27,
    favoriteColor: 'Vue Green'
})

第六节

1.v-on 指令：监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

html代码
<div id="example-1">
  <button v-on:click="counter+=1">Add 1</button>
  <p>The button above has been clicked{{counter}} times.</p>
<div>
js代码
var example1 = new Vue({
    el:'#example-1',
    data:{
      counter:0
     }
  })

2.事件处理方法，方法定义在methods属性上

html代码
<div id="example-2">
 <!-- `greet` 是在下面定义的方法名 -->
<button v-on:click="greet">Greet</button>
</div>

js代码

var example2 = new Vue({
 el: '#example-2',
 data: {
  name: 'Vue.js'
 },
 // 在 `methods` 对象中定义方法
 methods: {
  greet: function (event) {
     // `this` 在方法里指向当前 Vue 实例
     alert('Hello ' + this.name + '!')
     // `event` 是原生 DOM 事件
     if (event) {
      alert(event.target.tagName)
    }
  }
 }
})

// 也可以用 JavaScript 直接调用方法
example2.greet() // => 'Hello Vue.js!'

 

3.内联处理器中的方法

3.1上面的做法直接绑定处理方法，也可以在内联 JavaScript 语句中调用方法

html代码
<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
js代码
new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

3.2$event 传递原始的DOM 事件

html代码
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>
js代码
// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

4.事件修饰符

4.1stop阻止事件冒泡

<a v-on:click.stop="doThis"></a>

4.2按键修饰符

keyCode  键盘编码
<input v-on:keyup.13="submit">
.enter (常用)
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

4.3组合修饰符

4.3.1用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta 在 Mac 系统键盘上，meta 对应 command 键 (⌘)。

<!-- Alt + C -->
<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

4.4鼠标按钮修饰符(不常用)

.left 鼠标左键
.right 鼠标右键
.middle 鼠标滑轮键