vue基础
一、模板语法：
{{message}} 等同于v-text：文本插值
v-html：html插值
v-once：插入固定的值，不会变
v-bind：单向数据绑定（内存JS改变，影响页面）缩写（:）
v-model：双向数据绑定
v-on：事件绑定 缩写（@）
二、计算属性和侦听器
1.computed：计算属性
计算属性是基于它们的响应式（内部值）依赖进行缓存的，如果内部值改变了，computed的绑定也会更新。
var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) /*
计算属性是基于它们的响应式依赖进行缓存的：
vm.reversedMessage 依赖于 vm.message，因此当 vm.message 发生改变时，所有依赖 vm.reversedMessage 的绑定也会更新。
如果message没有发生改变，多次访问reversedMessage计算属性会立即返回之前的计算结果，而不必再次执行函数
*/
2.侦听属性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 } } })
3.计算属性的set
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] } } }
三、样式绑定（class和style）
1.绑定class
1）对象语法：
我们可以传给 v-bind:class 一个对象，以动态地切换 class：
<div :class="{active:flag,active2:isActive}">对象中多个样式名是否显示取决于变量中的值（flag和isActive）</div>
data: { flag: true, // 第一个样式显示.active isActive: false //第二个样式不显示 .active2 }
渲染结果：
<div class="active"></div>
2）数组语法：
我们可以把一个数组传给 v-bind:class，以应用一个 class 列表：
<div :class="[className,errorClass,successClass]">数组的方式展示多个class名字</div> <!--方式二--> <div :class="className">数组的方式展示多个class名字</div> <div :class="[className]">数组的方式展示多个class名字</div>
data: { className: 'active', //样式名active传给数组中对应的className errorClass: 'error', //样式名error传给数组中对应的errorClass successClass:'success' //样式名success传给数组中对应的successClass } /*方式二*/ data: { className:['active','error','success'], //data中的 className 把数组中所有的样式都给了 :class 中的"className"或者[className] }
渲染结果：
<div class="active error success"></div>
2.绑定style
1）对象语法：
<div :style="styleObject"></div>
data: { styleObject: { color: 'red', fontSize: '13px' } }
渲染结果：
<div style="color:'red';fontSize:'13px' "></div>
2）数组语法：
<div :style="[baseStyles, overridingStyles]">多个样式应用在同一个元素上</div>
data: { baseStyle: { color: 'red', fontSize: '13px' }, overridingStyle:{ background:'pink'; } }
渲染结果：
<div style="color:'red';fontSize:'13px' background:'pink' "></div>
四、条件渲染：
1.v-show 与 v-if
v-show：页面中使用display的方式隐藏或显示
v-show 不支持 <template> 元素，也不支持 v-else
v-if：页面中直接删除或添加
v-if 另外还结合 v-else-if v-else 使用，但是中间不允许有其他代码，会报错
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else> Not A/B </div>
2.<template>标签
在页面上是一个不可见的元素，可以包裹指令，显示包裹的多个内容
<template v-if="ok"> <h1>Title</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> </template>
3.使用 key 管理可复用的元素
解释：vue内部机制会 复用已有的元素渲染页面，使vue变得非常快，
但是也有缺点：有时候希望两个相同的元素是完全独立的个体，不复用已有的元素，此时需要添加一个具有唯一值得 key 属性
<template v-if="loginType === 'username'"> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <input placeholder="Enter your email address" key="email-input"> </template>
4.不推荐 v-if 和 v-for 一起使用，因为 v-for 比 v-if 的优先级高（当你只想为部分项渲染节点时，这种优先级的机制会十分有用，）
五、列表渲染
1.v-for
<!--方式1--> <div v-for="item in items"></div> <!--方式2--> <div v-for="item of items"></div> <!--这里使用 of 比使用 in 作为分隔符，更接近JavaScript 的迭代器语法。-->
遍历对象：
<ul class='app'> <li v-for='(item,key,index) of Object'>{{index}}---{{key}}---{{item}}</li> </ul> <!-- item：值 key：属性 index：下标 -->
var vm= new Vue({ el: '.app', data: { Object:{ name:'andy', gender:'male', age:28, } })
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性：
<div v-for="item in items" :key="item.id"> <!-- 内容 --> </div>
任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域。为了把迭代数据传递到组件里，我们要使用 prop：
<div id="app"> <input type="text" v-model='inputValue'> <button v-on:click='btnClick'>提交</button> <ul> <todoitem v-bind:content='item' v-for='item in list'>{{ite}}</todoitem> </ul> </div>
Vue.component("todoitem", {
props: ["content"],
template: "<li>{{content}}</li>"
});
var app = new Vue({
el: "#app",
data: {
list: ['12', '23', '34'],
inputValue: ''
},
methods: {
btnClick: function() {
this.list.push(this.inputValue);
this.inputValue = '';
}
}
});
