Vue总结（三）
Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。
var App = new Vue({
el: "#root",
data: {
message: "asdasdasd"
}
)};
App.$weach("message",function(newVal,oldVal) {
console.log(newVal);
console.log(oldVal);
});
//es6中的箭头函数中的this并不是实例，要使用是用实例，可使用实例的对象App.message = "assassin";
模板语法
{{}}差值表达式
v-text="message" <=> {{}}
message: "asjkfjaklsfj
"
javascript表达式
在差值里面可以书写JavaScript表达式
{{message.split('').reverse().join('')}}
//不能执行语句，都只能是单个的表达式。
修饰符
.prevent: 阻止默认事件
.stop：组织时间冒泡
过滤器
var app = new Vue({
el: "#root",
template: `{{message | upperCase | lowerCase}}`,//message 后面 | 过滤函数，相应的过滤函数在filter对象中定义
data: {
message: "assassin"
},
filters: {
upperCase: function(value) {
return value.toUpperCase();
},
lowerCase: function(value) {
return value.toLowerCase();
}
}
});
计算属性
把我们的数据在的处理在输出
var app = new Vue({
el: "#root",
template: `{{reverseMsg}}`,
data: {
message: "assassin"
},//这这里不能使用methods
computed: {//把我们的数据在的处理在输出
reverseMsg: function(value) {
return this.message.split("").reverse().join("");
}
}
});
两者之间的区别：
methods:每次dom重新渲染。
computed:dom渲染时有缓存。依据是实例内部的变量等，发生变化时，才会重新渲染。
var app = new Vue({
el: "#root",
template: `
{{fullName}}
`,
data: {
firstName: "",
lastName: ""
},
computed: {
lastName: function() {//挡firstName,lastName这两个内部依赖变化时，就开始重新计算，依赖不变，使用缓存。
return this.firstName + " " +this.lastName;
}
}
});
watch侦听属性
var app = new Vue({
el: "#root",
template: `
{{fullName}}
`,
data: {
firstName: "",
lastName: "",
fullName: ""
},
watch: {
firstName: function() {
return this.fullName = this.firstName + " " +this.lastName;
},
lastName: function() {
return this.fullName = this.first
}
}
});
相比较computed,computed的比较简洁。
computed的set属性和get属性
var app = new Vue({
el: "#root",
template: `
{{fullName}}
`,
data: {
firstName: "",
lastName: ""
},
computed: {
fullName: {
get: function() {
return this.firstName+" "+this.lastName;
},
set: function(value) {
var arr = value.split("");
this.firstName = arr[0];
this.lastName = arr[1];
}
}
}
});
demo:
var app = new vue({
el: "#root",
templete: `
Ask a yes/no question:
{{answer}}
`,
data: {
question: " ",
answer: "I cannot give you an answer uniter you ask a question!"
},
watch: {
question: function() {
this.answer = "Wating for you to stop typing...";
this.getAnster();
}
},
methods: {
getAnster: function() {
if(this.question.indexOf("?") === -1) {
this.answer = "Questions usually contain a question mark.";
return ;
}
this.answer = "Thinking...";
var _this = this;
/*
axios.get("https://yesno.wtf/api").then(function(response) {
_this.answer = response.data.answer;
}).catch(function(error) {
_this.answer = "Error! Could not reach the API."+error;
});
*/
if(app.timer) {
clearTimer(app.timer);
}
app.timer = setTimeout(function() {
axios.get("https://yesno.wtf/api").then(function(response) {
_this.answer = response.data.answer;
}).catch(function(error) {
_this.answer = "Error! Could not reach the API."+error;
});
},200);//利用定时器进行优化
}
}
})
class和style
//active 类名， isActive: 布尔值
//text-danager,中间有线，所以要加单引号。
...
data: {
isActive: true
}
computed: {
hasError: function() {
return false;
}
}
//同样可以写在methods中实现，但不能重复实现过程。
上面可等价：类的对象形式
var app = new Vue({
el: "#root",
template: `{{message}}`,
data: {
message: "heelo world",
isActive: true,
hasError: false,
classObj: {
active: true,
'text-danager': false
}
},
computed: {//classObj也可以在computed中实现
classObj: function() {
return {
active: this.isActive,
'text-danger': this.hasError
}
}
}
});//case:tab
类的数组形式
var app = new Vue({
el: "#root",
template: `{{message}}`,
data: {
a: "active",
b: "text-danger"
},
computed: {//classObj也可以在computed中实现
classObj: function() {
return {
active: this.isActive,
'text-danger': this.hasError
}
}
}
});
内联样式：
var app = new Vue({
el: "#root",
template: `{{message}}`,
data: {
fontSize: 30
}
});
内联样式的对象形式：
var app = new Vue({
el: "#root",
template: `{{message}}`,
data: {
styleObj: {
color: "red",
fonSize: "30px",
display: ['-webkit-box', '-ms-flexbox', 'flex']//经过js处理在浏览器端会出现相应的属性
}
}
});
条件渲染
多条件组选择：
1
2
3
1
2
3
//在浏览器DOM中是不渲染的。
v-if="条件表达式"
1
2
3
1
2
3
1
2
3
var app = new Vue({
el: "#root",
data: {
number: 1
}
})
key值管理服用的元素
var app = new Vue({
el: "#root",
data: {
loginType: "usename",
username: "",//防止输入框中的数据清除
email: ""
},
methods: {
handleClick: function() {
if(this.loginType === "username") {
this.loginType = "email";
}else{
this.loginType = "username";
}
}
}
});
//这样使得切换的input输入的值不会发生变化，vue.js中处于对渲染的优化，解决办法在不同的input中添加key值，即可区分开来。这样有个小问题，切换之后输入框中的值不存在，分别绑定model值，即可解决。
列表的渲染
v-for="(item,key) in items"
v-for="(item,key) of items"
两者用法完全相同，
{{index}}{{key}}{{value}}
在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
这几种循环要谨慎使用，键值因不同的浏览器恶如输出不同的结果。循环的时候一般都要绑定key
数组的方法：
vue不会像新增内容上增加getter,setter，也就是双向绑定失效。所以对数组的操作要有新的语法。
变异方法：也就是对原有数组的方法进行了改变。
push();
pop();
shift();
unshift();
splice();
sort();
reverse();
不能直接修改等,this.items[indexOfItem] = newValue。如下：
this.items.push({ message: 'Baz' });
事件
{{total}}
自定义一个简单的双向绑定
{{something}}
//v-bind 绑定一个值，v-on检测触发值的变化
子组件与父组件的数据双向绑定