Vue介绍
Vue是一套用于构建用户界面的渐进式框架
循环v-for
<li v-for = "todo in todos">
{{todo.text}}
</li>
todos为要循环的全部内容，todo为要循环的每一项
在控制台里，输入app4.todos.push({ text: '新项目' }) ，你会发现列表最后添加了一个新项目。
v-on
使用户和应用进行交互，v-on指令添加事件监听器，通过它调用vue实例中的方法
定义在methods当中
v-model
实现表单与Vue实例的双向绑定
指令综合使用 ToDoList实现
- 给input元素绑定message，使表单中的输入值放到data当中
- 给button绑定监听器，当点击button时触发对应函数
- 给li添加v-for循环，依次向列表项添加内容
页面组件化
将页面分割为不同的小组件，方便后期的维护
- 组件分为全局组件和局部组件
- 使用组件处的HTML标签即可改为组件名
- component声明组件名
- props接收外部传入的数据
- template为子组件的模板，最终会替代掉HTML当中应用该组件的位置
全局组件
局部组件
父子组件间传值
父组件向子组件：
子组件向父组件传值：
todolist代码组件化改写：
HTML：
JS：
MVVM开发模式
MVVM是Model-View-ViewModel的缩写，他是一种基于前端开发的架构模式。
- Model：代表数据模型，数据和业务逻辑都在Model层定义
- View：代表UI视图，负责数据展示
- ViewModel：负责监听Model中数据的改变并且控制视图的更新，处理用户交互操作
Vue.js就是MVVM风格的js库
传统的MVP开发模式，在P层应用到了大量的DOM操作
简化了DOM的操作，因此减少了代码量
Vue实例
每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始
var vm = nem Vue({
//选项
})
Vue中的每一个组件也是一个Vue实例
数据与方法
当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
只有当Vue实例被创建时就已经存在于data中的属性才是响应式的（即一个改变所有随之改变）
如对vm.b进行添加内容，对与vm外的data对象不会有任何改变
若对data对象进行添加属性b，由于是在实例创建后添加的属性，所以并不是响应式的属性，添加过后并不影响实例中的内容
Object.freeze()方法
阻止修改现有的属性，也意味着响应系统无法再追踪变化。
除了数据属性，Vue实例还暴露了一些有用的实例和方法，他们都有$作为前缀
$watch
观察变量的变化，并获取变化前后的值
使用方法：
vm.$watch('a',function(newval,oldval){
//回调函数
})
模板语法
- Vue的模板语法符合HTML约定，能被浏览器和HTML解析器解析
- Vue可以智能的计算出最少需要重新渲染多少组件，将DOM操作次数减到最少
插值
将Vue中的数据通过模板语法显示在页面中
文本插值
- Mustache语法（双大括号）的文本插值
<p>{{ message }}</p>
Mustache标签内的内容会被Vue中对应的数据对象上的属性值替代
若Vue数据对象上的值改变，则插值处内容也会改变
- v-once 执行一次性的插值，即当数据改变时，插值处内容不会更新
<span v-once>{{ message }}</span>
- v-text插值,效果与双大括号相同
<div v-text = "message"></div>
HTML插值
双大括号会将数据解释为普通文本，而不是HTML代码
若需要展示的数据为一段HTML代码，则需要使用HTML插值
语法：在HTML标签中添加v-html插值
<div id="app2">
<div v-html = "message"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app2",
data:{
message:"<h1>噜啦啦啦</h1>"
}
})
</script>
这样就会将插值处的数据替换为HTML并进行解析
- 使用HTML插值时，数据内容不能交给用户提供，否则会引起XSS攻击
Attribute
为了实现将HTML标签的属性绑定到Vue实例上，则使用v-bind指令
<div v-bind:id="dynamicId"></div>
这里将div标签的id属性与Vue实例绑定
对于布尔值：
<button v-bind:disabled="isButtonDisabled">Button</button>
如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的 <button>元素中。
Javascript表达式
对于所有数据的绑定，Vue.js都支持Javascript表达式
如：
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
- 不同的插值方法都支持js表达式
- 每个绑定都只能包含单个表达式
指令
指令是带有v-前缀的特殊的属性
指令的职责是当表达式的值发生改变时，将其产生的连带影响，响应式作用与DOM
参数
一些指令能够接受一个参数，在指令后用冒号表示
<a v-bind:href="url">...</a>
动态参数
可以用 方括号括起来的表达式作为一个指令的参数
<a v-bind:[attributeName]="url"> ... </a>
这里的参数会作为js表达式进行动态求值，将求值后的结果作为参数来使用
对动态参数值的约束：
- 动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
对动态参数表达式的约束：
- 由于空格和引号在HTML属性名中是无效的，所以动态参数表达式要使用没有空格和引号的表达式，或用计算属性代替这种复杂表达式
- 在DOM中使用模板是，需要避免用大写字符来命名键名，浏览器会强制转换为小写
缩写
对于使用频率多的v-on和v-bind拥有对应的简写
v-bind
<a v-bind:href="url">...</a>
简写：
<a :href="url">...</a>
v-on
<a v-on:click="doSomething">...</a>
简写：
<a @click="doSomething">...</a>
计算属性和侦听器
计算属性
对于任何的复杂逻辑，需使用计算属性
所有的计算属性都以函数的形式写在Vue实例内的computed选项内，最终返回计算后的结果
小栗子：
<div id="app">
{{fullName}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
firstName:"John",
lastName:"Green"
},
//计算属性
computed:{
fullName:function(){
return this.firstName + " " + this.lastName;
}
}
})
</script>
计算属性计算出的值会进行缓存，所依赖变量不改变的情况下，只会计算一次，后续调用缓存，若相关数据改变则重新进行渲染
getter和setter
每个计算属性都包含一个getter和一个setter函数
默认情况下，只是利用getter函数来读取实例的计算属性
如果需要时，可以提供setter函数，当手动修改计算属性的值时，就会触发setter函数，执行自定义操作
setter函数应用举例：
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ');
//将新修改的名字使用空格分开存入数组
this.firstName = names[0];
this.lastName = names[names.length - 1];
}
}
}
在computed中的函数中，分别用get和set分隔开getter和setter函数，当对值重新设置时调用setter函数改变相关联的值，相关联的值改变也会引起页面显示内容的改变
计算属性缓存vs方法
计算属性是基于他们的相应式依赖进行缓存的，只有在相关的相应式依赖发生改变时才会重新求值
若将函数定义成方法放在表达式中进行调用，则在Vue实例中需要写在methods当中
小栗子：
<div id="app">
{{fullName()}}
</div>
methods:{
fullName:function(){
return this.firstName + " " + this.lastName;
}
methods与computed区别
- 调用方法时，只要页面重新渲染，方法就会重新执行，即使依赖的数据没有发生变化
- 调用计算属性，不管是否渲染，只要依赖的数据未发生改变，就不会改变
- 调用方法需要在函数名后面添加括号
- 计算属性也是属性，在双大括号内使用不需要添加括号
- 如果想要使用缓存则应该使用计算属性
计算属性vs侦听属性
Vue使用侦听属性来观察和响应实例上的数据变动，当有数据岁其他数据变化而变化时，很容易滥用watch，所以使用计算属性代替watch
小栗子：侦听器方式
<div id="demo">{{ fullName }}</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
使用监听属性当名字改变时，会调用相应的方法，放在这各代码当中，名和姓的改变会分别调用两个方法，代码也较多
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
使用计算属性，有效的减少了代码的数量，当一个值发生改变时就会调用该函数
侦听器
在需要自定义侦听器时，Vue提供使用watch选项来自定义侦听器，对数据改变前后的值进行操作
watch监听的时定义的变量，当变量的值发生改变时，调用对应的方法
class与style绑定
通过绑定class或style都可以完成对标签样式的修改，class与style绑定都拥有对象和数组两种方式进行绑定
class的对象绑定
通过修改class值来对样式进行修改
<div id="app1">
<div @click = "handleDivClick"
:class = "{activated : isActivated}">
dafsdafsd
</div>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el:"#app1",
data: {
isActivated:false
},
methods:{
handleDivClick:function(){
this.isActivated = !this.isActivated;
}
}
})
</script>
将class与对象绑定，对象的名字为activated
class数组绑定
同理对class值的修改来实现样式的改变
<div id="app2">
<div @click = "handleDivClick"
:class = "[activated]">
dafsdafsd
</div>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el:"#app2",
data: {
activated:""
},
methods:{
handleDivClick:function(){
if (this.activated === "activated") {
this.activated = "";
}else{
this.activated = "activated";
}
}
}
})
</script>
将class与一个数组变量相绑定，若想使用该class，则让该数组与具体值相等
style修改样式
<div id="app3">
<div :style = "styleObj" @click = "handleDivClick">
dafsdafsd
</div>
</div>
<script type="text/javascript">
var vm1 = new Vue({
el:"#app3",
data:{
styleObj:{
color:"black"
}
},
methods:{
handleDivClick:function(){
this.styleObj.color = this.styleObj.color ==="black"? "red":"black";
}
}
})
</script>
将style与vue实例进行绑定，将需要写的style样式写在data中，在后面对其进行相应的修改
style数组形式
<div id="app3">
<div :style = [styleObj,...] @click = "handleDivClick">
dafsdafsd
</div>
</div>
数组形式也就可以在方括号内增添多个样式
条件渲染
条件v-if
用于条件性的渲染一块内容
v-else
注意if else要连在一起使用否则不起作用
v-else-if
当条件不止有两种情况时使用else-if对不同情况进行设置不同的渲染结果
v-if与v-show
v-if对应的值为false，则该标签对应的DOM不存在了
key值
在vue进行重新渲染的时候，会尽可能的复用上次的标签
而若给标签添加了不同的key值，vue会认为这是两个不同的标签，也就不会存在复用的问题
列表渲染
vue中提供的变异数组的方法：
- pop：删除数组最后一项
- push：往数组中添加一项
- shift：删除数组的第一项
- unshift：往数组第一项添加内容
- splice：截取数组
- sort：对数组进行排序
- reverse：对数组取反
v-for
使用v-for指令来对数组中的对象进行渲染一个列表
给数组中使用下标的形式对其进行项目的增添是不会将改变渲染到页面上的，所以要使用到Vue中变异数组的方法
vm.list.splice(1,1,{id:"123",text:"alice"})
由于数组是引用的形式，也可以将更改后的数组内容全部引用更改整个数组内容实现页面内容的改变（不推荐）
对对象循环
使用v-for不仅可以循环数组，也可以对对象中的内容进行循环
直接给对象添加内容不好加，则全部引用，改引用的方式改页面内容（不推荐）
Vue的set方法
Vue当中提供了set方法实现对数组和对象内容的更改，set不仅是全局方法，也是实例方法
全局方法更改对象：
Vue.set(vm2.userInfo,"address","beijing")
实例方法更改对象：
vm2.$set(vm2.userInfo,"address","beijing")
全局方法更改数组：
Vue.set(vm3.userInfo,1,8)
实例方法更改数组：
vm3.$set(vm3.userInfo,3,11)
