- v-cloak的用法
<!DOCTYPE html>
<html>
<head>
<title>demo</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>
<body>
<div id="demo" v-cloak>{{message}}</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//在vue解析之前，div中有一个属性v-cloak,此时display:none 起作用
//在vue解析之后，div中没有一个属性v-cloak，此时display:none 没用
setTimeout(function(){
var app = new Vue({
el:"#demo",
data:{
message:"hello",
}
});
},1000)
</script>
</body>
</html>
-
v-on 触发的方法名后面不需要加括号，被省略掉了
-
v-bind:class="getClasses()"，getClasses(){return {active:this.isActive,line:this.isLine} }getClasses()是methods里的函数，当对象过长就用方法来返回 。这种要加括号，因为调用函数都要加括号，只不过v-on的括号被省略掉了 -
v-bind 的class 属性有对象语法和数组用法
对象语法 :class={类名: 布尔值}
数组用法 :class="[‘active’,‘line’]" （用的少） -
:style有对象语法和数组用法
对象语法 : style={属性名：属性值} 属性值不是变量时要加单引号 -
computed里面是函数，使用时不需要加括号
-
3种for循环
computed:{
totalPrice:function(){
let result = 0;
// for(let i=0;i<this.books.length;i++){
// result += this.books[i].price;
// }
// for(let i in this.books){
// result += this.books[i].price;
// }
for(let book of this.books){
result += book.price;
}
return result;
}
}
computed里面的函数命名不要用动词，因为计算属性
与methods的区别：computed有缓存，如果多次使用时，计算属性只会调用一次
- methods 里面的函数加不加括号：v-on 不用加，{{ 这里调用要加}}
- const常量 表示不会被再次赋值。保证了数据的安全性
- let 有块级作用域，而var没有
- 函数是一个作用域，es5之前var在if,for没有作用域，所以在很多时候，我们都必须借助于function的作用域来解决应用外面变量的问题
- es6中，加入了let,let他是有if和for的块级作用域
- 所谓的作用域就是在大括号{ }不同的话，相同变量名对应的值是不影响的
比如说这段代码：
for(let i = 0; i < btns.length; i++){
btns[i].addEventListener('click',function(){
console.log("点击了"+i+"按钮");
});
}
相当于
{
//每个大括号是一个作用域，i都不影响
let i = 0;
btns[i].addEventListener('click',function(){
console.log("点击了"+i+"按钮");
});
}
{
let i = 1;
btns[i].addEventListener('click',function(){
console.log("点击了"+i+"按钮");
});
}
{
let i = 2;
btns[i].addEventListener('click',function(){
console.log("点击了"+i+"按钮");
});
}
{
let i = 3;
btns[i].addEventListener('click',function(){
console.log("点击了"+i+"按钮");
});
}
- 在ES6开发中，优先使用const,只有需要改变某一个标识符的时候才使用let
- 常量的含义是指向的对象不能修改，但是可以改变对象内部的属性
- 对象字面量增强
const name = 'zjh';
const age = 16;
const obj = {
name, //key:name ,value为zjh
age,
}
console.log(obj); //{name: "zjh", age: 16}
- 函数增强：
const obj = {
name:'zjh',
eat(){
console.log(this.name+" eat ...");
}
}
obj.eat();
- v-on 参数
- 情况一： 如果方法本身中有一个形参，那么会默认将原生事件event参数传递进去
- 情况二： 如果需要同时传入某个参数，同时需要event时，可以通过$event 传入事件
- v-on 修饰符
- @click.stop 阻止冒泡
- @click.prevent 阻止默认行为，比如点击form表单里的submit默认提交
- Vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是重新创建新的元素。如果我们不希望Vue出现重复利用的问题，可以给对应的input 添加key,并且我们需要保证key的不同
案例：
<span v-if="isUser">
<label for="username">用户账号</label>
<input id="username" type="text" placeholder="用户账号" **key="username-input"**/>
</span>
<span v-else>
<span>邮箱账号</span>
<input type="text" placeholder="邮箱账号" **key="email-input"**/>
</span>
<button @click="isUser = !isUser">切换登录方式</button>
- v-for遍历对象的获取的是value
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!-- 获取value,key--!>
<li v-for="(item,key) in info">{{item}}-{{key}}</li>
<!-- 获取value,key,index--!>
<li v-for="(item,key,index) in info">{{item}}-{{key}}--{{index}}</li>
-
v-for 也需要加上key属性 :key=“item”
-
通过索引改变数组元素，无法响应式
-
splice(开始位置，删除个数，增加的元素1，增加的元素2，…) 删除/插入/替换元素
-
pop 删除数组的最后一个元素
-
shift 删除数组的第一个元素
-
unshift （元素1，元素2，…） 在数组最前面添加元素，和push()相反
-
sort 排序
-
reverse
-
set(要修改的对象，索引值，修改后的值）
Vue.set(this.letters,0,'bbb'); -
可变参数
function sum(...num){
console.log(num); //数组
}
sum(1,2,3);
- {{ }} 在这里面也可以调用methods里面的方法，不限于在v-on里
- 过滤器
- 给按钮动态添加disabled
:disabled="布尔值"为true时添加disabled，false时移除disabled
扫一扫
8517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
