Vue复习1.0内容：Vue基础语法、计算属性、概念、指令
Vue复习2.0已发布，文章涉及完整代码已全部上传至GitHub：Vue复习2.0——组件化开发详解
@
目录Vue复习1.0
Vue的MVVM
MVVM有助于将图形用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来
View层（视图层）：
在前端开发中，通常就是DOM层。主要的作用是给用户展示各种信息，即看到的结构、布局和外观（UI）。
Model层（数据层）：
代表真是内容的数据，数据可能是固定的，但更多的是来自服务器请求下来的数据。
VueModel层（视图模型层）：
视图模型层是View和Model沟通的桥梁。一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中；另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
Vue模板
<body>
<div id="app">
{{message}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
</script>
</body>
1. Vue列表显示
<div id="app">
<ul>
<li v-for="item in movies">{{item}}</li>
</ul>
<script>
const app = new Vue({
el: '#app',
data: {
message: '你好啊',
movies: ['星际穿越', '大话西游', '少年派', '盗梦空间']
}
})
</script>
2. 计数器
正如页面直接用{{data里的值，eg：count}},body里的标签要用vue中data的值也直接用
<h3>当前值为：{{count}}</h3>
<button @click="count++">+</button>
但是vue中method等要用到data的数据就得加this,因为methods里面本身没有data里的数据
methods:{
add:function(){
this.count++
}
}
PS：vue中的methods不可以使用箭头函数，因为this指向的不是vue实例，使用箭头函数打印this，发现是undefined
methods: {
test: () => {
console.log(this); // undefined
}
}
3. Vue指令
1. v-html
该指令后面往往会跟上一个string类型并将string里的html解析、渲染
<h3 v-html="message"></h3>
<script>
const app = new Vue({
el: '#app',
data: {
message: '<span>你好</span> '
}
})
</script>
//span标签可被v-html解析
2. v-once
元素和组件只渲染一次，不会随着数据的改变而改变
3. v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] {
display: none;
}
<div id="app">
<h2>{{message}}</h2> <!-- 未使用v-cloak -->
<h2 v-cloak>{{message}}</h2>
</div>
<script>
setTimeout(function () {
const app = new Vue({
el: '#app',
data: {
message: '你好啊'
}
})
}, 1000)
</script>
4. v-bind
（语法糖 ：）
<img v-bind:src="imgURL" alt=""> === <img :src="imgURL" alt="">
- v-bind动态绑定class(动态绑定的为对象)
<style>
.active {
color: red;
}
.small {
font-size: 15px;
}
</style>
</head>
<body>
<div id="app">
<!-- 法一：通过判断绑定类且与原来的类不冲突 -->
<!--<h2 v-bind:class="{类名1: true, 类名2: false}">{{message}}</h2>-->
<h2 class="small" :class="{active: isActive}">测试文本1</h2>
<!-- 属性加不加引号都可以 -->
<h2 :class="{'active':isActive}">测试文本2</h2>
<!-- 法二： 动态绑定放在methods里 -->
<h2 :class="getClasses()">测试文本3</h2>
<!-- 法三：动态绑定在返回对象的计算属性 -->
<h2 :class="getClass">测试文本4</h2>
<p></p>
<button :click="btnClick">按钮</button>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
isActive: false,
active: 'active',
},
methods: {
btnClick: function () {
this.isActive = !this.isActive;
},
getClasses: function () {
return { active: this.isActive };
//以对象形式返回active: this.isActive，即:class="getClasses()变为 :class="{'active':isActive}"
},
},
computed: {
getClass: function () {
return { active: this.isActive, };
},
},
});
</script>
</body>
点击按钮前后：
- v-bind动态绑定class(动态绑定的为数组)
<style>
.active {
color: red;
}
.small {
font-size: 15px;
}
</style>
<div id="app">
<!-- 直接通过数组绑定若干个类名 -->
<h2 :class="[active, small]">测试文本1</h2>
<!-- 数组与三元运算符 -->
<h2 :class="[isActive?'active':'']">测试文本3</h2>
<!-- 通过方法绑定 -->
<h2 class="small" :class="getClasses()">测试文本3</h2>
<p></p>
<button v-on:click="btnClick">按钮</button>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
active: 'active',
small: ' small',
isActive: false,
},
methods: {
btnClick: function () {
this.isActive = !this.isActive;
},
getClasses: function () {
return [this.active];
//以数组形式返回[this.active]([active])，即 :class="getClasses()等价变化为:class=[active]
},
},
});
</script>
点击按钮前后：
5. v-on(缩写：@)
.once ： 只触发一次回调。
.stop ：调用 event.stopPropagation()。
.prevent ：调用 event.preventDefault()。
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
@click="btnClick()v-on方法的小括号可写可不写，但若写方法时省略了小括号但方法本身需要一个参数, Vue会默认将浏览器生产的event事件对象作为参数传入到方法
方法定义时, 若同时需要event对象又需要其他参数，需手动的获取到浏览器参数的event对象: $event
<div id = "demo">
<button @click = "btnClick('abc',$event)">按钮</button>
</div>
const demo = new Vue({
el:'#demo',
methods:{
btnClick:function(a,event){
console.log(a,event);
}
}
})
6. v-if
当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
7. v-for
推荐加个
:key=,key的作用主要是为了高效的更新虚拟DOM
不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。
<li v-for="(item,index) in names">{{item}}-{{index}}</li>
v-for="(value, name, index) in object"
7. v-model：实现表单元素和数据的双向绑定
原理：
包含两个操作：1.v-bind绑定一个value属性；2.v-on指令给当前元素绑定input事件,进行值的更新
<input type="text" :value="message" @input="message = $event.target.value">
v-model还可以绑定单选框、复选框
<h2>您的爱好是: {{hobbies}}</h2>
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
hobbies: [], // 多选框,
originHobbies: ['篮球', '足球', '乒乓球', '羽毛球', '台球', '高尔夫球']
}
})
</script>
v-model的修饰符：
lazy修饰符：
默认情况下，v-model默认在input事件中会对输入框的数据进行同步，但lazy修饰符可以转为在自定义的事件之后再进行同步。如：失去焦点或者按回车键时更新
<input v-model.lazy="msg">
number修饰符：
默认情况下，输入框将输入的数据当做字符串类型进行处理，number修饰符可以让输入框的内容自动转成数字类型
<input type="number" v-model.number="age">
<h2>{{age}} {{typeof age}}</h2>
trim修饰符：
自动过滤用户输入的首尾空白字符
<input type="text" v-model.trim = "mes">
4. Vue计算属性
注意：计算属性不用加（），要有return值
<div id="example">
<p> {{ message }}</p>
<p>{{reversedMessage }}</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
计算属性缓存 vs 方法
计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
computed: {
now: function () {
return Date.now()
}
}
计算属性不会更新，但相比之下，每当触发重新渲染时，调用方法将总会再次执行函数
需要计算属性缓存的原因：
（官网解释）假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter。如果你不希望有缓存，请用方法来替代。