引入 框架Vue.js
<script src ="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 开发环境版本
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 生产环境版本
<script src="https://unpkg.com/vue"></script> 未知版本
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
vue指令:
v-for 指令可以绑定数组的数据来渲染一个项目列表
数组操作：
v-for 指令需要使用 item in items 形式的特殊语法，
items 是源数据数组 并且 item 是数组元素迭代的别名
v-for应用
索引 index
<li v-for="( item ,index ) in items">
{{ index }} - {{ item.message }}
</li>
对象操作：
v-if 控制切换一个元素是否显示
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块
v-model 它能轻松实现表单输入和应用状态之间的双向绑定
在“change”时而非“input”时更新
<input v-model.lazy="msg" >
.number 自动将用户的输入值转为数值类型
.trim 自动过滤用户输入的首尾空白字符
.lazy 与change 事件进行同步
v-once 执行一次性地插值，当数据改变时，插值处的内容不会更新
Object.freeze() 阻止修改现有的属性
{{ }} 双大括号会将数据解释为普通文本，而非 HTML 代码
v-html 输出真正的 HTML
v-bind 指令
v-bind:title 将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致
<a v-bind:href="url">.....</a> 完整语法
<a :href="url"></a> 缩写
v-on 指令添加一个事件监听器 处理用户输入
<a v-on:click="doSomething">.....</a> 完整写法
<a @click="doSomething">.....</a> 缩写
: 与 @ 对于特性名来说都是合法字符
computed 计算属性
计算属性的setter
计算属性默认只有 getter ,setter 方法自行添加
getter和setter
在控制台运行 vm.fullName = 'John Doe' setter会被调用，vm.firstName 和 vm.lastName 也会相应地被更新
侦听器
需要在数据变化时执行异步或开销较大的操作时，watch方式是最有用的
v-show
不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换
变异方法
push() 数组末尾添加元素
pop() 删除数组末尾元素
shift() 把数组的第一个元素从其中删除,并返回第一个元素的值
unshift() 向数组的开头添加一个或更多元素,并返回新的长度
splice() 向/从数组中添加/删除项目,然后返回被删除的项目
sort() 对数组的元素进行排序
reverse() 用于颠倒数组中元素的顺序
替换数组
filter() 用于把Array的某些元素过滤掉，然后返回剩下的元素
var arr = [1, 2, 4, 5, 6, 9, 10, 15];
var r = arr.filter( function (x) {
return x % 2 !== 0;
});
concat() 连接两个或多个数组
var a = [1,2,3];
document.write( a.concat(4,5) );
slice(start,end) 从已有的数组中返回选定的元素
var arr = ["George", "John", "Thomas"];
document.write( arr.slice(1) + "<br />"); John,Thomas
注意事项
1.当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
2.当你修改数组的长度时，例如：vm.items.length = newLength
Vue 不能检测对象属性的添加或删除
解决方法：
Vue.set(vm.items, indexOfItem, newValue)
vm.items.splice(indexOfItem,1, newValue)
vm.$set(vm.items, indexOfItem, newValue)
vm.items.splice(newLength)
为已有对象赋予多个新属性
var vm = new Vue({
data: {
userProfile: {
name:'Anika'
}
}})
你可以
vm.userProfile = Object.assign({}, vm.userProfile, {
age:27,
favoriteColor:'Vue Green'
})
显示过滤结果
<li v-for = " n in even( numbers )">{{ n }}</li>
data: {
numbers: [1,2,3,4,5]
},
methods: {
even:function(numbers){
return numbers.filter( function( number ){
return number %2 === 0
})
}
}
内联处理器中的方法
直接绑定方法 JS 中调用
事件修饰符
Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的
.stop 阻止单击事件冒泡
.prevent 阻止事件冒泡
.capture 给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素
.self 给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素
.once 单击事件最多将触发一次
.passive 能够提升移动端的性能
事件修饰符
v-on:click.prevent.self 会阻止所有的点击
v-on:click.self.prevent 只会阻止对元素自身的点击
滚动事件的默认行为 (即滚动行为) 将会立即触发
<div v-on:scroll.passive="onScroll">....</div>
键盘类事件
<input type="text" v-on:keyup.13 = "show()" />
<input type="text" @keyup.enter = "show()" /> <!-- 同上 -->
keyup、keydown 是监听键盘按下，弹起事件
全部的按键别名:
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
新增 .exact 修饰符允许你控制由精确的系统修饰符组合触发的事件
精确触发
鼠标按钮修饰符：
.left
.right
.middle
